Relative DIVs mit relativen Kindern
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absolute mache
ahnungslosigkeit
arbeiten
code
cursor
dank
entfernen
falle
folgenden elemente
frage
header
kind
pointer
pos
position
positionieren
realisieren
url
verpassen
verzweifeln
-
Tach, ich befürchte mal, das hier ist die absolute Boon-Frage, aber mich bringt sie zum verzweifeln:
Ich habe ein Div mit einem (oder irgenwann mal mehreren Kinderdivs):
<div class="parent"> <div class="child"> </div> </div>
Ich möchte, dass das Elterndiv so hoch ist, damit seine Kinder reinpassen.
1. Wenn ich das Elterndiv absolute mache und die Kinder relative => funktioniert.
2. Wenn ich das Elterndiv aber relative mache => funktioniert nicht, Elterndiv hat dann die Höhe 0.
(1) ist aber keine Option für mich, das mit absolute ja der Div aus dem Layoutflow rausgenommen wird und bei der Positionierung der folgenden Elemente ignoriert wird.
Wie bekomme ich es hin, dass (a) das Elterndiv bei der Positionierung von weiteren (sibling-)Divs berücksichtigt wird und (b) die Höhe seiner Kinder annimmt.
Danke im Voraus und verzeiht meine Ahnungslosigkeit. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich würde mich eher fragen, ob du mit relativer Positionierung arbeiten muss. Zumindest glaube ich das nicht. Positionierung ist eine Falle, in die man am Anfang öfters tappt. Insbesondere bei relativer Positionierung würde ich persönlich eher auf den margin zugreifen. Also, was genau willst du positionieren / warum?
-
Danke für die Antwort. Folgendes Ziel:
Einen Header über die gesamte Breite.
Einen Ticker über die gesamte Breite.
Eine Navigationsleiste über die gesamte Breite.
In der Navigationsleiste einzelne Einträge nebeneinander.
Alles darunter als Content.
<body> <div class="header"> </div> <div class="ticker"> </div> <div class="navbar"> <div class="navitem"> </div> <div class="navitem"> </div> <div class="navitem"> </div> </div> <div class="content"> </div> </body>
Mein stylesheet sieht zZ so aus:
body { font-family: 'Verdana', 'Sans Serif', 'Sans'; font-size: 11pt; background-color: white; margin: 0px; } .header { width: 100%; height: 123px; background-image: url("../img/?.png"); } .ticker { width: 100%; padding-top: 4px; padding-bottom: 4px; background-color: #2b477f; color:white; } .spacer { width:100%; height:2px; background-color:white; } .navbar { width: 100%; background-color: #2b477f; position:absolute; } .navitem { color:white; float:left; font-weight:bold; padding-left:20px; padding-right:20px; padding-top:4px; padding-bottom:4px; } .navitem:hover { cursor: pointer; background-color:#c6d3d3; color:black; }
Nicht über die hässlichen Farben wundern, die sind von der Corporate Identity
Sobald ich das position:absolute rausnehme, funzt es nimmer.
-
Was funktioniert denn nicht mehr? Also was wird falsch angezeigt?
Ich habe das Gefühl, dass das Problem ein fehlendes clear deine floats ist... mal versuchen dem content ein clear: left; zu verpassen oder vor dem Content ein <br style="clear:left;" /> zu setzen. (Eventuell auch innerhalb des navi-divs, musstn bissel probieren). Wenn irgendwas davon hilft, kann man das villeicht noch eleganter mim clearfix realisieren. -
nikic schrieb:
Was funktioniert denn nicht mehr? Also was wird falsch angezeigt?
Sobald ich das position:absolute der Navbar rausnehme, hat dieses Div die Höhe null. -
Ich sag ja, das wird am clearing liegen. pos abs entfernen und dafür an einigen Stellen das clear: left testen ;)
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
