onerave Geschrieben 22. August 2009 Geschrieben 22. August 2009 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
FMG Geschrieben 23. August 2009 Geschrieben 23. August 2009 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>
onerave Geschrieben 24. August 2009 Autor Geschrieben 24. August 2009 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
Empfohlene Beiträge
Erstelle ein Benutzerkonto oder melde Dich an, um zu kommentieren
Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können
Benutzerkonto erstellen
Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!
Neues Benutzerkonto erstellenAnmelden
Du hast bereits ein Benutzerkonto? Melde Dich hier an.
Jetzt anmelden