tomtom
2012-09-06, 21:55:43
Hi Leute,
Nach langer Abstinenz von dem Thema arbeite ich mich grade wieder in HTML/CSS ein, was zugegebenermaßen auch ganz gut funktioniert. Allerdings stecke ich gerade an einer wahrscheinlich komplett simplen Sache und probiere nun schon seit Stunden rum - komme aber auf keine brauchbare Lösung ;(
Und zwar soll das vorliegende Codesegment später eine Kommentarbox für ein Wordpress-Template werden, die ineinander (für Replies) verschachtelt werden können. Einfacher Aufbau: Links das Avatar-Bildchen, rechts der Content. Gebe ich beiden DIVs eine fixe Breite, funktioniert das Ganze wunderbar. Durch die Verschachtelung ist es aber notwendig, dass nur das linke DIV eine fixe Breite haben darf, das rechte DIV soll den Rest der Box ausnützen (weil diese je nach Tiefe verschieden breit sein wird) und - ganz wichtig - es soll NICHT um das Bild fließen.
http://img62.imageshack.us/img62/3889/testiab.png (http://imageshack.us/photo/my-images/62/testiab.png/)
Der blaue Border in meinem Screenshot markiert den übergeordneten Container, das rote den Bild-Container und der blaue den Kommentartext.
Jetzt ist es so, dass der Bild-Container 32x32px groß sein soll + 8px Abstand nach rechts. Bei Pixel 40 sollte demnach die Kommentar-Box beginnen, nach meinem Code beginnt sie aber bereits bei Pixel 0 und fließt somit um das Avatar-Bildchen. Und genau das will ich nicht :freak:
Wie gesagt...haben beiden Container eine fixe Breite, dann ists kein Problem - aber das muss ich anders lösen :)
Eine weitere Frage: Wenn ich die Umflusseigenschaften durch das clear: both; wieder aufhebe, warum entsteht zwischen dem grünen und dem blauen DIV unten ein Abstand? Ohne das Attribut hab ich das nämlich nicht...
Die Umflusseigenschaften aber wieder zurückzusetzen ist notwendig, weil mir sonst mein restliches Layout flöten geht (:
Bin schon gespannt, was ich hier falsch mache - aber ich seh den Wald vor lauter Bäumen mittlerweile schon nicht mehr :/
Hier der Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<div style="width: 500px; border: 1px solid #0000cc;">
<div style="float: left; width: 32px; height: 32px; margin-right: 8px; border: 1px solid #cc0000;"> </div>
<div style="border: 1px solid #00cc00;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
</div>
<br style="clear: both;" />
</div>
</body>
</html>
Nachtrag: Gebe ich dem 2. Div ebenfalls eine float-Eigenschaft, so nutzt es 100% des übergeordneten Containers aus und legt sich somit unter das Avatar-Bild.
thx (:
Nach langer Abstinenz von dem Thema arbeite ich mich grade wieder in HTML/CSS ein, was zugegebenermaßen auch ganz gut funktioniert. Allerdings stecke ich gerade an einer wahrscheinlich komplett simplen Sache und probiere nun schon seit Stunden rum - komme aber auf keine brauchbare Lösung ;(
Und zwar soll das vorliegende Codesegment später eine Kommentarbox für ein Wordpress-Template werden, die ineinander (für Replies) verschachtelt werden können. Einfacher Aufbau: Links das Avatar-Bildchen, rechts der Content. Gebe ich beiden DIVs eine fixe Breite, funktioniert das Ganze wunderbar. Durch die Verschachtelung ist es aber notwendig, dass nur das linke DIV eine fixe Breite haben darf, das rechte DIV soll den Rest der Box ausnützen (weil diese je nach Tiefe verschieden breit sein wird) und - ganz wichtig - es soll NICHT um das Bild fließen.
http://img62.imageshack.us/img62/3889/testiab.png (http://imageshack.us/photo/my-images/62/testiab.png/)
Der blaue Border in meinem Screenshot markiert den übergeordneten Container, das rote den Bild-Container und der blaue den Kommentartext.
Jetzt ist es so, dass der Bild-Container 32x32px groß sein soll + 8px Abstand nach rechts. Bei Pixel 40 sollte demnach die Kommentar-Box beginnen, nach meinem Code beginnt sie aber bereits bei Pixel 0 und fließt somit um das Avatar-Bildchen. Und genau das will ich nicht :freak:
Wie gesagt...haben beiden Container eine fixe Breite, dann ists kein Problem - aber das muss ich anders lösen :)
Eine weitere Frage: Wenn ich die Umflusseigenschaften durch das clear: both; wieder aufhebe, warum entsteht zwischen dem grünen und dem blauen DIV unten ein Abstand? Ohne das Attribut hab ich das nämlich nicht...
Die Umflusseigenschaften aber wieder zurückzusetzen ist notwendig, weil mir sonst mein restliches Layout flöten geht (:
Bin schon gespannt, was ich hier falsch mache - aber ich seh den Wald vor lauter Bäumen mittlerweile schon nicht mehr :/
Hier der Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<div style="width: 500px; border: 1px solid #0000cc;">
<div style="float: left; width: 32px; height: 32px; margin-right: 8px; border: 1px solid #cc0000;"> </div>
<div style="border: 1px solid #00cc00;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
</div>
<br style="clear: both;" />
</div>
</body>
</html>
Nachtrag: Gebe ich dem 2. Div ebenfalls eine float-Eigenschaft, so nutzt es 100% des übergeordneten Containers aus und legt sich somit unter das Avatar-Bild.
thx (: