Kategorien
CSS Templates Stylesheets Webentwicklung

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

230 kB

Kategorien
CSS Templates Stylesheets Webentwicklung

CSS Vorlage DesertSand 01 vorgestellt

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

#main {
width: 650px;
margin: auto;
margin-top:5px;
text-align:center;
}
Kategorien
CSS Templates Stylesheets Webentwicklung

CSS Vorlage Whiteberry 01 vorgestellt

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.

CSS Template Whiteberry 01
#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).

47 kB

Kategorien
CSS Templates Stylesheets Webentwicklung

CSS Vorlage Whiteberry 02 vorgestellt

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.

74 kB