find-templates

Info zum Design CSS

Kurz-Info zum Baukasten-Design "CSS"


Ein Blick in den Quellcode zeigt die wichtigsten Felder in folgender Reihenfolge:

<div id="container"">
<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;}
Heute: 5 Besucher