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.
#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).