10.04.2006, 21:18
|
|||
|
|||
div Container nimmt automatisch die Höhe des Eltern-div an
Hallöchen
ich probiere nun schon ewig rum, folgendes Layout mithilfe von div-Containern zu realisieren. Mein Ziel ist es, einen Banner mit fixer Höhe und 100% Breite über einem weiteren div-Container zu erhalten. Dieser weitere div-Container soll wiederum vier weitere Elemente beherbergen, die sich in der Höhe dem umfassenden div-Container anpassen sollen. In etwa wie: ------------------------ ####Banner##### links/---Total----/rechts -----/------------/----- -----/------------/----- -----/------------/----- -----/------------/----- -----/------------/----- -----/#footer#-/----- ------------------------ Also der Banner sollte sich übers gesamte Browserfenster erstrecken. Der linke div-Container sollte "automatisch" die Höhe des übergeordneten Containers aufweise, so wie der rechte div-Container. Der Total-Container sollte schliesslich den Inhalt beherbergen. Der footer-Container soll unterhalb des Inhalt-Containers zu liegen kommen und dieselbe Breite wie der Inhalts-Container aufweisen. Ich probierte grundsätzlich in etwa wie folgt: .... <body> <div id="banner> </div> <div id="total"> <div id="links"> </div> <div id="inhalt"> <div id="footer"> </div> </div> <div id="rechts"> </div> </div> .... Das stylesheet beherbergt nun folgende Definitionen: body {margin: 0%; padding: 0%; border: 0px; } #total {position: absolute; top: 110px; left: 0px; height: auto; width: 100%; margin: 0%; padding: 0%; } #banner {position: absolute; top: 0px; left: 0px; height: 110px; width: 100%; margin: 0%; padding: 0%; } #links {position: absolute; top: 0px; left: 0px; width: 10%; height: inherit; margin: 0%; padding: 0%; background-color: blue; } #rechts {position: absolute; top: 0px; right: 0px; width: 10%; height: inherit; margin: 0%; padding: 0%; background-color: blue; } #footer {position: absolute; bottom: 50px; left: 0%; width: 100%; height: 50px; margin: 0%; padding: 0%; background-color: blue; } #inhalt {position: absolute; top: 0px; left: 10%; width: 80%; height: auto; margin: 0%; padding: 0%; } Das Problem ist nun, dass die Höhe der div-Blöcke links und rechts mit den Eigenschaften inherit lediglich die Eigenschaft auto erben, nicht aber die tatsächliche Höhe des Elternelementes annehmen... Ich weiss nicht, was ich noch probieren könnte.... mit relativen Positions-Angaben kommts in etwa gleich raus... Weiss jemand Rat?.. Grüsse fidelio 
|
| Sponsored Links |
|
10.04.2006, 21:40
|
|||
|
|||
|
Du willst also, dass die Container immer 100% Höhe haben?
Schau mal hier rein: http://www.xhtmlforum.de/viewtopic.php?p=55252#55252 Für den footer benutze die Forensuche mit dem Begriff "footer stick alt" . Wenn Du etwas fauler bist oder einfach nur zum Lernen, klick den Link in meiner Sig.  ( da funktioniert 100% Höhe aber noch nicht besonders gut)grüsse
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
|
| Sponsored Links |
|
10.04.2006, 23:22
|
|||
|
|||
|
Danke! Werd ich gerne ausprobieren! Ich frage mich bloss, weshalb dies so schwierig ist und weshalb dies mit css nicht einfacher machbar ist, schliesslich ist css doch genau für solche sachen da!?
Danke!!!
|
|
12.04.2006, 16:34
|
|||
|
|||
|
Ups! Wer hätte da gedacht, dass ich aufgrund dieses Problems soviel über css gelernt hab...
 faux columns bauen also auf ineinander verschachtelten div-Containern auf, die mittels Hintergrundbild erreichen, dass Sie, unabhängig vom eigenen Inhalt, auf die Gesamthöhe des höchsten Kindselements gestreckt werden.... (Korrektur willkommen!) Hat mich eine rechte Weile gekostet, dies zu verstehen! Also nie wieder div-Container absolut oder irgendwie anders positionieren!... Bloss noch mittels float-Werten umfliessen lassen, mittes margin-Werten positionieren und mittels width-Werten dimensionieren (Korrekturen sehr willkommen!)... Gemäss Zoe Gillenwater (http://www.communitymx.com/content/a...ge=3&cid=AFC58) benötige ich hierfür jedoch noch die Klasse clearfix unter "Fixes" im css-stylesheet: Code:
body {
margin: 0;
padding: 0;
}
#wrapper1 {
background: url(links_bg.png) repeat-y 15% 0;
}
#wrapper2 {
background: url(rechts_bg.png) repeat-y 85% 0;
}
#wraprechts {
float: right;
width:85%;
}
#banner {
background: #fa882f
}
#inhalt {
float: left;
width: 82%;
}
#rechts {
margin-left: 83%;
}
#links {
margin-right: 85%;
}
#footer {
background: #fa882f;
}
/* Fixes...
*/
.clearfix:after {
content: ".";
clear: both;
height: 0;
visibility: hidden;
display: block;
}
.clearfix {
display: inline-block;
}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* Ende Fixes
*/
Code:
<body> <div id="wrapper1" class="clearfix"> <div id="wrapper2" class="clearfix"> <div id="banner">Banner</div> <div id="wraprechts"> <div id="inhalt">Inhalt </div> <div id="rechts">Rechts</div> </div> <div id="links">Links</div> </div> <div id="footer">Footer</div> </div> </body>
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| div container automatische höhe | Kohler | CSS | 1 | 29.06.2011 23:18 |
| Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
| DIV höhe an Eltern DIV auto anpassen | tabtwo | CSS | 18 | 18.07.2008 15:26 |
| Höhe des div an Bildhöhe anpassen | bernd_h_schulz | CSS | 5 | 03.04.2007 14:06 |
| DIV: Höhe soll sich automatisch anderen DIV anpassen | OnTheRun | CSS | 8 | 25.09.2006 19:35 |
Linear-Darstellung
