Dieses Template und CSS Vorlage 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).