• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild ragt in Firefox aus div heraus

Status
Für weitere Antworten geschlossen.
M

Mo3b

Mitglied
Hi,
ich habe beim folgenden Code ein Problem:

HTML: 
<html>
<head>
<style type="text/css">
div#main
{
width:500px;
height:200px;
border: 10px solid black;
background-image:url(linker_rand.jpg);
background-repeat:repeat-y;
}
</style>
</head>
<body>
<div id="main">
<img src="images/3323652.jpg" alt="">
</div>
</body>
</html>
Und Zwar:
Wenn mein Bild länger als 200 Pixel ist (Länge des divs), dann geht der Rahmen nur bis 200px! Ich möchte aber das auch das Bild im div bleibt, wie mach ich das?
Ach ja im IE wird es so angezeigt wie ich mir das vorstelle.

Mfg Mo3b
 
Lass die height-Angabe einfach weg. Der Div passt sich in der Höhe dann automatisch dem Inhalt an.
 
Ok,
jetzt weis ich WO mein Problem liegt.

Hier der leicht modifizierte Code.(Das Bild ist gefloatet.)

HTML: 
<html>
<head>
<style type="text/css">
div#main
{
width:500px;
border: 10px solid black;
background-image:url(linker_rand.jpg);
background-repeat:repeat-y;
}
</style>
</head>

<body>
<div id="main">
<img src="http://www.html.de/images/3323652.jpg" alt="" style="float:right;">
</div>

</body>
</html>

Das Bild möchte ich vom Text links umflossen. Dabei soll das div aber das Bild umschliessen.

Mfg Mo3b

EDIT:
Ok,
habs selber rausgefunden:

Das umgebende div braucht die Eigenschaft overflow:auto;
Damit klappt es.

Mfg Mo3b
 
Zuletzt bearbeitet von einem Moderator:
Ein bisschen Geduld haben und nicht mehrere Beiträge hintereinander schreiben; aktuelle Informationen (oder Hilferufe;)) in den letzten hineineditieren. Danke.

Zum Thema: Es sollte übrigens auch klappen, wenn du vor dem </div> ein Element einfügst, dem du die Eigenschaft clear: both; gibst.
 
Ok,
mach ich das nächste mal ;).

Der Befehl löst mein Problem im Firefox. Nun hab ich dadurch aber ein Problem im IE 6 oO.

Dieses konnte ich durch einen CSS-Hack lösen:

HTML: 
div#Inhalt {
	position: absolute;
	top: 200px;
	left: 25px;
          width: 600px;
	height: 400px;

   margin:20 0 0 5;
   overflow: auto;
   }

* html div#Inhalt { overflow-x: auto;
                     overflow-y: visible;
                     padding-bottom: 20px;}

Hier ist Inhalt mein div das den Text und das Bild beinhaltet. Damit keine Scrollbalken kommen benötige ich overflow-y visible für den IE 6. Da das ganze dann nochn bissl verbugt ist, kommt noch ein padding-bottom dazu. ;-)

Mfg Mo3b
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben