|
|||
Probleme mit Mehrspaltigem Layout
Hallo,
ich habe zwei Probleme mit einem mehrspaltigen Layout. Hier kommt erstmals der Code. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head> <title>Testlayout</title> <style type="text/css"> <!-- html { font-family: Arial, Helvetica, sans-serif; } h1 { margin: 0px; margin-bottom: 10px; padding: 0px; padding-left: 5px; font-size: 1.3em; font-weight: bold; background-color: #F0F0F0; } h2 { margin: 0px; margin-bottom: 10px; padding: 0px; padding-left: 5px; font-weight: bold; font-size: 1.0em; background-color: #F0F0F0; } h3 { border-top: 1px dotted; border-bottom: 1px dotted; margin: 0px; margin-bottom: 10px; padding: 0px; padding-left: 5px; padding-bottom: 2px; font-weight: bold; font-size: 1.0em; } #container { width: 100%; margin: 5px; margin-left: auto; margin-right: auto; } #header { height: 60px; margin-bottom: 5px; } #subnavi { border: 1px solid #3148CF; margin-bottom: 5px; padding: 2px 5px; background-color: #FDD7A8; font-size: 0.8em; } #mainnavi { float: left; width: 130px; border: 1px solid #3148CF; margin: 0px; margin-bottom: 5px; padding-left:5px; padding-right:5px; padding-bottom:10px; background-color: #FDD7A8; font-size: 0.8em; } * html #mainnavi /* for IE only */ { position: absolute; left: 10px; } #content { margin-top: 0px; margin-left: 140px; margin-bottom: 5px; font-size: 0.8em; padding-left: 10px; padding-bottom: 0px; } #footer { clear: both; border: 1px solid #3148CF; padding: 2px 5px; margin-top: 0px; background-color: #FDD7A8; font-size: 0.7em; text-align: center; } .contentmiddle { clear: left; padding-top: 10px; } .contentwrapper { clear: both; width: 100%; padding-top: 0px; margin-bottom: 10px; } .contentright { margin-left: 51%; } .contentleft { position: relative; float: left; width: 49%; } --> </style> </head> <body> <div id="container"> <div id="header">Header</div> <div id="subnavi"> Hier steht was </div> <div id="mainnavi"> Menu 1 Menu 2 Menu 3 Menu 4 Menu 5 Menu 6 Menu 7 Menu 8 Menu 9 Menu 10 Menu 11 Menu 12 Menu 13 </div> <div id="content"> <div class="contentmiddle1"> <h1>Überschrift</h1> </div> <div class="contentwrapper"> <div class="contentleft"> <h2>Überschrift 2</h2> </div> <div class="contentright"> <h2>Überschrift 3</h2> Hier steht der Text</p> </div> </div> <div class="contentmiddle"> <h1>Überschrift</h1> </div> </div> <div id="footer">Fusszeile</div> </div> </body> </html> Code:
* html #mainnavi /* for IE only */ { position: absolute; left: 10px; } Problem 2: Wenn ich in der Menüspalte die Zeilen für Menu 4 bis 13 entferne, dann würde ich es auf allen Browsern gerne so haben, dass die Menuspalte links genauso weit nach unten gezogen wird, wie der Content Bereich rechts. Wie kann ich dies lösen? Zusatz: Ich habe so ein bisschen das Gefühl, dass beide Probleme zusammen hängen. Wer kann mir einen Tipp geben? Danke, Ralf |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Layout Probleme!!! | Silverhawk1988 | CSS | 15 | 21.12.2008 16:12 |
Probleme mit Layout | kruemelchen26 | CSS | 0 | 15.05.2007 23:40 |
Positionierung und Layout Probleme | dabidu | CSS | 9 | 22.10.2006 10:57 |
Layout Probleme | SchwarzerMagier | CSS | 18 | 01.08.2006 14:06 |
Problem mit mehrspaltigem Layout | RalfEggert | CSS | 2 | 05.04.2004 17:20 |