onerave Geschrieben 22. August 2009 Teilen 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 Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
FMG Geschrieben 23. August 2009 Teilen 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> Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
onerave Geschrieben 24. August 2009 Autor Teilen 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 Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
Empfohlene Beiträge
Dein Kommentar
Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.