|
|||
![]()
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. ![]() 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"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Unbenanntes Dokument</title> <link href="sytle.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="wrapper"> <div id="logo">Tolles Logo </div> <div id="top">Tolles Menü </div> <div id="right"> </div> <div id="left">Tolles Menü </div> <div id="flex">Tolles Bild </div> <div id="lang"> </div> <div id="main">Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text </div> </div> </div> </body> </html> Code:
@charset "UTF-8"; /* CSS Document */ html{ min-height: 101%; } table { border-spacing: 0px; } td { margin: 0px; padding: 0px; } tr { margin: 0px; padding: 0px; } img { border: 0px; margin: 0px; padding: 0px; } address { font-style: normal; color: #ff4400; } .readon { margin: 0 0 0 15px; font-size: 7pt; text-transform : uppercase; } body{ font-size: 12px; font-family:Verdana,Arial,Helvetica,sans-serif; margin: 0px; padding: 0px; } #container{ width: 832px; margin: 0 auto; margin-top: 0px; background-color: #33FF00; } #wrapper { width: 816px; margin: 0 auto; margin-top: 0px; background-color: #fbe7c5; position: relative; top: 0px; left: auto; } #logo{ width: 253px; height: 184px; padding: 0px; margin: 0px; background: #663300; border-bottom: 10px solid #8c6640; position: relative; } #top{ width: 514px; height: 174px; padding: 0px; margin: 0px; background: #663300; position: absolute; top: 0px; left: 253px; } #right{ width: 49px; height: 184px; padding: 0px; margin: 0px; background: #663300; position: absolute; top: 0px; right: 0px; border-bottom: 10px solid #8c6640; } #left{ width: 253px; height: 326px; padding: 0px; margin: 0px; background: #fbe7c5; position:absolute; top: 194px; left: 0px; border-bottom: 10px solid #990000; } #flex{ width: 514px; height: 356px; padding: 0px; margin: 0px; background: #ffffff; position: absolute; top: 174px; left: 253px; } #flex img { border: 0px; margin: 0px; padding: 10px; } #lang{ width: 49px; height: 326px; padding: 0px; margin: 0px; background: #fbe7c5; position: absolute; top: 194px; right: 0px; border-bottom: 10px solid #990000; } #main { width: 816px; padding: 0px; margin: 0px; background: #990000; position: absolute; top: 530px; left: 0px; color: #ffffff; } |
Sponsored Links |
|
|||
![]()
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? |
Sponsored Links |
|
|||
![]()
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"> html, body {height: 100%;} #container {min-height:100%;} </style> <body> <div id="container"> </div> </body> 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"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="logo">Logo </div> <div id="top">Menü </div> <div id="right">Nix </div> <div id="left">Menü </div> <div id="flex">Bild </div> <div id="lang">Sprache </div> <div id="main">Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. </div> <div id="footer"> </div> </div> </body> </html Code:
@charset "UTF-8"; /* CSS Document */ * { margin: 0; padding: 0; } html{ height: 100%; } table { border-spacing: 0px; } td { margin: 0px; padding: 0px; } tr { margin: 0px; padding: 0px; } img { border: 0px; margin: 0px; padding: 0px; } address { font-style: normal; color: #ff4400; } .readon { margin: 0 0 0 15px; font-size: 7pt; text-transform : uppercase; } body{ font-size: 12px; font-family:Verdana,Arial,Helvetica,sans-serif; margin: 0px; padding: 0px; height: 100%; } #container{ width: 832px; margin: 0 auto; margin-top: 0px; background-color:#33FF00; min-height: 100%; } #wrapper { width: 817px; margin: 0 auto; margin-top: 0px; background-color:#FF0000; } #logo{ width: 253px; height: 184px; padding: 0px; margin: 0px; background-color:#FFFF00; border-bottom: 10px solid #8c6640; float: left; } #left{ width: 253px; height: 326px; padding: 0px; margin: 0px; background-color:#FF9900; border-bottom: 10px solid #990000; float: left; } #top{ width: 514px; height: 174px; padding: 0px; margin: 0px; background-color:#00FFFF; float: left; } #flex{ width: 514px; height: 356px; padding: 0px; margin: 0px; background: #999; float: left; } #right{ width: 49px; height: 184px; padding: 0px; margin: 0px; background: #663300; border-bottom: 10px solid #8c6640; float: left; } #lang{ width: 49px; height: 326px; padding: 0px; margin: 0px; background-color:#FF99FF; border-bottom: 10px solid #990000; float: left; } #main { width: 816px; padding: 0px; margin: 0px; background: #fff; color: #000; float: left; } #footer { clear: both; } 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; border-bottom: 10px solid #8c6640; |
|
|||
![]()
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
![]() 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. |
Sponsored Links |
|
|||
![]()
Dann mach das doch, ich wüsste im Moment nichts, was dagegen spricht.
|
Sponsored Links |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Probleme mit meinem content wrapper | d3x | CSS | 10 | 13.10.2010 16:00 |
Wrapper um/in beliebiges Element | Sonny Lane | CSS | 1 | 13.03.2010 09:01 |
Layout | Position | Wrapper | danzo | CSS | 4 | 19.10.2009 18:41 |
Wrapper wächst nicht mit sondern bleibt fix. | mafra | CSS | 18 | 27.10.2008 23:08 |
Wrapper Container wächst nicht mit | bendar | CSS | 2 | 03.05.2005 10:09 |