Browserausgabe (Postitionierung) Verständnisproblem
0 0 0 0 
molily
0
Browserausgabe (Postitionierung) Verständnisproblem
Hallo Leute,
ich hab ein Verständnisproblem mit der Browserausgabe bei FF und Opera.
Ich habe eine Liste mit Bildern und Bildbeschreibung. Unter die Liste möchte ich ein weiteres Bild platzieren (runde Ecke links unten. Hier der Qelltext:
<div id="text">
<img id="ro" src="Bilder/ro.gif" width="35" height="35" alt="nix gfunden"/> <h3>Unser Team:</h3>
<ul id="ul_team_bilder">
<li><img src="Bilder/Team/bild1.jpg" alt="" width="165" height="220"/><h6>Titel - Bild 1</h6></li>
<li><img src="Bilder/Team/bild2.jpg" alt="" width="165" height="220"/><h6>Titel - Bild 2</h6></li>
<li><img src="Bilder/Team/bild3.jpg" alt="" width="165" height="220"/><h6>Titel Bild 3</h6></li>
<li><img src="Bilder/Team/bild4.jpg" alt="" width="165" height="220"/><h6>Titel Bild 4</h6></li>
</ul>
<img id="lu" src="Bilder/lu.gif" width="35" height="35" alt="nix gfunden"/>
</div>
CSS:
#ul_team_bilder li{
list-style:none;
float:left;
text-align:center;
}
#lu {
float:left;
margin-left: -2.55em;
}
so wird mir das Bild lu.gif für die untere linke Ecke rechts-oben neben dem Team/bild4 angezeigt.
wenn ich jetzt das img-Element in ein div packe funktioniert es.
<div style="width:35px; border: solid 1px red; "><img id="lu" src="Bilder/lu.gif" width="35" height="35" alt="nix gfunden"/></div>
Aber das Bild wird nicht im div dargestellt, sondern darunter. Das div ist über der Liste und das Bild (im div) unter der Liste.
Wer kann mir auf die Sprünge helfen?
Hoffe ihr versteht mich und mein Problemchen.
Grüße
Peter
-
oder einfacher:
wie kann es sein, dass das img nicht im umschliessenden div angezeigt wird, sondern außerhalb?
<div style="width:35px; border: solid 1px red; "><img id="lu" src="Bilder/lu.gif" width="35" height="35" alt="nix gfunden"/></div>
Peter
-
Hi,
oder einfacher:
wie kann es sein, dass das img nicht im umschliessenden div angezeigt wird, sondern außerhalb?
Da du es per float aus dem Fluss genommen hast, beeinflusst es die Hoehe seines Vorfahren nicht mehr.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Hallo ChrisB,
danke für die Antwort.
Da du es per float aus dem Fluss genommen hast, beeinflusst es die Hoehe seines Vorfahren nicht mehr.
Wenn ich dich richtig verstehe könnte ich entweder das "float:left" vom img entfernen, oder dem umschließenden div eine Mindesthöhe des Bildes zuweisen.
Beides habe ich gerade ausprobiert mit dem gleichen Ergebnis, dass das img nicht im div dargestellt wird.
Peter
-
Da du es per float aus dem Fluss genommen hast, beeinflusst es die Hoehe seines Vorfahren nicht mehr.
Wenn ich dich richtig verstehe könnte ich entweder das "float:left" vom img entfernen, oder dem umschließenden div eine Mindesthöhe des Bildes zuweisen.
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#float-einschliessen
Mathias
-
-
-
-
Hallo,
CSS:
#ul_team_bilder li{
list-style:none;
float:left;
text-align:center;
}
#lu {
float:left;
margin-left: -2.55em;
}so wird mir das Bild lu.gif für die untere linke Ecke rechts-oben neben dem Team/bild4 angezeigt.
Vielleicht, weil das letzte li-Element von ul_team_bilder mit float_left umflossen wird.
Um das zu verhindern, versuche mal clear:left bei #lu
Siehe http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear@title=clear.Bin aber CSS-Laie, habe nur gerade über die clear-Eigenschaft gelesen, weil ich auch extreme Schwierigkeiten mit der Foloaterei habe...
Gruß, Don P