Die CSS-Vorlage:
Dieses Template verwendet eine Breite von 800px für den #mainbereich mit einer Zentrierung mittels automatischer Ränder.
#main {
width: 800px;
margin: 2em auto;
border: 3px solid #FFFFFF;
background:#3576CB
url(../images/base.jpg)
0 0 no-repeat;
line-height:1em;
}
Die Grafik setzt sich aus drei Bildern zusammen, die entsprechend der Lage gegeneinander verschoben werden. Die Endgrafik oder das Endbild wird durch das geschickte Arrangieren und Verschieben der drei Ausgangsbilder erstellt. Dieses Konzept kann in Grafikdesign, Bildbearbeitung oder anderen kreativen Prozessen verwendet werden, um ansprechende und einzigartige visuelle Ergebnisse zu erzielen.
#main {
...
background:#3576CB
url(../images/base.jpg)
0 0 no-repeat;
...
}
.titel {
...
background:transparent
url(../images/fade.jpg)
-1.4em -1.25em no-repeat;
...
}
#content {
...
background:#FFEEDA
url(../images/wash.jpg)
-2em -4.6em no-repeat;
...
}
Das Menue wird mittels Inline-Frame eingebunden. Das Menue selber verwendet JavaScript für die Untermenues. Die Menue Items bestehen aus Listeneinträgen und wird folgendermassen formatiert.
ul {
padding: 0;
margin: 0;
width:170px;
list-style: none;
color:#FFFFFF;
border:3px solid #FFFFFF;
}
li {
position: relative;
padding:3px;
font-size:0.8em;
}
li ul {
display: none;
top: 1em;
left:5px;
}
li>ul {
top: auto;
left: auto;
}
ul.back {
background-color:#444444;
width:150px;
border:1px solid #FFFFFF;
border-right:1px solid #BBBBBB;
border-bottom:1px solid #BBBBBB;
}
li.backtop
{
padding-left:8px;
background:#000000 url(images/action1.gif) no-repeat top left;
}
li:hover ul, li.over ul
{
display: block;
}
Dieses Template ist CSS validiert (bis auf die Opazität des Menues).