Info zum Design CSS
Kurz-Info zum Baukasten-Design "CSS"
Ein Blick in den Quellcode zeigt die wichtigsten Felder in folgender Reihenfolge:
<div id="header_container"> Headerfeld </div>
<div id="nav_container"> Feld der Navigation </div>
<div id="content_container">
<div id="pre_content"> Feld über Content + Box </div>
<div id="content"> Seiteninhalt </div>
<div id="counter"> Besucherzähler </div>
<div id="post_content">lässt sich nicht füllen</div>
<div id="below_content">Feld Copyright-Hinweis</div>
<div id="sidebar_container">
<div id="sidebar_heading"> Titel der Box </div>
<div id="sidebar_content"> Inhalt der Box </div>
</div>
</div>
</div>
Die Felder sitzen bereits im Design.
Die Reihenfolge können wir nicht ändern.
Wir können den DIV-Feldern aber mit CSS-Eigenschaften ein Aussehen geben.
Womit fange ich an ?
Wir sehen im Code, das der container alle anderen Felder als Inhalt hat.
Im CSS Code beginnen wir auch mit #container
- wir geben dem Design eine Breite (mit width)
- wir richten das Design mittig aus (mit margin: auto;)
- Feld soll sich dem Inhalt anpassen (overflow:hidden;)
#container {
width: 980px;
margin: auto;
overflow: hidden; }
Es folgt das Headerfeld #header_container
- wir geben dem Header eine Breite (mit width)
- wir geben ihm eine Höhe (mit height)
- und Hintergrundbild (mit background-image: url(Grafik);)
#header_container {
width: 980px;
height: 120px;
background-image: url(Grafikadresse); }
Es folgt das Feld der Navi #nav_container
- wir geben dem Feld eine Breite (mit width)
- wir geben ihm eine Höhe (mit height)
- und Hintergrundfarbe (mit background-color:)
- und einen Abstand nach oben zum Header ? (mit margin-top)
#nav_container {
width: 978px;
background-color: #DDDDDD;
margin-top: 10px;
overflow: hidden;}
Es folgen die Menü-Felder li.nav_element a
- wir geben den "Buttons" eine Breite (mit width)
- wir geben ihm eine Höhe (mit height)
- und Hintergrundfarbe (background-color)
- sie sollen nebeneinander sitzen (mit float:left;)
- sie sollen Abstände haben (mit margin)
- ebenfalls einen Rahmen (mit border)
- und die Linkfarbe (mit color)
- Linktexte im Button mittig (text-align)
li.nav_element a {
display: block;
width: 100px;
height: 30px;
line-height: 30px;
background-color: #DDDDDD;
float: left;
margin: 2px 5px 2px 5px;
border: 1px solid #BBBBBB;
color: #000000;
text-align: center; }
Die Navigation ist ein Liste-Element und zeigt Standardmässig
immer "Aufzählungspunkte"an. Diese entfernen wir mit :
#nav_container ul li {list-style-type:none;}
