Veröffentlicht 22. August 200916 j Hallo Forum, ich bastle jetzt schon ne ganze weile an einem CSS-Design rum und bekomm langsam echt die Kriese, da das Ding nie so aussieht wie ich es gerne hätte. Ich hätte gern ein Design, dass wie folgt aussieht, bekomme es aber mit position: absolute/relative und evtl den floats einfach nicht hin: Das ganze sollte zentriert sein ... 1. Header mit fester Breite und fester Höhe 2. zwei Container nebeneinader für Navigation und Inhalt 3. Container mit der gleichen Breite wieHeader als Fusszeile So sieht mein CSS gerade aus ... passt auchb fast, nur dass navigatiuon und inhalt nicht nebeneinander sind. #top { width: 800px; height: 100px; background: darkseagreen; padding: 0px; } #navigation {position: relative; background: #0000FF; height: auto; width: 240px; left: auto; top: 10px; lft: 0px; bottom: auto; } #inhalt { position: relative; background: #FF0000; height: auto; width: 550px;left: 250px; top: 2px; } #fussleiste { position: relative; background: silver; height: 50px; width: 800px;left: 0px; top: 10px; } Wichtig ist, dass fusszeile automatisch nach unten wandert, wenn navigation ODER inhalt sich in der Höhe vergrößert, also die Container nicht überlappen. Danke schonmal & Grüße
23. August 200916 j 1. Header mit fester Breite und fester Höhe 2. zwei Container nebeneinader für Navigation und Inhalt ad 1: Bild, oder wie bei dir "freie Fläche"? Für ersteres wäre der img-Tag da, für letzteres h1 ad 2: float: left; für den Navi-Container bzw. besser der Liste direkt Wichtig ist, dass fusszeile automatisch nach unten wandertdu musst den Fluss mit clear: both; aufheben zus. musst du alles mit einem div umschließen und diesem margin: auto; mitgeben. Der IE benötigt zus. text-align: center; für den body. Obiges zusammengesetzt: <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Testseite</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body { background: white; margin: auto; text-align: center; color: black; } #layout { width: 800px; margin: auto; background: darkseagreen; border: 1px solid #004B1C; } #Header { height: 100px; background: darkseagreen; } #menuelinks { list-style: none; display: block; width: 8em; margin: 0; padding: 0.2em; float: left; clear: none; background: #00f; } #inhalt { margin-left: 8.3em; padding: 0; background: #f00; min-height: 300px;} #menuelinks, #inhalt { text-align: left; } #unten { clear: both; background: silver; margin: 0;} </style> </head> <body> <div id="layout"> <h1 id="Header">Seitentitel</h1> <ul id="menuelinks"> <li>Startseite</li> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> <li>Link 4</li> <li>Impressum</li> </ul> <div id="inhalt"> <h2>Überschrift</h2> <p>Ganz viel Text zur Überschrift</p> </div> <p id="unten">© by xyz</p> </div> </body> </html>
24. August 200916 j Hi FMG, danke für den Tipp bzw. das Beispiel! Sieht auf den ersten Blick (auch im Browser) ziemlich nach dem aus, an was ich schon ne ganze weile rumprobiere! DANKE! cu
Archiv
Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.