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 koennt aber alles anpassen und nach Euren Wünschen veraendern.
Dieses Template ist CSS validiert (bis auf den border-radius des oberen Contentbereiches) und kann komplett im Downloadbereich heruntergeladen werden.