Verwenden von CSS für das Seitenlayout

CSS-Seitenlayout

Bei einem CSS-Seitenlayout handelt es sich um ein Layout, das den Inhalt einer Webseite mithilfe des CSS-Formats organisiert anstatt mithilfe herkömmlicher HTML-Tabellen oder Frames. Der Grundbaustein des CSS-Layouts ist das div-Tag. Dabei handelt es sich um ein HTML-Tag, das in den meisten Fällen als Container für Text, Bilder oder sonstige Seitenelemente dient. Wenn Sie ein CSS-Layout erstellen, fügen Sie div-Tags in die Seite ein, fügen deren Inhalt ein und positionieren diese div-Bereiche an unterschiedlichen Stellen. Im Gegensatz zu Tabellenzellen, die nur innerhalb der Zeilen und Spalten einer Tabelle vorkommen dürfen, können div-Bereiche überall auf einer Webseite platziert werden. Sie können div-Tags absolut positionieren (durch Angabe von x- und y-Koordinaten) oder relativ positionieren (durch Angabe ihrer Position in Bezug auf den aktuellen Speicherort). div-Tags lassen sich auch durch Angabe von Floats, Auffüllungen und Rändern positionieren. Gemäß der modernen Webstandards ist dies die bevorzugte Methode.

Struktur des CSS-Seitenlayouts

Bevor du mit diesem Abschnitt fortfährst, solltest du mit den grundlegenden CSS-Konzepten vertraut sein.

Der grundlegende Baustein des CSS-Layouts ist das div-Tag – ein HTML-Tag, das in den meisten Fällen als Container für Text, Bilder und andere Seitenelemente fungiert.Das folgende Beispiel zeigt eine HTML-Seite, die drei separate div-Tags enthält: ein großes "Container"-Tag und zwei weitere Tags – ein Sidebar-Tag und ein Hauptinhalt-Tag – innerhalb des Container-Tags.

Nachstehend finden Sie den Code für alle drei div-Tags auf der HTML-Seite:

<!--container div tag-->

<div id="container">

<!--sidebar div tag-->

<div id="sidebar">

<h3>Seitenleisten-Inhalt</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>

</div>

<!--mainContent div tag-->

<div id="mainContent">

<h1> Hauptinhalt </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p>

<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

<h2>Überschrift der Ebene H2 </h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>

</div>

</div>

Im obigen Beispiel ist keines der div-Tags mit „Styling" versehen.Ohne definierte CSS-Regeln fallen jeder div-Tag und seine Inhalte an eine Standardposition auf der Seite.Wenn jedoch jedes div-Tag eine eindeutige ID hat (wie im obigen Beispiel), kannst du die IDs verwenden, um CSS-Regeln zu erstellen, die bei der Anwendung den Stil und die Positionierung der div-Tags ändern.

Die folgende CSS-Regel, die im Kopf des Dokuments oder in einer externen CSS-Datei stehen kann, erstellt Formatierungsregeln für das erste oder „Container"-div-Tag auf der Seite:

#container {

width: 780px;

background: #FFFFFF;

    margin: 0 auto; 

border: 1px solid #000000;

text-align: left;

}

Die #container-Regel formatiert das Container-Div-Tag so, dass es eine Breite von 780 Pixeln, einen weißen Hintergrund, keinen Rand (von der linken Seite der Seite), einen durchgehenden, schwarzen, 1-Pixel-Rahmen und links ausgerichteten Text hat. Die Ergebnisse der Anwendung der Regel auf das Container-Div-Tag sind wie folgt:

Die nächste CSS-Regel erstellt Stilregeln für das div-Tag „sidebar“:

#sidebar {

float: left;

width: 200px;

background: #EBEBEB;

padding: 15px 10px 15px 20px;

}

Die #sidebar-Regel formatiert das sidebar-Div-Tag so, dass es eine Breite von 200 Pixeln, einen grauen Hintergrund, einen oberen und unteren Abstand von 15 Pixeln, einen rechten Abstand von 10 Pixeln und einen linken Abstand von 20 Pixeln hat. (Die Standardreihenfolge für die Auffüllung ist oben, rechts, unten, links.) Zusätzlich positioniert die Regel das sidebar-Div-Tag mit float: left – einer Eigenschaft, die das sidebar-Div-Tag zur linken Seite des Container-Div-Tags schiebt. Die Ergebnisse der Anwendung der Regel auf das sidebar-Div-Tag sind wie folgt:

Abschließend vervollständigt die CSS-Regel für das Haupt-Container-div-Tag das Layout:

#mainContent {

margin: 0 0 0 250px;

padding: 0 20px 20px 20px;

}

Die #mainContent-Regel formatiert das Hauptinhalt-Div mit einem linken Rand von 250 Pixeln, wodurch 250 Pixel Abstand zwischen der linken Seite des Container-Divs und der linken Seite des Hauptinhalt-Divs entstehen.Zusätzlich sorgt die Regel für 20 Pixel Abstand auf der rechten, unteren und linken Seite des Hauptinhalt-Divs.Die Ergebnisse der Anwendung der Regel auf das mainContent-Div sind wie folgt:

Der vollständige Code sieht folgendermaßen aus:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Unbenanntes Dokument</title>

<style type="text/css">

#container {

width: 780px;

background: #FFFFFF;

    margin: 0 auto; 

border: 1px solid #000000;

text-align: left;

} 

#sidebar {

float: left;

width: 200px;

background: #EBEBEB;

padding: 15px 10px 15px 20px;

} 

#mainContent {

margin: 0 0 0 250px;

padding: 0 20px 20px 20px;

} 

</style>

</head>

<body>

<!--container div tag-->

<div id="container">

<!--sidebar div tag-->

<div id="sidebar">

<h3>Seitenleisten-Inhalt</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>

</div>

<!--mainContent div tag-->

<div id="mainContent">

<h1> Hauptinhalt </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p>

<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

<h2>H2-Überschrift </h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>

</div>

</div>

</body>

Seiten mit einem CSS-Layout erstellen

In Dreamweaver können Sie eine neue Seite erstellen, die bereits ein CSS-Layout enthält. Dabei können Sie unter 16 verschiedenen CSS-Layoutvorlagen auswählen. Darüber hinaus können Sie eigene CSS-Layouts erstellen und in den Konfigurationsordner einfügen, damit sie im Dialogfeld „Neues Dokument“ als Layoutoptionen angezeigt werden.

Seiten mit einem CSS-Layout erstellen

Benutzerdefinierte CSS-Layouts zur Liste der Auswahlmöglichkeiten hinzufügen

Ähnliche Themen

• Grundlegendes zu Cascading Stylesheets
• Leere Seiten erstellen
• Standard-Dokumenttyp und Standardkodierung festlegen
• Erstellen eines Links zu einem externen CSS-Stylesheet