CSS Vorlage DesertSand 02 vorgestellt

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