smart: Fixierte Container in zentriertem Layout?

Hallo zusammen

Meine Frage richtet sich an die CSS-Profis in diesem Forum.

Mein Layout sieht so aus dass ein 770px breiter DIV-Container (id=page) zentriert auf der Seite dargestellt wird (margin: 0 auto)

In page sind drei weitere Container (top, content & bottom) So weit so gut.

Ich würde nun aber gern top & bottom dementsprechend fix positionieren (sprich das die nicht mitscrollen) also top im Fenster ganz oben und bottom ganz unten.

Wenn ich page, top & bottom als position:relative positioniere funktionierts insofern das alle Container dort sind wo ich sie haben will nur dass sie eben mitscrollen. Sobald ich top/bottom als fixed deklariere funktionierts nicht mehr.

Was mache ich falsch bzw wie macht mans richtig?

Bitte um Hilfe. Danke.

Mfg smart

  1. Mein Layout sieht so aus dass ein 770px breiter DIV-Container (id=page) zentriert auf der Seite dargestellt wird (margin: 0 auto)

    smart,
    Nein, mein Fenster ist aber schmaler als 770px, da ist die Box nicht zentriert, sondern ragt raus.

    So weit so gut.

    Nein, das ist nicht gut. Ich scrolle sehr ungern horizontal. Andere auch nicht.

    Sobald ich top/bottom als fixed deklariere funktionierts nicht mehr.

    Aha.

    Was mache ich falsch

    Keine Fehlerbeschreibung, kein Link, kein Quelltext.

    bzw wie macht mans richtig?

    Fehlerbeschreibung, Link, Quelltext.

    Live long and prosper,
    Gunnar

    --
    „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
    1. Hallo Gunnar

      mein Fenster ist aber schmaler als 770px, da ist die Box nicht zentriert, sondern ragt raus.
      Nein, das ist nicht gut. Ich scrolle sehr ungern horizontal. Andere

      auch nicht.

      aufgrund der zukünfitgen Zielgruppe der Homepage kann ich davon ausgehen das es bei denen passt aber dies ist eine andere Sache über die ich jetzt nicht diskutieren möchte.

      Fehlerbeschreibung, Link, Quelltext.

      Also ich bin nicht auf der Suche nach einer Fehlerbehebung sondern nach einem Tipp wie man fixierte Bereiche innerhalb eines zentrierten Layouts erreichen kann.

      Link zur Beispieldatei hab ich angegeben.

      Zum Quelltext: da es sich um die Probedatei handelt ist der HTML & CSS Code noch nicht auf 2 Dateien getrennt, was natürlich sobald eine lösung gefunden wurde geschieht.

      Mfg Martin

      1. Hallo Martin,

        Also ich bin nicht auf der Suche nach einer Fehlerbehebung sondern nach einem Tipp wie man fixierte Bereiche innerhalb eines zentrierten Layouts erreichen kann.

        position:fixed; funktioniert zumindest beim modernen Browser.
        "innerhalb eines zentrierten Layouts" müßtest du erläutern,
        bezieht sich das auf einen gewünschten erkennbaren Effekt, eine
        Verschachtelung, oder kann das betr. Element einfach fix am Browserand
        kleben?

        Zum Quelltext: da es sich um die Probedatei handelt ist der HTML & CSS Code noch nicht auf 2 Dateien getrennt, was natürlich sobald eine lösung gefunden wurde geschieht.

        Da solltest du vorher schon im Head einen eigenen Stylebereich verwenden.

        Warum darf eigentlich die von die gewünschte Lösung nicht unter dem Stichwort
        "Fehlerbehebung" laufen?

        Grüsse

        Cyx23

        1. Hallo Cyx23

          position:fixed; funktioniert zumindest beim modernen Browser.
          "innerhalb eines zentrierten Layouts" müßtest du erläutern,
          bezieht sich das auf einen gewünschten erkennbaren Effekt, eine
          Verschachtelung, oder kann das betr. Element einfach fix am Browserand
          kleben?

          Mit zentriertem Layout meine ich einen DIV Container welcher mit margin:0 auto "gestylt" - also auf der Seite zentriert dargestellt wird.
          Und da sitzt auch das Problem diese Zentrierung passiert automatisch und wenn ich bei einen weiteren Container bei position:fixed einen bestimmten Wert eingebe orientiert sich dieser zusätzliche Container am Fenster und nicht am automatisch zentrierten DIV container.

          In meinem Fall (www.most.at/csstest/test.php) soll oben das Bild und unten der braune balken fix stehen bleiben IM zentrierten DIV.

          Warum darf eigentlich die von die gewünschte Lösung nicht unter dem Stichwort "Fehlerbehebung" laufen?

          Bitte um Entschuldigung wenn ich damit falsch verstanden wurde. In meinen Augen handelt es sich eben nicht direkt um einen "Fehler" sondern um einen Wunsch etwas anders darzustellen als ich es derzeit im Stande bin.

          Hoffe damit jetzt für klarheit gesorgt zu haben!?

          Mfg smart

          1. Hallo smart,

            Mit zentriertem Layout meine ich einen DIV Container welcher mit margin:0 auto "gestylt" - also auf der Seite zentriert dargestellt wird.
            Und da sitzt auch das Problem diese Zentrierung passiert automatisch und wenn ich bei einen weiteren Container bei position:fixed einen bestimmten Wert eingebe orientiert sich dieser zusätzliche Container am Fenster und nicht am automatisch zentrierten DIV container.

            In meinem Fall (www.most.at/csstest/test.php) soll oben das Bild und unten der braune balken fix stehen bleiben IM zentrierten DIV.

            vielleicht kannst du wenn nicht dem Container selbst, dann doch dem jeweiligen Inhalt ähnliche
            bzw. passende Eigenschaften zuweisen?

            fixed bezieht sich wohl erstmal aufs Browserfenster, was ja auch passend ist weil das Fenster
            scrollt (und nicht ein Div).

            Grüsse

            Cyx23