Maresa P.: Website horizontal im Browser zentrieren

Hallo,

ich habe eine Website, deren Inhalte alles mittels DIVs und CSS positioniert sind.
Die Website ist momentan links oben am Browserrand ausgerichtet.

Ich möchte die Website nun horizontal im Browserfenster zentrieren. Dies stellt normal ja keine Probleme da... ich müsste einfach ein DIV "aussenrum" und setze die Eigenschaft "align=center".

Das Problem ist aber, dass einige Elemente auf der Website absolut positioniert werden. D.h. von links oben ausgehend.

Frage: wie löse ich das am Besten, ohne alle absoluten Positionierungen aufgeben zu müssen?

Viele Grüße
Maresa P.

  1. Hi,

    Ich möchte die Website nun horizontal im Browserfenster zentrieren. Dies stellt normal ja keine Probleme da... ich müsste einfach ein DIV "aussenrum" und setze die Eigenschaft "align=center".

    nein. Das <div> muss einen linken und rechten margin-Wert von "auto" besitzen.

    Das Problem ist aber, dass einige Elemente auf der Website absolut positioniert werden. D.h. von links oben ausgehend.

    Wie herum meinst Du dieses Problem: Sollen die Elemente am Viewport oder am <div> ausgerichtet werden?

    Frage: wie löse ich das am Besten, ohne alle absoluten Positionierungen aufgeben zu müssen?

    Durch die Wahl eines günstigen position-Wertes jenen <div>s.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hi,

      Hallo Cheatah!
      vielen Dank für Deine schnelle Antwort.

      [...]ich müsste einfach ein DIV "aussenrum" und setze die Eigenschaft "align=center".

      nein. Das <div> muss einen linken und rechten margin-Wert von "auto" besitzen.

      ich habe dies ausprobier:

      <div style="margin-left : auto; margin-right : auto; width : 100%;">
      inhalt
      </div>

      funktioniert aber nicht. Die Seite ist immernoch links positioniert.

      » »» Das Problem ist aber, dass einige Elemente auf der Website absolut positioniert werden. D.h. von links oben ausgehend.

      Wie herum meinst Du dieses Problem: Sollen die Elemente am Viewport oder am <div> ausgerichtet werden?

      Was ist der Viewport?

      Aktuell werden einige Elemente absolut positioniert.
      Bspl.:
      <div style="position:absolute; top: 67px; left:16px;">Inhalt</div>

      Andere werden jedoch relativ positioniert:
      Bspl.:
      <div style="position:relative; float:left; top:64px; width:136px; height:34px;">Inhalt</div>

      Wenn ich nun das Ganze horizontal mittig ausrichte, stimmt die Posistionierung der absoluten Elemente nicht. Die sind dann zu weit links.

      Frage: wie löse ich das am Besten, ohne alle absoluten Positionierungen aufgeben zu müssen?

      Durch die Wahl eines günstigen position-Wertes jenen <div>s.

      Und der ist?

      Cheatah

      Vielen Dank für Deine Hilfe!
      Maresa

      1. Hi,

        <div style="margin-left : auto; margin-right : auto; width : 100%;">
        inhalt
        </div>

        funktioniert aber nicht. Die Seite ist immernoch links positioniert.

        dann hast Du das mit dem falschen Browser (und evtl. dem falschen Doctype) getestet. Die Selfhtml-Suche oder http://www.1ngo.de/web/zentrierung.html dürfte Dir weiterhelfen - erstere auch bei der Frage:

        Was ist der Viewport?

        Ein guter Suchbegriff dürfte inzwischen "Gebetsmühle" sein ;-)

        Aktuell werden einige Elemente absolut positioniert.
        Bspl.:
        <div style="position:absolute; top: 67px; left:16px;">Inhalt</div>

        Bist Du überhaupt sicher, daß dies nötig ist? Könnte nicht auch margin ausreichen?

        freundliche Grüße
        Ingo

      2. Hi,

        <div style="margin-left : auto; margin-right : auto; width : 100%;">

        naja, ein Element zu zentrieren, welches die gesamte Breite beansprucht, dürfte auch nichts ändern.

        Was ist der Viewport?

        "Das Browserfenster." Du solltest nach diesem Begriff auch im </archiv/> suchen, führt er doch zu einigen äußerst wichtigen Erkenntnissen, die u.a. auch Dein Problem betreffen.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
    2. Hi,

      Ich möchte die Website nun horizontal im Browserfenster zentrieren. Dies stellt normal ja keine Probleme da... ich müsste einfach ein DIV "aussenrum" und setze die Eigenschaft "align=center".

      nein. Das <div> muss einen linken und rechten margin-Wert von "auto" besitzen.

      wieso denn? "align=center" läßt eindeutig auf das HTML-Attribut schließen und das zentriert in dem div "außenrum" Inline- sowie Block-Elemente - was aber nicht gefragt wurde.

      freundliche Grüße
      Ingo

      1. Hi,

        wieso denn? "align=center" läßt eindeutig auf das HTML-Attribut schließen

        damit hast Du Deine Frage ja schon selbst beantwortet.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes