CSS - Div zentrieren

[EGG]

Hallo Leute

Ich als blutiger HTML / CSS Anfänger hätte da mal 'ne Frage ...

Ich würde gerne ein "div" zentrieren aber weiss nicht wie das geht


Erklärung:

Ich möchte eine Page erstellen die folgendermassen aufgebaut ist ...

Zuoberst: Animation (1. Div, komplett gefüllt mit der Animation)
Eins darunter: der eigentliche Banner (2. Div, auch komplett gefüllt mit einem Bild)
Nochmal eins darunter: die Navigation (3. Div, einzelne Bilder werden verlinkt)
der Rest darunter: der Inhalt (4. Div, naja hier kommt der eigentliche Inhalt rein)

Aber da bekannter Weise nicht jedermann mit der gleichen Auflösung surft möchte ich die Page für alle einigermassen gleich gestalten.

Deshalb dachte ich mir die Div's einfach zu zentrieren. Wenn möglich sogar fixed, da ich nicht möchte, dass die Bilder verzogen werden.
Bei 'ner Auflösung von 1024x768 gibt es dann nun mal links und rechts schwarze Ränder
und bei 'ner Auflösung von 1280x1024 sollen die grösser werden , aber die Div's bei ihrer konstanten Grösse bleiben.

Bloss wie heisst der Befehl um diese auszurichten ?

Ich habe gesucht doch leider nichts passendes gefunden °nicht hauen°


greetz EGG

 

[mh1001]

Hallo,

auch wenn ich persönlich von festen Seitenlayouts nicht viel halte, verweise ich einfach einmal auf diesen Thread: *klick*

MfG mh1001

 

[EGG]

Herzlichen Dank für die schnelle Antwort.

Durch ein wenig studieren und ein wenig mehr probieren, funktioniert es nun !

 

[riDDi]

also ich hab den thread überflogen aber nicht wirklich DIE lösung gefunden
das w3c definiert zentriert ganz einfach: margin-left: auto; margin-right: auto;
das bedeutet, abstand links und rechts gleich groß = zentriert.

 

[EGG]

Ich habe nicht mal den den ersten Post wirklich durchgelesen

Ich habe es folgendermassen eingestellt:

left: 50%;
margin-left: -425px;

und ob man es glaubt oder nicht ... es funktioniert.

Ob es jedoch wirklich "fehlerfrei" ist, weiss und glaube ich nicht.


-- Edit --
Habe es gerade mit ...

margin-left: auto;
margin-right: auto;

... probiert

aber wie siehts denn hier mit der "left:" Angabe aus?

-- Edit --

 

[Muuhmann]

die brauchst du dann doch nicht mehr.. aber vorraussetzung dafür dass margin-left, margin-right auf auto funktioniert ist glaube ich, dass du einen div-container hast, der alle anderen div-container beinhaltet.

ich habs zumindest so gemacht und es funktioniert. habe aber "margin: 0px auto;" verwendet... was aber gleichbedeutend mit

margin-top: 0px;
margin-bottom. 0px;
margin-left: auto;
margin-right: auto;

ist. is halt nur kürzer ^^

 

[EGG]

Naja bei mir sind die verschiedenen Div-Container nicht in einem grossen sondern alle einzeln untereinander ... und wenn ich

position: absolute;
margin-left: auto;
margin-right: auto;

.. habe, dann setzt es mir die Div-Container trotzdem ganz links an den Rand.

Habe da anscheinend was weggelassen oder falsch getippt.


Ich habe es mit dem hier gemacht (siehe Zitat) und so funktioniert es.

wenn dein Container ohnehin eine feste größe hat reicht ein einfaches "position: relative;" bzw. "position: absolute;" in Verbindung mit "left: 50%; top: 50%;" und einen "margin-left" / "margin-top", dessen Wert die negative halbe Containerbreite / -höhe beträgt.

(margin-top: ... <-- wurde weggelassen da ich es nicht brauche)

 

[hurga_gonzales]

Netter Lösungsansatz von mh1001, so kenn ich ihn.

Aber wie sieht es denn mit dem IE aus? Kann der das versehen?

Vor allem mit margin: auto; dürfte der so seine Probleme haben.

Grüße
Hurga

 

[Zweipunktnull]

margin : auto ist eine der WENIGEN Sachen die im IE funktionieren...
Aber wie bringt man dem IE bei, dass bestimmte div's sich überschneiden sollen?
(Sollen im IE7 eigentlich die Probleme mit CSS behoben sein?)

 

[KonKorT]

Sagen wir es mal so: Der IE7 stellt schon bezüglich CSS eine sehr gute Weiterentwicklung gegenüber dem IE6 da... jedoch ist er immer noch nicht so ganz konform und bleibt - zumindest in diesem Bereich - noch hinter dem Firefox zurück

 

[riDDi]

einen nachteil hat die umstellung schon: neben firefox, optimalerweise opera und dem ie6 kommt auf den geneigten css-schreiber jetzt auch noch der ie7 mit bugs und eigenheiten zu.
denn eins ist klar: den ie6 den leute auszutreiben wird ewig dauern, es sei denn es passiert ein wunder (wie z.b. die zwangsweise installation durch auto-update ;P).
bleibt nur zu hoffen, dass es keine nachfolger für den 3px-jog, double-margin, double-text-bug und wie sie alle heißen geben wird.
eine positive sache hats allerdings: ms hat dem ie7 ausgetrieben auf den star-hack anzusprechen womit man weiterhin effektiv ein unterscheidungsmerkmal zwischen den lieben, netten browsern und dem bösen ie6 hat ^^

aber wie siehts denn hier mit der "left:" Angabe aus?

wenn ich die w3c-specs richtig verstanden habe funktioniert das zentrieren nur bei block-elementen, die statisch im elementfluss angezeigt werden, d.h. es darf nicht absolut, fixiert, sehr wohl aber relativ positioniert werden, allerdings nicht floaten.
habs noch nicht so oft probiert aber es klappte glücklicherweise in jedem browser.

...dass du einen div-container hast, der alle anderen div-container beinhaltet.

es verbietet ja niemand, die eigenschaft auf alle anzuwenden allerdings kann so ein umfassender container manchmal von vorteil sein.

ps: hab ich schon erwähnt, dass wir endlich pngs mit alpha-channel auskosten können? ^^ wobei das performance-mäßig eine katastrophe ist und deshalb sowieso kaum anwendung finden wird