Onkel Schnitzel: Seite mit position:fixed zentrieren

Hallo,

ich möchte meinen Seiteninhalt zentrieren. An sich ist ja klar wie das funktioniert. Das Problem ist jetzt, dass das darin befindliche Menü ein position: fixed; hat. Das heißt, die komplette Seite verschiebt sich in die Mitte, nur das Menü bleibt dank top:0 und left:0 wie angenagelt links oben stehen. Ich war eigentlich davon ausgegangen, dass sich fixierte Elemente genauso wie absolut positionierte am übergeordneten absoluten Element ausrichten. Machen se aber, wie ich jetzt lesen musste, nicht. Gibt es denn für dieses Problem eine Lösung?

Unten mal der Quelltext, falls es jemand ausprobieren möchte.

Gruß vom Schnitzel

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>

<div style="position: absolute; width: 600px; left: 50%; margin-left: -300px;">

<!--fixed_leiste_oben-->
      <div style="position: fixed; top: 0; left: 0; width: 600px; height: 30px; background-color: #0070C0;"></div>

<!--scrollender Inhalt-->
      <div style="width:600px; height: 1000px; margin-top: 40px; background-color: #CFCFCF;">Inhalt</div>

</div>

</body>
</html>

  1. Ich war eigentlich davon ausgegangen, dass sich fixierte Elemente genauso wie absolut positionierte am übergeordneten absoluten Element ausrichten. Machen se aber, wie ich jetzt lesen musste, nicht. Gibt es denn für dieses Problem eine Lösung?

    Zitat Selfhtml
    fixed = absolute Positionierung, gemessen am "Viewport", d.h. am Browserfenster. Bleibt beim Scrollen stehen.
    http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

    Der Viewport, nicht was du daraus machst, ist entscheidend.

    mfg Beat

    1. Der Viewport, nicht was du daraus machst, ist entscheidend.

      Jaja, darum fragte ich ja, ob es für dieses Problem eventuell eine Lösung gibt. Oder ist es einfach nicht möglich, die Seite im Browser zu zentrieren, sobald Elemente fixiert werden? (Weil diese ja dann "hängen" bleiben)

      Gruß,
      Onkel Schnitzel

      1. Yerf!

        Jaja, darum fragte ich ja, ob es für dieses Problem eventuell eine Lösung gibt. Oder ist es einfach nicht möglich, die Seite im Browser zu zentrieren, sobald Elemente fixiert werden? (Weil diese ja dann "hängen" bleiben)

        Die Frage ist, was du eigentlich erreichen willst? Fixierung innerhalb eines zentrierten Containers mit eigener Scrollbar? Dann könntest du dir mal die IE6 Workarounds für position:fixed anschauen, diese arbeiten mit position:absolute und sollten sich auch innerhalb eines Containers anwenden lassen.

        Gruß,

        Harlequin

        --
        <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
        1. Die Frage ist, was du eigentlich erreichen willst? Fixierung innerhalb eines zentrierten Containers mit eigener Scrollbar? Dann könntest du dir mal die IE6 Workarounds für position:fixed anschauen, diese arbeiten mit position:absolute und sollten sich auch innerhalb eines Containers anwenden lassen.

          Eine Fixierung innerhalb des zentrierten Containers, genau. Mit eigener Scrollbar eigentlich nicht. Es wundert mich, dass danach nicht schon öfter gefragt wurde. Aber ich werd mir diese Workarounds mal ansehen.

          Gruß,
          Onkel Schnitzel

  2. Hallo.

    Das heißt, die komplette Seite verschiebt sich in die Mitte, nur das Menü bleibt dank top:0 und left:0 wie angenagelt links oben stehen.

    Das könnte daran liegen, dass 0 nicht 50% entspricht.
    MfG, at