Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.

Aktuelle Infos finden Sie hier:

Inhaltsbereich

7.4 Webseite zentrieren mit width und margin

In diesem Schritt definieren Sie mit der Eigenschaft width zunächst eine feste Breite für den Bereich #wrapper und zentrieren diesen dann im Browserfenster.

Die Breite eines Elements: width

Das folgende ToDo begrenzt die Breite des Wrappers auf 720px.

ToDo: Eine feste Breite für #wrapper definieren
  1. Ergänzen Sie das Stylesheet um die fett gedruckte Zeile:

    div#wrapper {
      color: black;
      background-color: white;
      width: 720px; /* Breite des Inhaltsbereichs */
    }

  2. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im Browser.

Die Breite von 720 Pixel ist so gewählt, dass die Seite auch bei einer Bildschirmauflösung von 800 x 600 Pixel noch akzeptabel aussieht. Da auf den Beispielseiten nicht so viel Inhalt ist, reicht das völlig aus.

Falls Ihnen die Seiten mit 720px zu schmal sind: 760px, oder für mehrspaltige Layouts auch 960px, sind im wahrsten Sinne des Wortes weit verbreitet.

Mit einer festen Breite nehmen Sie der Webseite zwar ein Stück ihrer natürlichen Flexibilität, weil die Seite sich dem Browserfenster nicht mehr anpasst, aber feste Layouts mit Pixelangaben sind zum Lernen gut geeignet.

Flexible Breiten

Wenn Sie Lust auf Experimente haben, ersetzen Sie 720px einfach durch eine Prozentangabe wie 70%. In dem Fall hat #wrapper immer eine Breite von 70% des umgebenden Elements, und das ist body.

Die Seite zentrieren mit margin: auto

Da es leider keinen Befehl wie »Zentriere das Element auf der Seite« gibt, benutzen Sie einen kleinen Trick: Wenn die Außenabstände (margin) für links und rechts auf automatisch gesetzt werden, sind sie immer gleich groß und das Element erscheint zentriert.

Gleichzeitig geben Sie div#wrapper einen oberen und unteren Außenrand von 10 Pixel, damit der Bereich nicht ganz oben am Rand des Browserfensters klebt.

ToDo: #wrapper auf der Webseite zentrieren
  1. Ergänzen Sie den Style für div#wrapper durch die fett gedruckten Zeilen:

    div#wrapper {
      color: black;
      background-color: white;
      width: 720px;
      margin-top: 10px;
      margin-right: auto; /* Abstand rechts */
      margin-bottom: 10px;
      margin-left: auto; /* Abstand links */
    }

  2. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im Browser.

Nach diesem Schritt sieht die Startseite in etwa folgendermaßen aus.

Abbildung 7.5: Zentriert und oben ein margin von 10px
Abbildung 7.5: Zentriert und oben ein margin von 10px

margin liegt wie gesagt außerhalb der Box und übernimmt die Farbe des umgebenden Elements, sodass in diesem Fall rechts und links von div#wrapper die Hintergrundfarbe von body sichtbar wird.