Tutorial: Erstellen eines Css (Cascading Style Sheets) Layouts mit umlaufendem Schatten.
Anhand eines Beispiels möchte ich zeigen wie einfach es ist, mit Css, drei kleinen Grafiken (die mit jedem Grafik-Programm erstellt werden können) und drei DIV-Boxen mit der ID #top, #container und #bottom,
ein ansprechendes Layout mit umlaufendem Schatten (rechts, links, oben und unten) zu erstellen.
Ergänzend zu diesem Tutorial, kann auf der Seite ps-schatten.html nachgelesen werden wie die einzelnen Grafiken zu erstellen sind.
Layout anschauen
Die Schatten können auch problemlos in ein bestehendes Css-Layout integriert werden, da die einzelnen Css-Boxen um das bestehende Layout gebaut werden.
Einzig die Breite des Css-Layouts muß angepasst werden.
Die Breite des äußeren Containers beträgt 982 px, welches auch die Breite der drei Grafiken ist.
Grafik "top" 982x20px anschauen
Grafik "bottom" 982x20px anschauen
Grafik "container" 982x1px anschauen
Für den "body" wird als Hintergrundfarbe die Farbe der Grafiken gewählt - in diesem Beispiel orange.
Für dieses Beispiel habe ich ein ganz einfaches Grundlayout (header, rechte und linke Spalte, content und footer) benutzt und mit den Schatten modifiziert.
Das Tutorial bezieht sich nur auf die Erstellung der Schatten für ein Css-Layout. Wer nicht weiß wie man ein Css-Grundlyout erstellt, kann einen Blick auf die Seite Css-Layout werfen.
Das Css für das Schatten-Layout.
#container {
background:url(../img_layout/bg-container.gif) repeat-y center;
margin:0pt auto;
text-align:left;
width:982px;
}
repeat-y center bewirkt, daß die Grafik von oben nach unten gekachelt wird.
#top {
background:url(../img_layout/bg-top.gif) no-repeat center;
height:20px;
width:982px;
}
Diese Grafik wird nicht gekachelt.
#bottom {
background:url(../img_layout/bg-bottom.gif) no-repeat 0 50%;
clear:both;
height:25px;
width:982px;
}
Die Grafik wird nicht gekachelt. Die Prozentwerte definieren die horizontale und vertikale Lage des Hintergrunds.
Mit der Eigenschaft "clear: both" wird dem floaten ein Ende gesetzt und der DIV-Container nach unten ausgerichtet.
Das HTML für das Schatten-Layout
<body>
<div id="container"> (Beginn container mit gekachelter Grafik)
<div id="top"></div> (obere Grafik hier keinen weiteren Inhalt einfügen)
<div id="header"></div> (beinhaltet Banner, Logo usw.)
<div id="container_innen">
Der innere Container beinhaltet: Die linke und rechte Spalte.
Den Behälter für den Content und einen Footer.
</div>
<div id="bottom"></div> (untere Grafik hier keinen weiteren Inhalt einfügen)
</div>(ende container)
</body>
</html>
