Kategorie: CSS Templates

Dieses Template (WhiteBerry 02) verwendet eine Breite von 950px der eigentliche Contentbereich ist 700px breit mit einem padding von 10px versehen.

#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 dieser Liste 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 Footerbereich mit ein. Dieser ist 50px hoch und in der Schriftgröße 11px gestaltet. Durch die Klasse “Text” wird ein Einzug von 10px erreicht, im Contentbereich wie auch im Footerbereich.

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

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

Dieses Template (CSS Vorlage DesertSand) verwendet eine fixe Breite von 650 px und wird zentriert dargestellt.

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

Die CSS-Vorlage:

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. Die Endgrafik oder das Endbild wird durch das geschickte Arrangieren und Verschieben der drei Ausgangsbilder erstellt. Dieses Konzept kann in Grafikdesign, Bildbearbeitung oder anderen kreativen Prozessen verwendet werden, um ansprechende und einzigartige visuelle Ergebnisse zu erzielen.

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