|
|||
Dynamische Höhe im Content und DIV immer unten
Hallo,
nun brauch ich als nicht html'er eure hilfe Das folgende Layout hab ich hinbekommen. Nun hab ich das Problem, dass die SUBNAV im linken bereich immer unten hängen soll. die höhe der content-spalte ist aber dynamisch. von meinem verständnis her müsste das funktionieren, wenn ich der linken spalte eine höhe von 100% gebe und der subnav bottom:0px. geht aber nicht. hat das schonmall jemand gemacht? 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" xml:lang="en" lang="en" > <head> <title>Template</title> <style> html, body{ margin:0; padding:0; padding-top:41px; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:11px; } #pagewidth{ width:829px; text-align:left; margin-left:auto; margin-right:auto; } #header{ position:relative; height:40px; background-color:#fff; width:100%; margin-bottom:40px; } #logo{ background-color:#eee; width:204px; height:40px; background-image:url(/logo.jpg); margin-right:52px; float:left; } #topnavi{ background-color:#aaa; height:14px; padding-top:26px; } #leftcol{ background-color:#abc; padding-right:52px; width:204px; height:100%; float:left; position:relative; } #lefttop{ background-color:#cba; position:absolute; bottom:0px; } #leftbottom{ position:absolute; top:0px; background-color:#bca; } #maincol{ background-color:#abc; padding-right:74px; float:right; display:inline; position:relative; width:499px; } #footer{ background-color:#ddd; margin-top:21px; height:22px; width:829px; background-image:url(/footer.gif); color:#fff; clear:both; font-size:9pt; } #aktiv{ margin-top:4px; padding-left:22px; text-transform:uppercase; width:234px; height:22px; float:left; } #klickpfad{ color:#000; margin-top:4px; width:499px; height:22px; float:left; } #sprache{ margin-top:4px; padding-left:5px; text-transform:uppercase; width:69px; height:22px; float:left; } .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix{display:inline-block;} /* Hides from IE-mac \*/ * html .clearfix{height:1%;} .clearfix{display:block;} /* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} #twocols, #maincol{width:100%; float:none;} } </style> </head> <body> <div id="pagewidth"> <div id="header"> <div id="logo"></div> <div id="topnavi">NAVI</div> </div> <div id="wrapper" class="clearfix"> <div id="maincol">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</div> <div id="leftcol"> <div id="lefttop">TEASER</div> <div id="leftbottom">SUBNAV</div> </div> </div> <div id="footer"> <div id="aktiv">lorem</div> <div id="klickpfad">footer</div> <div id="sprache">ipsum</div> </div> </div> </body> </html> gruss, keaton |
Sponsored Links |
|
|||
hmpf...
eine sache noch... momentan ist es ja so, dass #leftbottom unten hängt und #lefttop oben. die höhe wird von der contentspalte angegeben. ist es nun möglich, das die beiden divs in der linken spalte die höhe vorgeben. soll heissen: wenn der inhalte von leftbottom und lefttop so lang wird, das die beiden divs aneinanderstossen würden, verdecken sich die divs momentan. es wäre aber gut, wenn die beiden divs aneinander stossen und die höhe des #wrapper-divs erhöhen. |
|
||||
Das kannst Du durch padding-bottom für #leftcol oder #lefttop erreichen. Der Wert sollte der Höhe der Subnavi entsprechen, und wird daher am besten in em angegeben, damit er sich bei Textvergrößerung entsprechend erhöht. Da mußt Du also etwas herumpobieren.
Viel besser geht's nicht, da absolut positionierte Elemente aus dem Dokumentfluß genommen sind und daher keinen Einfluß mehr auf die übrigen Elemente nehmen. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
div, dynamische höhe aber nix faux ... | emmis | CSS | 1 | 11.12.2010 18:37 |
Tabellen als Div Container | SpecialFighter | (X)HTML | 7 | 12.10.2010 18:40 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Problem mit einem 3D-Effekt | moep0710 | CSS | 12 | 12.06.2010 15:30 |