LinkBack URL
About LinkBacks
ZitierenIch denke mal, dass dir dieser Link weiterhilft. Du musst bei bedarf die Breite anpassen, falls du nicht willst, dass es sich über den ganzen Bildschirm erstreckt (100%), aber ansonsten sollte das genau sein, was du brauchst.
Hallo!
Ich möchte mit CSS ein Layout entwerfen, das links und rechts eine Menüleiste hat, sodass in der Mitte der Inhalt steht.
Meine CSS-Datei sieht dann so aus:
Mein HTML-Code sieht dann so aus.Code:body { font: 12pt Verdana,sans-serif; text-align: center; } #zentriert { text-align: left; margin: 0 auto; margin-top: 50px; } #Navbar { position: absolute; margin-top: 50px; width: 15%; border: 0.1em solid; font-size: 90%; } #Content { position: absolute; margin-left: 15%; width: 60%; border: 0.3em solid; min-height: 30em; } #Sidebar { position: absolute; margin-top: 50px; margin-left: 75.6%; width: 20%; border: 0.1em solid; font-size: 90%; }
Jetzt ist meine erste Frage erstmal, warum ist die komplette Seite nicht zentriert? Was müsste ich tun, damit sie zentriert wird?HTML-Code:<body> <div id="zentriert"> <div id="Navbar"> blabla<br /> blabla<br /> blabla<br /> blabla<br /> blabla<br /> </div> <div id="Content"> </div> <div id="Sidebar"> bla </div> </div> </body>
Und als zweites: Irgendwie finde ich das blöd, dass man die einzelnen Blöcke, also Navbar, Content und Sidebar, mit margin-left ausrichten muss. Die sollen ja alle einen Rahmen haben und direkt nebeneinander liegen. Aber die Sidebar würde jetzt, wenn ich die Schriftgröße vergrößer, sich verschieben, was ja irgendwie blöd ist. Kann man da was machen?
Ich denke mal, dass dir dieser Link weiterhilft. Du musst bei bedarf die Breite anpassen, falls du nicht willst, dass es sich über den ganzen Bildschirm erstreckt (100%), aber ansonsten sollte das genau sein, was du brauchst.
Chaos ist nur eine andere Definition von Ordnung.
Verzichte auf sämtliche absoluten Positionierungen.
"absolute" heißt deshalb "absolute", weil es in den meisten Fällen "absolut" unnötig ist (zumindest sollte man sich seiner Bedeutung bewusst sein).
Verwende besser float- und margin-Angaben zur Positionierung.
Ein Beispiel findest du hier
OK, die CSS-Datei habe ich wie folgt verändert.
Die komplette Seite ist aber immer noch nicht zentriert. Was kann man da machen?Code:body { font: 12pt Verdana,sans-serif; text-align: center; } #zentriert { text-align: left; margin: 0 auto; } #Navbar { display: inline; float: left; margin-top: 50px; width: 15%; border: 0.1em solid; font-size: 90%; } #Content { float: left; width: 60%; border: 0.3em solid; min-height: 30em; } #Sidebar { display: inline; float: left; margin-top: 50px; width: 15%; border: 0.1em solid; font-size: 90%; }
ich schätze, du musst dem "zentriert" noch ne breite geben .. so isses 100% breit, und das kann man nicht zentrieren .. kannst ja mal width:90% versuchen - und die anderen drei container dann so, daß es 100% statt 90% werden, sonst nimmt er 90 von 90 und es wird dir evtl. zu schmal ...
100% ist auch ein Breitenwert und die Seite sollte dann zentriert sein. Nur merkt man's eben nicht
Durch die Rahmen weird die Seite nach dem Boxmodell auch noch geringfügig breiter.
Stell' am besten mal einen Link zur Seite rein, dann kann man alles im Zusammenhang sehen und beurteilen.
OK, ich habe #zentriert jetzt auf 95%, die beiden Menüleisten auf 15% und den Inhalt auf 70%. Das Problem ist jetzt noch, dass sich die rechte Menüleiste in die nächste Zeile verschiebt, wenn ich die Schriftgröße ändere oder am Padding was verstelle. Kann man das noch beheben?
Geändert von darton (19.07.2009 um 17:41 Uhr)
Nach dem Boxmodell erhöhen padding, border und margin die Gesamtbreite.
Insofern führt ein Paddingwert dann zum Überschreiten des 100%-Wertes, wenn alles zu knapp kalkuliert ist.
Was bei der Schriftgröße die Ursache ist, weis ich nicht.
Kann man nicht der rechten Box sagen, dass sie nicht in die nächste Zeile rutschen soll?
Das blöde ist ja, dass ich die Größe auch daran anpassen muss, ob der Browser einen Scrollbalken hat oder nicht.
Muss es denn ein flexibles, prozentuales Layout sein?
Je nach Fenstergröße kann die Seite dann recht unterschiedlich aussehen, vor allem wenn noch Grafiken hinzu kommen. Aber auch Textzeilen können mitunter recht lang werden.
Ich verwende meist eine fixe Breite von ca. 900-1000px und kalkuliere danach die einzelnen Spalten unter Berücksichtigung von border, padding und margin-Werten.
Wenn dann die Breite nicht zum Bildschirm passt, dann muss man eben etwas scrollen.
hmm ... naja, im prinzip sagst du der box ja, daß sie neben dem inhalt stehen soll .. aber wo soll die arme box denn hin, wenn sie nicht mehr in die reihe passt?
.. wenn du borders und margins zwischen/bei den "hauptboxen" verwendest, sollte die gesamtbreite unter 100% sein, da musste mal mit den werten ein bissl rumbasteln .. lieber ein bissl zu schmal als zu breit, dann biste auf der sicheren seite ..
.. das innen benötigte padding kannst du auch den sachen zuweisen, die IN der box sind (da vielleicht auch als margin, je nachdem, was gewünscht ist ..) .. also in deinem fall zB
<div id="Sidebar">
<p>bla</p>
</div>
.. dann kannst du dem <p> die passenden abstände zum außenrand geben, ohne die größe der äußeren box zu beeinflussen ..
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)