In dem HTML Tutorial habe ich euch erklärt wie man Div's in eine Tabelle reinsetzt, nun erkläre ich euch wie diese in CSS bearbeitet werden ;) In CSS kann man praktisch alles formatieren!
Wir haben ja die Funktion ID="content" benutzt, nun erstellen wir eine CSS die zB style.css heißt und schreiben folgendes rein:
#content {
}
Dies ist unser Anfang. Durch das # weiß die CSS automatisch, das damit der Div mit der ID "content" angesprochen werden muss!
Wir müssen nun noch folgendes einstellen: Breite, Höhe und einen Hintegrund. Zudem wollen wir wenn da mehr Text steht als das die Tabelle es tragen kann ohne verzerrt zu werden auch noch einen Befehl mit hinein, der es erlaubt das der Div scrollbar gemacht wird.
So sieht nun am Ende mein Code aus, wenn ich alles eingetragen habe was oben erwähnt wurde ;)
#content {
background-image: url(Bilder/bite_me_03.jpg);
width: 351px;
height: 434px;
overflow: auto;
}
Erklärungem:
» width und height erklären sich von selbst: das ist die Höhe und Breite des Divs! Hier sollte man am besten die Höhe und Breite nehmen, die auch das Hintegrund-Bild hat ;)
» background-image: url(url_zum_bild.jpg); sagt uns wo sich das Hintergrundbild befindet
» overflow: auto; sagt uns das wenn mehr Inhalt in dem Div vorhanden ist, als das er eingestellt ist mit Höhe und Breite, dieser dann scrollbar gemacht wird (brobier es doch einfach aus und du siehst was ich meine ;) )
Das gleiche machen wir nun noch mit der Navigation, denn da haben wir auch id="navi" gesetzt ;)
#navi {
background-image: url(Bilder/bite_me_05.jpg);
width: 107px;
height: 158px;
overflow: auto;
}
Uns fehlt nur noch der Hintegrund, der ist ja immer noch weiß. Schwer ist es nicht, einfach folgenden Code nehmen:
body {
background-color: #ecdccd;
}
Erklärungen:
» body gibt an, das die Hintergrund-Farbe im BODY-Tag gilt.
» background-color: #FARBE; sagt welche Farbe für den hintegrund definiert wird.
Ich denke mal das ich hier nichts mehr erklären muss, da es der gleiche Quelltext ist wie beim content ^^ Nur das eben die Breite und Höhe anders eingestellt ist ;) Zudem habe ich diesen Div auch scrollbar gemacht, da es ja mal sein kann, das mehr Links aufkommen als Platz ist ^^
Im Grunde sind wir nun mit den Div's fertig :) Man kann nun noch die Scrollbalken färben und den Text formatieren, sowie die Überschriften einrichten, aber dies wird in den anderen Tutorials erklärt und ich will ja nichts vorwegnehmen ;)
Wer Fragen oder Probleme mit dem Tutorial hier hatte, kann sich gerne via Mail an mich wenden und ich versuche das Tutorial aus zu bessern ;)
Das fertige Layout könnt ihr euch unter "Div Designs" bestellen ;)