nicht angemeldet
Homepage zentrieren im Browser
0 
Gunnar Bittersmann
0
Homepage zentrieren im Browser
Hallo,
ich möchte eine einfache Homepage machen, die aber insgesamt eine Hintergrundfarbe hat und auf der ein Feld in weiß, welches links beginnt, wenn der Browser kleiner als 900px darstellen kann und zentriert ist, wenn der Browser mehr darstellt? Bisher habe ich immer nur Beispiele gefunden, bei denen man die Seite zwar zentrieren kann, aber sobald ich den Browser kleiner mache wird die Seite nach links aus dem Bild geschoben und das möchte ich verhindern.
Im Moment habe ich ein div definiert, welches über allem liegt und ihm die eine Klasse zugewisen. Diese Klasse würde ich dann gerne mit css Befehlen so konfigurieren, dass das geschieht, was ich mir gedacht habe.
Ideal wäre es, wenn sowas wie auf dieser Seite passieren würde
"www.vds-ev.de". Wobei das Hauptfenster gerne statisch sein darf.
Euer Costin
Mein relevanter Quellcode hat folgenden Aufbau bisher:
<html>
<head>
<style type="text/css">
body { background-color:#ff0000;
margin:0px;}
<!--capitus soll mein Hauptfenster sein, welches alle anderen Elemente enthält.-->
.capitus { width:900px;
position:absolute;
top:10px;
background-color:#ffffff;
}
</style>
</head>
<body>
<div class="capitus">
Hier hinen kommen alle anderen Elemente
</div>
</body>
</html>
-
@@Costin:
nuqneH
Im Moment habe ich ein div definiert
Das div kannst du gleich wieder entsorgen.
Dem Container keine feste Breite, sondern eine maximale ('max-width') geben. Und so zentrieren, wie man das bei Blockelementen macht (siehe FAQ).
Anzusehen in diesem Beispiel.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Vielen Dank,
das löst einen Teil meines Problems. Wobei ich trotzdem mit fester Breite arbeiten möchte.
Ich möchte allerdings unterelemente in den Container geben und diese sollen relativ zum Container sein. Dafür darf der Container aber nicht position: static; haben. Dein Vorschlag funktioniert aber nicht mit position:absolute;Jetzt frage ich mich natürlich, wie ich das dann dort machen kann, wenn meine unterelemente 10px von links bzw 10 px von rechts, aber eben innerhalb dieses Containers liegen sollen?
.logol { position: absolute; top: 10px; left: 10px; width: 100px;} .logor { position: absolute; top: 10px; right: 10px; width: 100px;}Achso. Und ohne ein div weiß ich nicht, wie ich dem gesamten Bereich eine Hintergrundfarbe zuweisen soll.
Vielen Dank weiterhin.-
@@Costin:
nuqneH
Wobei ich trotzdem mit fester Breite arbeiten möchte.
Das ist aber nicht gut, da viele Nutzer Viewports haben, die schmaler als 900 Pixel sind und dann ständig horizontal hin- und herscrollen müssten.
Ich möchte allerdings unterelemente in den Container geben und diese sollen relativ zum Container sein. Dafür darf der Container aber nicht position: static; haben. Dein Vorschlag funktioniert aber nicht mit position:absolute;
Es gibt außer "static" und "absolute" noch andere Werte für die 'display'-Eigenschaft.
Achso. Und ohne ein div weiß ich nicht, wie ich dem gesamten Bereich eine Hintergrundfarbe zuweisen soll.
Der gesamte Bereich ist das 'html'-Element.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain) -
Die Positionierungswerte (top/right/bottom/left) bei position:absolute beziehen sich auf die Kanten der Box, die vom »containing block« erzeugt wurde. Wenn du einem Element position:relative gibst, so wirkt es als containing block für darin liegende, absolut positionierte Elemente.
Mit der Kombi von position:relative für ein Containerelement (in deinem Fall wohl body) und position:absolute für Kindelemente kannst du die Kindelemente relativ zum Container ausrichten. position:relative reicht, du musst dann keine Verschiebung angeben. Dann liegt der body dort, wo er auch ohne position:relative liegen würde.
Mathias
-
Hallo Mathias,
danke. das mit dem position "relative" hat meine Frage dann endgültig beantwortet. Hat mir sehr geholfen.
Und so krieg ich das auch mit den zwei Hintergrundfarben hin.
Costin-
Om nah hoo pez nyeetz, Costin!
danke. das mit dem position "relative" hat meine Frage dann endgültig beantwortet. Hat mir sehr geholfen.
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
-