Frank Reubold: Website zentrieren

Hallo,

bisher suche ich leider erfolglos nach einer Möglichkeit, wie ich die Website www.erbacher-fruehlingsmarkt.de unabhängig von der Bildschirmauflösung zentrieren kann, der farbige Teil also genau in der Mitte steht und vom grauen Hintergrund umgeben wird. Weil ich auf eigene Faust leider nicht weiter komme und meine Kenntnisse noch nicht sonderlich gut sind, hoffe ich auf eure Hilfe.

Vorab schon mal herzlichen Dank und viele Grüße

Frank

  1. Hallo,

    unabhängig von der Bildschirmauflösung zentrieren kann,

    die Bildschirmauflösung ist irrelevant. Du beziehst dich auf die Größe der Arbeitsfläche des Browsers. Eine horizontale Zentrierung erreichst du dabei etwa über ein Konstrukt wie
    <div style="position:absolute; top:xx left:50%; margin-left:-Breite/2">
                                               ^^^              ^^^^^^^^^
    Die 50% bestimmen die Seitenmitte, der negative Margin-Wert muss die Hälfte deiner Seitenbreite betragen und sorgt für die Zentrierung. Problem dabei: Deine Seite muss eine feste Breitenangabe wie z.B. 600px haben, sonst lässt sie sich die Methode oben nicht anwenden.

    Eine vertikale Zentrierung erreichst du nur dann, wenn du die genaue Höhe deiner Seite kennst. Das wiederum ist nur selten möglich, da sich HTML kaum pixelgenau definieren lässt.

    Gruß,
    _Dirk

    1. Hallo _Dirk,

      <div style="position:absolute; top:xx left:50%; margin-left:-Breite/2">

      Ich habe das ja auch erst vor Kurzem hier im Forum kennengelernt, aber geht es nicht einfach mit margin:auto ?

      Gruß Gernot

      1. Hallo_Dirk, hallo  Gernot,

        habt ihr euch die Seite überhaupt angesehen?

        <div style="position:absolute; top:xx left:50%; margin-left:-Breite/2">

        Ich habe das ja auch erst vor Kurzem hier im Forum kennengelernt, aber geht es nicht einfach mit margin:auto ?

        Horizontal zentriert ist der Seiteninhalt bereits, dem Fragesteller geht
        wohl eher um die vertikale Zentrierung.

        in der Mitte steht und vom grauen Hintergrund umgeben wird.

        ^^^^^^^

        Auf Wiederlesen
        Detlef

        --
        - Wissen ist gut
        - Können ist besser
        - aber das Beste und Interessanteste ist der Weg dahin!
        1. Hallo,
          kann mir leider die Webseite nicht anschauen, da der Link nicht funxt.
          Daher weiss nicht, wie Du arbeitest. MIt Tabellen-Layout oder DIVS.
          Mit CSS formatierst Du das DIV, das allen weiteren Web-Inhalt enthält so:
          #container {
          margin-right:50px;
          margin-left:50px;
          }
          Damit hält das DIV immer diese Abstände zum body-Rand ein und ist  zentriert.
          Ich arbeite nicht mehr mit Tabellen, aber eigentlich müssten Tabellen ebenso formatiert werden können. Gruß ADERLAUGE.

      2. Hallo,

        Ich habe das ja auch erst vor Kurzem hier im Forum kennengelernt, aber geht es nicht einfach mit margin:auto ?

        geht irgendwie auch, aber funktioniert das browserübergreifend? Ich weiß es nicht.

        Detlef: Nein, ich hatte mir die Seite vorher nicht angeschaut. War nur eine spontane Antwort auf dem Weg ins Bett gestern abend ;-)

        Gruß,
        _Dirk

      3. hi!

        Ich habe das ja auch erst vor Kurzem hier im Forum kennengelernt, aber geht es nicht einfach mit margin:auto ?

        normalerweise schon - also bei mozilla und opera auch wunderbar, aber leider macht da der ie seit kurzem nicht mehr mit... (suche irgendeine lösung für meine div-ebene... zu zetrieren bei dem ie *schäm*)

        lg
        azok

        --
        http://www.cssweb.at.tt wird teil meiner! webseite.
        ------------------
        Murphys Law: "Alles Schöne im Leben ist entweder illegal, ungesetzlich oder es macht dick."
        Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:( n4:° ss:| de:] js:| ch:( sh:) mo:) zu:)
        1. Hallo Azok,

          Ich habe das ja auch erst vor Kurzem hier im Forum kennengelernt, aber geht es nicht einfach mit margin:auto ?

          normalerweise schon - also bei mozilla und opera auch wunderbar, aber leider macht da der ie seit kurzem nicht mehr mit... (suche irgendeine lösung für meine div-ebene... zu zetrieren bei dem ie *schäm*)

          das ist mir noch gar nicht aufgefallen, dass es mit dem IE da Probleme gibt, denn mit dem teste ich ja immer zuerst, das ist in meinem Phase5 Editor auch so eingestellt.

          Aber gerade beim IE hast du ja auch noch eine Alternative, Ebenen zu zentrieren, und das geht dann sogar auch in vertikaler Ausrichtung:

          Expressions:

          http://msdn.microsoft.com/workshop/author/dhtml/overview/recalc.asp?frame=true#Implement

          Gruß Gernot

        2. Hallo azok

          suche irgendeine lösung für meine div-ebene... zu zetrieren bei dem ie *schäm*)

          http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/index.htm

          Auf Wiederlesen
          Detlef

          --
          - Wissen ist gut
          - Können ist besser
          - aber das Beste und Interessanteste ist der Weg dahin!
  2. Hallo Frank

    bisher suche ich leider erfolglos nach einer Möglichkeit, wie ich die Website www.erbacher-fruehlingsmarkt.de unabhängig von der Bildschirmauflösung zentrieren kann, der farbige Teil also genau in der Mitte steht und vom grauen Hintergrund umgeben wird. Weil ich auf eigene Faust leider nicht weiter komme und meine Kenntnisse noch nicht sonderlich gut sind, hoffe ich auf eure Hilfe.

    Eine Möglichkeit besteht darin den gesamten Seiteninhalt in eine
    umschließende Tabelle zu packen, die nur eine Zeile und Spalte enthält.
    TD erhält dabei align="center" und valign="middle", die Tabelle mittels
    CSS 100% Breite und Höhe.
    Dann muss für body _und_ html auch noch height:100%, margin:0 und padding:0
    angegeben werden.

    Das sollte dann funktionieren.

    PS: Ist nicht gut, aber bei diesem Schachteltabellenlayout kommt es imho nicht mehr darauf an.

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!