Webseite - Gerüst - float/div
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auszug
auto
code
erwarten
folgendem schema
folgenden ansatz
formatierung
header
klatschen
korrekte darstellung
krieg
mitte
pixel
position
schema
text
url
wachsen
webseite
zufriedenstellendes ergebnis
-
Hallo
Ich habe momentan noch meine Webseite mit tables fixiert
Das möchte ich gerne ändern und alles schön mit CSS machen :-) und zwar nach folgendem Schema:
http://img155.imageshack.us/img155/3650/float.png
Ich habe also eine Seite mit 5 divs:
#whole: umhüllt alles, ist 1000 pixel breit und wird in die Mitte des Bildes gebracht
#header: ist oben
#footer: ist unten
#menu: ist in der Mitte links zwischen header und footer
#ads: ist in der Mitte rechts zwischen header und footer
#ads und #menu wird mit float right und left auf die Seite gebracht, dann habe ich in der Mitte Platz für den content. Brauche ich dafür auch ein div? (zum Beispiel für korrekte Darstellung oder weiß der Henker was ;) ) Wenn ja: Wie krieg ich ein sechstes div da in die Mitte?
einfach zwischen div menu und ads klatschen?
Ich mach mich gleich mal dran das zu schreiben :-) bis ich fertig bin erwarte ich gefälligst sehr viele Antworten
Achja und: Ich glaube, das ist die modernste Möglichkeit eine Webseite zu gestalten? Wenn nicht, was schlagt ihr vor <:
mfg
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo das Layout müsste Recht einfach umgesetzt werden können, HTML (Auszug):
Das ist nur eine Möglichkeit, aber eine simple…<body> <div id="header"></div> <div id="wrapper"> <div id="menu"></div> <div id="ads"></div> <div id="content"></div> </div> <div id="footer"></div> </body>
Das passende CSS wäre:
Der ganze Inhalt kommt dann halt in den content… es ist ungetestet, sollte aber funktionieren* { margin:0; padding:0; } body { text-align:center; } #header, #wrapper, #footer { width:1000px; margin:0 auto; text-align:left; } #wrapper { overflow:hidden; } #menu { float:left; width:180px; } #ads { float:right; width:180px; } #content { margin:0 180px; }
Mit freundlichen Grüßen -
Oha ich muss sagen, ich bin beeindruckt. Du hast das ganze viel besser als meine Lösung gemacht :-) (bei der ich ja einen Div um alles gepackt hätte) und außerdem wusste ich nicht, dass man dann bei dem content-div auch nochmal margin zur Seite braucht (deswegen hat es die Seite bei mir auch dauernd zerlegt, wenn den content-div gefüllt habe
Ich habe folgenden Ansatz:
body{ background-color:#363636; text-align: center; } #header { background: url(images/bg.jpg) repeat-x; height: 100px;} #whole {text-align:left; padding: 10px 10px 10px 10px; width: 1000px; margin: 0px auto; background: #eee;} #menu { float: left; width: 200px;} #right { float: right; width: 200px;} #footer { text-align: center; clear:both;} #content {margin: 0 200px; width:600px;}
und zwar nach dem Schema von oben, also:
<body> <div id="whole"> <div id="header"> </div> <div id="menu"> </div> <div id="content"> </div> <div id="right"> </div> <div id="footer"> </div> </div> </body>
Leider rutscht wenn ich "content" fülle immer "right" (also "ads", habs umbenannt weils sonst vom Werbeblocker geblockt würde) nach unten -_- Also rechts vom content habe ich dann 200 pixel weiß, und dann klebt "right" unter dem content an der rechten Seite :(
Ich habe jetzt einfach um deine Lösung noch ein div rumgemacht mit 10px margin und habe das erreicht was ich wollte, aber mich würde schon interessieren was ich falsch gemacht habe
vielen Dank
-
wenn man die seitendivs mit float platziert ist diese verhalten genau zu erwarten. auch die formatierung der divs auf 100% höhe hilft nix wenn der content die höhe der anzeige über 100% wachsen lässt.
und wenn man um das zu vermeiden ein contentdiv erstellt bekommt man dummerweise kein browserübergreifend zufriedenstellendes ergebnis, auch nicht wenn man dem contentdiv auch float gibt. da müssten schon feste breiten her.
ich benutze trotz anfänglicher abneigung eigentlich zum grundlayout fast nur die tabelle. vor allem da es die einzige mir bekannte möglichkeit ist, valide ohne javascript oder position:absolute eine footerzeile zu formatieren die immer am unteren fensterrand ist :) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
