Kategorie: CSS Templates

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

Dieses Template verwendet eine fixe Breite von 650 px und wird zentriert dargestellt.

#main {
width: 650px;
margin: auto;
margin-top:5px;
text-align:center;
}

Dieses Template besteht aus einem #main Bereich von 800px. Die Zentrierung erfolgt über automatische Ränder. Der Contentbereich #content_aussen ist 480px breit. Darüber befindet sich noch das #topmenue. Als Doctype verwende ich xhtml-strict.

#main {
margin:0;
padding:0;
margin:0px auto;
text-align:left;
width:800px;
}

Das Mainmenue und der Contentbereich werden mittels float angeordnet. Der Contentbereich umfliesst das Mainmenue. (float:right;)

Die Überschriften des Mainmenues werden formatiert mittels:

#mainmenue p.headermenue{
text-align:right;
margin:0;
padding:0;
padding-top:5px;
padding-right:20px;
height:25px;
font-size: 16px;
color:#FFFFFF;
background:transparent_
url(../images/bg-mainmenue.jpg)_
center right no-repeat;
}

In dem Hintergrundbild sind Rundung und Verlauf enthalten.

Eine Besonderheit sind die Rundungen im oberen Bereich des Contents. Diese verwenden -moz-border-radius und sind somit nur für den Mozilla/Firefox. Sollte CSS3 mal bei den meissten Browsern implementiert sein, kann man das problemlos ersetzen.

#content_top {
margin:0;
padding:0;
margin-top:5px;
text-align:left;
width:480px;
height:400px;
background:transparent_
url(../images/bg-content-top.jpg)_
center center no-repeat;
border:10px solid #8FB5D9;
border-bottom:10px solid #8FB5D9;
-moz-border-radius-topleft:30px;
-moz-border-radius-topright:30px;
}

Die Überschriften und der p-tag sind vorformatiert. Ihr könnt aber alles anpassen und nach Euren Wünschen veraendern.

Dieses Template ist CSS validiert (bis auf den border-radius des oberen Contentbereiches).

Dieses Template verwendet eine Breite von 950px der eigentliche Contentbereich ist 700px breit mit einem padding von 10px.

#gesamt {
width:950px;
margin:10px auto;
text-align:left;
}
#content {
float:right;
clear:right;
border:1px solid #CCCCCC;
border-right:1px solid #757575;
border-bottom:1px solid #757575;
width: 700px;
padding:0;
margin:0;
background-color: #A0C0E0;
color:#444444;
text-align:left;
}

Das Menue ist eine unsortierte Liste. Die Formatierung erfolgt durch:

ul#mainnav {
list-style:none;
margin:0;
padding:0;
}
ul#mainnav li {
text-decoration:none;
display:block;
width:100%;
padding:3px 0%;
text-align:left;
}
ul#mainnav li a:link, ul#mainnav li a:visited {
text-decoration:none;
display:block;
width:100%;
padding:3px;
text-align:left;
color:#202040;
background-color: transparent;
}
ul#mainnav li a:hover {
background-color:#E0A0A0;
color:#000066;
padding:3px 0%;
text-align:right;
}

Im Contentberecih schließt sich ein Footer ein, der ist 50px hoch und in der Schriftgröße 11px. durch die Klasse Text wird ein Einzug von 10px erreicht, im Contentbereich wie im Footer.

#footer {
height:50px;
padding:0;
margin:0;
text-align:left;
background-color:#E08080;
font-size:11px;
color:#757575;
width:100%;
border-top:1px solid #F0F0F0;
}
#content .text, #footer .text {
padding:10px;
}

Dieses Template ist CSS validiert.