1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Div-Container bei "position:absolute" im Browser zentrieren

Dieses Thema im Forum "CSS" wurde erstellt von Gifty43, 5. Juni 2007.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Gifty43

    Gifty43 Erfahrenes Mitglied

    Hallo Zusammen,

    Kurze Frage: Wie kann ich zwei Div-Container, welche die Einstellung "position:absolute" besitzen (sie überlappen sich) im Browser zentrieren?

    Ich verwende diesen HTML-Code...
    HTML:
    1.  
    2. <div id="index">Hier ist die ganze Page integriert</div>
    3. <div id="outdated">Hier ist das Fenster, welches über der HP erscheint</div>
    4.  
    ...und dieses CSS:
    Code (Text):
    1. div#index{
    2.  position: absolute;
    3.  width: 1000px;
    4. }
    5. div#outdated{
    6.  position: absolute;
    7.  width: 1000px;
    8.  padding-top: 66px;
    9. }
    Ich habe es schon mit der Einstellung "margin: 0 auto;" oder "align: center;" versucht, aber es tut sich nix. Die Seite bleibt immer auf der linken Seite kleben.

    Deshalb habe ich mir gedacht, wieso nicht einen <div> über die beiden anderen <div>'s erstellen und diesem im CSS "align: center;" zuweisen. Denkste...

    Langsam bin ich echt am verzweifeln, hat jemand von euch eine Idee?

    Besten Dank und einen schönen Abend.
  2. Maik

    Maik Gast

    Hi,

    mit diesen Regelerweiterungen lassen sich die DIVs im Fenster horizontal zentrieren:

    Code (Text):
    1.  
    2. div#index{
    3.  position: absolute;
    4.  width: 1000px;
    5.  [b]left: 50%;[/b]
    6.  [b]margin-left: -500px;[/b] /* negative Hälfte von width:1000px */
    7. }
    8. div#outdated{
    9.  position: absolute;
    10.  width: 1000px;
    11.  padding-top: 66px;
    12.  [b]left: 50%;[/b]
    13.  [b]margin-left: -500px;[/b] /* negative Hälfte von width:1000px */
    14. }
    15.  
  3. Gifty43

    Gifty43 Erfahrenes Mitglied

    Wow, hat geklappt...:)

    Vielen Dank...:D
Status des Themas:
Es sind keine weiteren Antworten möglich.

Diese Seite empfehlen