Schlagwort: WebDesign

Einfaches, übersichtliches Joomla Template in blau.
Das Header Image ist 1250 px breit – ihr könnt alles anpassen. Der hauptsächliche CSS Code ist hier gelistet.

* {
margin:0;
padding:0;
}
html {
margin:0;
padding:0;
color:#333333;
font:normal 12px/1.5em Arial,Helvetica,Geneva,sans-serif;
}
body {
margin:0;
padding:0;
text-align:center;
background:url(../images/bg_img_body.png) repeat-x;
}
a {text-decoration:none;}
a:link {color:#99CC33;text-decoration:none;}
a:visited  {color:#B5B5B5;text-decoration:none;} 
a:hover  {color:#FFCC00;border-bottom:1px dotted #FFCC00;} 
a:active  {color:#FFCC00;border-bottom:1px dotted #FFCC00;}
a:focus {color:#FFCC00;border-bottom:1px dotted #FFCC00;}

#container {
margin:0 auto;
margin-top:20px;
padding:10px;
width:1250px;
min-height:850px;
text-align:left;
background-color:#FFFFFF;
}
#topmenu {
margin:0 auto;
height:100%;
min-height:20px;
margin-bottom:5px;
text-align:left;
background-color:#FFFFFF;
border-bottom:1px solid #CCCCCC;
}
#header {
margin:0 auto;
height:100%;
min-height:250px;
text-align:left;
background:url(../images/bg_img_header.png) bottom right no-repeat;
}

Das Template wurde getestet mit allen gängigen Browsern.
Heißt nicht es ist fehlerfrei. Das müsstet ihr bei Bedarf anpassen. Das Template ist etwas älter, demzufolge müsst ihr die Installationsprozedur (index.php) anpassen.

Zusammenfassung

Dieses Joomla Template baut auf DIV-Container auf, besitzt eine feste Breite von 980px.

Der primäre Font ist Trebuchet MS. Das Zentrieren des Layouts erfolgt mittels automatischer Ränder.

#rahmen {
width: 980px;
margin: 0 auto;
}
#top-aussen {
width: 960px;
height: 50px;
margin: 0;
background-color: #FFFFFF;
border-left: 20px solid #4040A0; /* 20px breiter Rand !!! */
}
#header-aussen {
width: 960px;
height: 180px;
margin: 0;
border-left: 20px solid #000000; /* 20px breiter Rand !!! */
background: #FFFFFF url(../images/bg-header-aussen.jpg);
}

Die CSS Datei ist beim W3C nach CSS Standard 2.1 validiert. Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet. Das Template ist etwas älter, demzufolge müsst ihr die Installationsprozedur (index.php) anpassen.

Dieses Joomla Template baut auf DIV-Container auf, besitzt eine feste Breite von 920px. Als primaeren Font verwende ich Trebuchet MS. Das Zentrieren des Layouts erfolgt mittels automatischer Ränder:

#container{width: 920px; margin:auto;}

Das funktioniert bei den meisten neueren Browsern, für den IE im Quirks-Modus sollte ein

body{text-align: center;} 

eingefügt werden.
Für den Netscape 6, um ein “Herauslaufen” der Seite über den Rand zu verhindern, auch noch ein:

body{min-width: 800px;}

Die Eigenschaft “text-align” kann dann im #container wieder angepasst werden.
Dieses Möglichkeit des Zentrierens verhindert das Verschieben bei geringen Breiten oder Auflösungen,
im Vergleich zu einer Zentrierung mit negativen Rändern.

Dieses Template ist getestet mit Firefox 2.0 und dem IE 6 bzw. 7.
Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet.

Das Template ist etwas älter, demzufolge müsst ihr die Installationsprozedur (index.php) anpassen.