Absolut positioniertes DIV zentrieren?

[city]

Hallo,

ich möchte einen absolut positionierten DIV-Container unabhängig der Fenstergrösse zentrieren. Für left und right ist der Wert "auto" in diesem Fall wohl nicht korrekt. Gibt es da eine andere Möglichkeit?

Danke und Gruss

city

[Gunnar Bittersmann]

@@city:

nuqneH

ich möchte einen absolut positionierten DIV-Container unabhängig der Fenstergrösse zentrieren. Für left und right ist der Wert "auto" in diesem Fall wohl nicht korrekt. Gibt es da eine andere Möglichkeit?

RTFFAQ.

Qapla'

[city]

Deine Antwort hilft mir leider nicht weiter, da ich mich dort schon vorher umsah ...

Das Problem ist, dass ich in einem statischem DIV keine absoluten DIVs positonieren kann, diese benötige ich jedoch.

Um das Eltern-DIV zu zentrieren habe ich nur ein Workaround gefunden (margin-left 50%, margin-right:-10em ...). Ist allerdings zu ungenau.

Hast Du jetzt vielleicht einen Tipp?

Hier ein Link zur betreffenden Seite

Danke und Gruss

city

[ChrisB]

Hi,

Das Problem ist, dass ich in einem statischem DIV keine absoluten DIVs positonieren kann, diese benötige ich jedoch.

Dann nimmst du relative statt static.

Woran sich absolute Positionierung orientiert, kannst du auch in SELFHTML nachlesen:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

MfG ChrisB

[city]

Hallo Chris,

danke für den Tipp, bei relativer Postionierung funktioniert auch Margin auto.

Allerdings ist mir nun etwas anderes aufgefallen:

Bei Firefox funktionieren die Links nicht mehr, wobei es bei IE seltsamerweise klappt. Es hat vermutlich etwas mit den Schichten der absoluten DIVs zu tun.

Eine Idee?

Danke und Gruss

city

[ChrisB]

Hi,

Bei Firefox funktionieren die Links nicht mehr, wobei es bei IE seltsamerweise klappt. Es hat vermutlich etwas mit den Schichten der absoluten DIVs zu tun.

Eine Idee?

Firebug benutzen und nachschauen.

MfG ChrisB

[Daniel.S]

Um das Eltern-DIV zu zentrieren habe ich nur ein Workaround gefunden (margin-left 50%, margin-right:-10em ...). Ist allerdings zu ungenau.

Warum zentrierst du das Element (#box_body_abs nehme ich an) nicht einfach mit margin: 0 auto; - ohne jede Positionierung?

Gruß, Daniel

[Encoder]

Wie soll sich ein absolut positioniertes Element selbstständig zentrieren können?

[Daniel.S]

Grüße dich, Encoder,

Wie soll sich ein absolut positioniertes Element selbstständig zentrieren können?

Wie die meisten Blockelemente: mit margin: 0 auto;

Gruß, Daniel

[Rawir]

Hallo,

ich möchte einen absolut positionierten DIV-Container unabhängig der Fenstergrösse zentrieren. Für left und right ist der Wert "auto" in diesem Fall wohl nicht korrekt. Gibt es da eine andere Möglichkeit?

Danke und Gruss

city

Hallo City
Ich hatte das gleiche Problem. Ich hab's so gelöst:

----------------------
css:
#Body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
}
#Back
{
width: 1000px;
height: 600px;
border: 1px solid black;
margin: -300 -500;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
}

HTML:
<div id="Back">
/.. Jede Menge Inhalt ../
</div>
--------------------------

So habe ich einen fest vordefinierten 1000x600er Container sowohl senkrecht, als auch waagerecht immer zentriert, egal, wie groß die Bildschirmauflösung ist. Allerdings ist die MINIMAL-Größe 1024x768 Pixel.

Das Problem, das ich damals hatte, war, dass ich - wie jetzt auch du - das margin: nicht mit 0 0 oder gar mit 50% benutzen durfte (das kommt an anderer Stelle), wie oftmals angegeben, sondern mit genau den halben Werten dessen angeben musste, wie der Container groß ist. Ist dein Container als 650x500 groß, dann musst du folglich

margin: -250 -325;

eingeben. Die erste Koordinate ist immer die Höhe, nicht die Breite des Bildschirms.

Gruß  Rawir

[Gunnar Bittersmann]

@@Rawir:

nuqneH

#Body

Es sollte kein Element mit einer ID "Body" geben.

margin: -250 -325;

Weder -250 noch -325 sind gültige Werte. CSS2

Die erste Koordinate ist immer die Höhe, nicht die Breite des Bildschirms.

Das sind keine Koordinaten, sondern Abstände oben/unten und rechts/links.

Und ganz allgemein ist die Lösung schlecht, weil nicht gewährleistet ist, dass der Inhalt (komplett) im Viewport angezeigt wird.

Qapla'