Zentrierungsprobleme

Hi!
Meinc ode schaut so aus:
CSS:
#info {
position:fixed;
background: #FFFFFF;
height:100%;
width:100%;
z-index:1;
visibility:hidden;
}

#information {
margin:auto;
font-size:20pt;
}

HTML:

bla
Schließen


wie ihr erkennt, will ich den div „information“ zentrieren (sowohl vertikal als auch horizontal)… allerdings geht das gründluich in die hose und der container hängt imemr noch links oben in der ecke :smiley:

Könnt ihr mir erklären, wieso?

Danke schonmal,
Thomas

Hi

#info {
position:fixed;
background: #FFFFFF;
height:100%;
width:100%;
z-index:1;
visibility:hidden;
}

#information {
margin:auto;
font-size:20pt;
}


wie ihr erkennt, will ich den div „information“ zentrieren

also ich kann das um ehrlich zu sein nicht erkennen.
Das einzige das ich sehe ist, daß dein container 100% breit und hoch sein soll. Mehr nicht

allerdings geht das gründluich in die hose
))
und der container hängt imemr noch links oben in der ecke :smiley:

Könnt ihr mir erklären, wieso?

nun wenn ein container zentriert werden soll, ist das nur dann interessant, wenn er NICHT 100% breite hat. Ansonsten - ist es ja keine Zentrierung sondern vielmehr ein Ausfülles des bestehenden Browserfensters - und dafür benötigt man im Allgemeinen kein Div.
Also selbst wenn du das Div zentriert hättest würde man es nicht erkennen können.

Position fixed heisst NUR das diese Postion IMMER beibehalten wird. Also ganz egal wie der Inhalt aussieht - viel Text, lang, breit etc. das Div ist IMMER an der von dir festgelegten Position. Dein Css sagt aber überhaupt nicht aus wo sich das div befinden soll - keine top, left angaben.

Und GANZ WICHTIG!!! in die horizontale Mitte kriegt man ein Div gleich mal - aber in die vertikale eher nicht. DENN es gibt KEINE UNTERE GRENZE des Browserfensters.

Aber guck mal hier http://www.acamay.org/divCenter.html
lg
aya

Erklärung zum Beispiel vom obigem Link

CSS-Layouts fix zu zentrieren birgt einige Schwierigkeiten, denn absolute Positionierungen haben den Nachteil nicht auf das Browserfenster einzugehen.
Floated man die Container kann es zu überlappungen kommen etc. Aber mittels des einen oder anderen Tricks kommt man auch zu fix zentrierten Layouts und hier ein Beispiel:

Ein container-div mit

* fixer Breite
* fixer Höhe und
* absoluter Positionierung

Jetzt wird mit der Hälfte der Höhe des Divs als obere Margin gesetzt und zwar ein Negativer-Margin und selbiges wird mit dem linken Rand und der Breite des Divs gemacht und fertig!

das der obercontainer fixed ist ist schon sinn der sache… ich weill ebenen eine infomation einblenden, die den gesamten bildschirm überdeckt… deshalb auch width und height 100%… ich versuch jetzt mal, was du so geschrieben hast…

danke schonmal
thomas

left:50%;
right:50%;
width:500px oder was auch immer;
margin-left:-250px oder einfach die hälfte von width;

jetzt ist das ganze in derhorizontalen mitte…

top:50%;
bottom:50%;
height:500px oder das was du willst;
margin-top:-250px hälfte von height;

jetzt sollte es in der mitte sein.