Einleitung
kurze Info zum Baukasten-Design "CSS"
Wenn wir das Baukasten-Design "CSS" ausgewählt haben, sehen wir zunächst alles weiß (siehe Bild). Die Felder (Header, Navi, Box u.s.w) sind bereits vorhanden. Wir sehen sie nicht, weil sie noch kein Aussehen bekommen haben. Ihr Aussehen bekommen sie mit CSS. (z.B. Breite, Farben, Schriftgrößen).
Die (wichtigsten) Felder befinden sich bereits im Design CSS
und zwar in dieser 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>
<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.
Z.B. dem Headerfeld, eine Breite + Höhe + Mittig + Hintergrundbild
#header_container {
width: 980px;
height: 120px;
margin: auto;
background-image: url(BILD-URL); }
