nicht angemeldet
div zentrieren
Gunnar BittersmannHallo!
Ich bin gerade bei meinem ersten Versuch eine Website per css und boxmodell zu formatieren. Das klappt auch schon recht gut, nur schaffe ich es nicht den gesamten Inhalt der Seite zu horizontal zu zentrieren.
Ich habe im body als ersten ein div-element geöffnet, in dem sich der gesamte Inhalt der Seite befindet. Das sind einige weitere div-Elemente, teilweise pder php-include eingebunden, und alle mit position:absolute; positioniert.
Das Format des umschließenden div-Elementes sieht so aus:
div.zentrieren
{
position:absolute;
margin:0px auto;
width:1280px;
border-width:1px;
border-style:solid;
border-color:green;
}
Den Rahmen habe ich nur eingefügt um das ganze besser verstehen zu können.
Wenn ich das richtig verstanden habe, wird ein Element durch position:absolute; relativ zum Vorgängeelement positioniert. Bei meinem umschließenden div-Element wäre das der body.
Allerdings wird der Rahmen des umschließenden div-Elementes nur als horizontale Linie mit 1280px Breite angezeigt, die links am Rand des Browserfensters an liegt. Der Inhalt wird unterhalb dieser Linie angezeigt, und liegt ebenfalls links an.
Das sieht so aus als wären die Inhalts-Elemente keine Kindelemente des äußeren di-Elementes.
Habe ich da irgendwo einen Denkfehler oder es nicht richtig verstanden?
vielen Dank schon einmal,
Markus
Hier die Seite:
http://www.nirnaeth.de
-
Hi!
Ich bin gerade bei meinem ersten Versuch eine Website per css und boxmodell zu formatieren.
[...]alle mit position:absolute; positioniert.
Diese Kombination ist dein Fehler. Warum? Wahrscheinlich gibts keinen berechtigten Grund für die absolute Positionierung.
Eine Antwort auf Deine Frage gibts in den FAQ.
--
"Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
- T. Pratchett -
@@markusb:
nuqneH
Ich habe im body als ersten ein div-element geöffnet, in dem sich der gesamte Inhalt der Seite befindet.
Das ist überflüssig.
„Dass viele "Designer" der Meinung sind, <html> und <body> sollten möglichst neutralisiert und das Layout dann mittels <div>-Elementen umgesetzt werden, ist bedauerlich bis ärgerlich.“ [at]
Du kannst das 'body'-Element innerhalb des 'html'-Elements zentrieren.
width:1280px;
Auf welchen Ausgabegeräten soll das passen? Viele Nutzer müssen horizontal scrollen, was alles andere als nutzerfeundlich ist.
Verzichte auf Breitenangaben für die ganze Seite, verwende stattdessen die 'max-width'-Eigenschaft!
Allerdings wird der Rahmen des umschließenden div-Elementes nur als horizontale Linie mit 1280px Breite angezeigt, die links am Rand des Browserfensters an liegt. Der Inhalt wird unterhalb dieser Linie angezeigt, und liegt ebenfalls links an.
Das sieht so aus als wären die Inhalts-Elemente keine Kindelemente des äußeren di-Elementes.Das sieht so aus, als wären absolut positionierte Elemente „aus dem Fluss“ genommen und beeinflussen nicht die Höhe ihres Elternelements. Works as designed.
Verzichte auf absolute Positionierung! Lies SELFHTML: <http://de.selfhtml.org/css/layouts/mehrspaltige.htm@title=Mehrspaltige CSS-basierte Layouts>.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)