Website-Designs für Unternehmen und andere Organisationen enthalten oft klar definierte Marken- und Marketingelemente. Wenn Ihre Website über eine Webseite verfügt, die Sie zentrieren möchten, können Sie dies selbst tun, indem Sie eine Kombination aus HTML- und CSS-Code (Cascading Style Sheet) verwenden. Viele Entwickler verwenden Scroll-Eigenschaften für Webseitenelemente, um Zentriereigenschaften festzulegen. Dies ist jedoch nicht immer zuverlässig. Um ein zentriertes Website-Layout und eine Seite zu definieren, die ohne Bildlaufleisten angezeigt wird, sind einige CSS-Deklarationen erforderlich.

1

Erstellen Sie Ihre HTML-Seite. Wenn Sie bereits mit einer Seite arbeiten, öffnen Sie diese. Erstellen Sie andernfalls eine neue Datei in einem Texteditor und speichern Sie sie mit der Erweiterung ".html". Verwenden Sie die folgende Gliederung:

Beachten Sie, dass die Seite einen Abschnitt für CSS-Code im Kopf und ein Element im Hauptteil enthält. Der Inhalt der Seite sollte innerhalb dieses Elements platziert werden. Wenn Sie mit einer vorhandenen Seite arbeiten, suchen Sie den CSS-Code dafür, der in einer separaten CSS-Datei abgelegt werden kann, auf die von Ihrem Seitenkopf aus verlinkt wird.

2

Identifizieren Sie den Seitencontainer in CSS. Um das enthaltende Element zu gestalten, müssen Sie es zunächst im CSS-Code identifizieren. Fügen Sie im Stilabschnitt in Ihrem Seitenkopf oder in einer separaten Datei, wenn Sie damit arbeiten, den folgenden Selektor und die folgende Gliederung hinzu:

Behälter {

}

Dies identifiziert das Element mit "Container" als ID-Attribut. Die Stildeklarationen für das Element werden zwischen den öffnenden und schließenden Klammern angezeigt. Alternativ können Sie das Element mit einem Klassenattributwert wie folgt identifizieren:

.container {

}

Dies würde das folgende Element identifizieren:

3.

Wenden Sie dem Element eine feste Breite an, um dessen Inhalt zu zentrieren. Um die Elemente auf Ihrer Seite zu zentrieren, muss das enthaltende Element eine feste Breite haben. Fügen Sie eine der folgenden CSS-Klammern für das Element "container" hinzu:

Breite: 800px;

Ändern Sie den Höhenwert entsprechend Ihrem Design. Jetzt können Sie eine Randeigenschaft anwenden, die das Element dazu zwingt, sich auf der Seite zu zentrieren:

Marge: auto;

4

Verhindern Sie einen Bildlauf des Elements. Wenn Sie nicht möchten, dass die Seite einen Bildlauf durchführt, müssen Sie eine Höheneigenschaft wie folgt auf das Containerelement anwenden:

Höhe: 90%;

Ändern Sie den Wert entsprechend Ihrem Design. Wenn die Elemente im Container mehr Platz beanspruchen und Sie das Scrollen verhindern möchten, müssen Sie den Elementüberlauf wie folgt ausblenden:

Überlauf versteckt;

Dadurch wird verhindert, dass die Bildlaufleiste angezeigt wird, auch wenn der Seiteninhalt des Browsers des Benutzers mehr als die zugewiesene Höhe einnimmt.

5

Speichern Sie Ihre Seite und zeigen Sie sie an. Öffnen Sie es in einem Browser oder laden Sie es auf Ihre Website hoch, um das Ergebnis anzuzeigen. Möglicherweise müssen Sie Anpassungen vornehmen, um das gewünschte Design zu erhalten. Stellen Sie sicher, dass Sie die Seite testen, sobald Sie den vollständigen Inhalt enthalten haben, da das Erscheinungsbild erheblich variieren kann.

Spitze

• Verschiedene Webbrowser implementieren CSS-Regeln auf unterschiedliche Weise. Stellen Sie also sicher, dass Sie Ihre Seiten auf mehrere Arten testen.

Warnung

• Wenn Sie den Überlauf eines Webseitenelements ausblenden, können einige Benutzer möglicherweise Ihren gesamten Seiteninhalt nicht sehen.