<!--Willkommen bei meinem Tutorial "Layouten mit CSS".
Hier möchte ich ein Schritt für Schritt zeigen, wie man
Ein Homepagelayout ganz ohne Tabellen erstellen kann.
Das Layout ist recht Simpel aber man wills ja auch nicht gleich überteiben.
Hier könnt ihr das fertige Beispiel sehen: http://bos-iron.pyrokar.lima-city.de/templates/tutorial/index.html
Das Tutorial ist aufgebaut wie eine HTML Datei und kann auch einfach per
kopieren und einfügen kopiert werden.
Viel Spass! -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/* Hier legen wir die Schrift (font-family) und die Schriftgröße(font-size) und dieHintergrundfarbe (background-color) #C0C0C0 fest*/
body {
font-family:verdana;
font-size:8pt;
background-color:#c0c0c0;
}
/*Hier legen wir den Randabstand fest (margin) und ziehen einen Rahmen um die ganze Page (border)*/
#randabstand {
margin : 10px 50px;
border : 1px solid #000000;
}
/*So.. nun kommt der Header. Wir möchten das der Header 100pixel hoch ist(height),unten einen Rand mit der Farbe #000000(border-bottom)
und die Hintergrundfarbe #828eb4(background-color) hat.*/
#header {
height : 100px;
border-bottom : 1px solid #000000;
background-color : #828eb4;
}
/*Das horizontale Menü direkt unter dem Header soll folgende Eigenschaften besitzen: Der Text soll rechts ausgerichtet sein(text-align), Wir möchten einen Rand unten mit der farbe #000000 (border-bottom) und der Hintergrund soll die Farbe #4263cd haben.(background-color)*/
#menu {
text-align : right;
border-bottom : 1px solid #000000;
background-color : #4263cd;
}
/*Nun legen wir die Linkeigenschaften von unserem horizontalen Menü fest.
Schriftgrad: Fett (font-weight), Schriftfarbe #000000 (color), Links sollen als
normaler Text dargestellt werden (text-decoration) und wir möchten das zwischen den Links
immer 5 pixel abstand sind (padding).*/
#menu a {
font-weight : bold;
color : #ffffff;
text-decoration : none;
padding : 5px;
}
/*Wir möchten das wenn man mit der Maus über einen Link fährt, der Link unterstrichen wird
(text-decoration)*/
#menu a:hover {
text-decoration : underline;
}
/*Nun kommt der Content bereich. Wir weisen dem eine feste höhe zu (height) ,wir möchten, das der Textabstand zum Rahmen, zum Menü und zum Seitenfuss 5pixel breit ist(padding) und einen Rand unten(border) mit der farbe #000000. Der Hintergrund soll hier #FFFFFF(background-color) sein.*/
#content {
height:400px;
padding:5px;
border-bottom:1px solid #000000;
background-color:#ffffff;
}
/*Kommen wir zum Seitenfuss. Wir wollen das der Seitenfuss eine höhe von 20px (height) und die Farbe #828eb4 hat. (background-color)*/
#footer {
height:20px;
background-color:#828eb4;
}
/*Kommen wir nun zum HTML*/
</style>
</head>
<body>
<!-- Wir schliesen den Container "Seitenabstand" nicht,
da alle container nach diesem ausgerichtet werden sollen. -->
<div id="randabstand">
<!-- Der Header -->
<div id="header"></div>
<!-- Das Menü -->
<div id="menu">
<a href="#">Testlink</a>
<a href="#">Testlink</a>
<a href="#">Testlink</a>
<a href="#">Testlink</a>
</div>
<!-- Der Contentbereich -->
<div id="content">
text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text text text text text text text text
</div>
<!-- Der footer -->
<div id="footer"></div>
<!-- Schlusstag von "randabstand" -->
</div>
</body>
</html>
<!--Fazit: Der HTML Code ist viel übersichtlicher wie bei einen Tabellenlayout. Zudem kann man, wenn mans so macht, ganz leicht ne valide Page baun, da nicht genug code da is um was falsch zu machen ^^