Wrapper wächst nicht mit, keine Floats
Hallo,
ich möchte, daß die eigentlichen DIVs von einem Container umschlossen werden. Sonst habe ich mit floats gearbeitet und ein clearendes Element nach den Hauptdivs genutzt, damit der Container mitwächst. Diesmal ist das Design aber etwas verschachtelt, daher habe ich die DIVs positioniert. Nun wächst aber der umschliessende Container nicht mehr mit. :x Irgendwie stehe ich auf dem Schlauch... Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Code:
@charset "UTF-8"; |
Hallo,
bei absoluter Positionierung wachsen die Eltern-Elemente nicht mit, so positionierte Elemente sind für den Rest einfach nicht vorhanden. Wenn ich mir dein Layout anschaue, vermute ich, dass du einen Wrapper möchtest, der sich bei wenig Inhalt bis zum unteren Browserrand erstreckt und sich bei mehr Inhalt nach unten ausdehnt. Richtig? |
Hallo EvT,
so in etwa ist es gedacht. Der Wrapper (grüner Kasten) soll immer soweit nach unten wachsen, daß der rote Mainbereich (Text) umschlossen ist. Wächst auch der rote Bereich weiter nach unten (weil mehr Text abgebildet wird) dann soll der Wrapper auch weiter mitwachsen. Der Wrapper bekommt ein Hintergrundbild (repeat-y), damit soll ein Schlagschatten realisiert werden. Bin ich vielleicht ganz falsch an die Sache rangegangen?! Hilfe!!!! |
Fang von vorne an. Damit der (Haupt-)Container sich auf volle Höhe erstecken kann, brauchen seine Vorgänger-Elemente html und body eine Höhenzuweisung von je 100%. Der #container bekommt ebenfalls 100%, aber nicht als Höhe, sondern als Mindesthöhe.
Code:
<style type="text/css"> PS: Falls du mit Opera arbeitest, müsstest du in den o.g. Code noch ein <link href="soundso.css" rel="stylesheet" type="text/css" /> einsetzen, da einige Opera-Versionen ansonsten die min-height nicht annehmen. |
Hallo EvT,
danke schon mal für die Antwort. Mit floats habe ich es nicht hinbekommen, daß DIV flex ohne Abstand zum DIV top angezeigt wird. Es war immer ein Versatz da, weil er nur bis zur unteren Kante des DIVs right nach oben gefloatet ist. Dieses verschachtelte ging erst, als ich die DIVs positioniert habe. |
Hattest du den CSS-Prolog (-->FAQ 1) in deinem Stylesheet drin? Ansonsten schreib doch nochmals deinen Seitenaufbau neu und poste ihn, selbst wenn er fehlerhaft sein sollte. Man sieht dann besser, um was es eigentlich geht bzw. wo es fehlt.
|
Ok, habe es nochmal neu geschrieben:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Code:
@charset "UTF-8"; die Lady |
Schau dir mal #logo, #top und #right an. In diesen Regeln sind sowohl untere Rahmenlinien festgelegt als auch unterschiedliche Höhen:
Code:
height: 184px; bzw. height: 174px; |
Genauso soll es ja sein. Das meine ich mit "verschachtelt". Top soll nicht so hoch sein wie logo und right und flex soll dementsprechend hochrutschen. Das ist eben mein Problem :no:
Daher dachte ich, daß man das nicht mit floats sondern mit relativer/absoluter Positionierung arbeiten muss. Wenn Du für flex ein margin-top: -18px angibst, siehst Du, wie es aussehen soll. |
Zitat:
|
Alle Zeitangaben in WEZ +2. Es ist jetzt 13:50 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023