Im vorigen Abschnitt haben wir etwas Farbe ins Spiel gebracht und die Boxen farblich aufeinander abgestimmt. Heute werden wir die Textfarben anpassen und eine Hintergrundgrafik einbauen.

Textfarben

Auch hier wird die Farbe über den Hexadezimal-Code festgelegt. Im Gegensatz zu HTML heisst der CSS-Befehl nicht Font-color, sondern einfach nur color. Dies war bei mir anfangs eine Hauptfehlerquelle, da ich immer „font-“ geschrieben habe und CSS damit nichts anfangen konnte. Hier ein Beispiel:

body {color:#011C26;}

Diesen HTML-Selektor schreibt man in die Stile, die wir im Head der Seite untergebracht haben. Er legt fest, dass standardmäßig immer dunkelblau als Textfarbe benutzt wird. Die Hintergrundfarbe wird auch dort festgelegt, also erhalten wir 2 Stilanweisungen für body (fett hervorgehoben):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Meine erste Seite</title>
<style>
body {background-color:#CCCCCC; color:#011C26}
#container {border:1px solid black; width:800px; margin:auto;}
#logo {padding:5px;background-color:#A6242F;}
#navigation {padding:5px; width:150px;height:350px;float:left;background-color:#C0B18F;}
#inhalt {padding:5px; height:350px;background-color:#D9CEAD;}
</style>
</head>
<body>
<div id="container">
<div id="logo"> <img src="yoga.png" alt="Logo vom Yoga-Studio - feines Yoga" /></div>
<div id="navigation"> Navigation und noch mehr TExt </div>
<div id="inhalt"> Inhalt und noch mehr Text. Inhalt und noch mehr Text..  </div>
</div>
</body>
</html>

Über die Schriftgröße, -Art und -Familie haben wir bisher auch noch keine Angaben gemacht. Dies folgt in einem anderen Kapitel.

Nun wollen wir erstmal unserer Seite ein Muster für den Hintergrund spendieren. Dafür benötigen wir eine entsprechende Grafik. Da solch eine Grafik schwer selbst zu erstellen ist, verweise ich erstmal auf eine Website, auf der wir kostenlos ein hochwertiges Muster beziehen können:

http://www.backgroundlabs.com/

 

Und hier die Datei, die ich mir gewählt habe:
Hintergrundgrafik

Mit dem Befehl background-image lege ich nun dieses Bild aus Hintergrundgrafik fest:

body {background-image:URL(496.png);}

Im kompletten Code sieht es dann so aus (gefolgt vom Screen der Seite):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Meine erste Seite</title>
<style>
body {background-color:#CCCCCC; color:#011C26; background-image: URL(496.png)}
#container {border:1px solid black; width:800px; margin:auto;}
#logo {padding:5px;background-color:#A6242F;}
#navigation {padding:5px; width:150px;height:350px;float:left;background-color:#C0B18F;}
#inhalt {padding:5px; height:350px;background-color:#D9CEAD;}
</style>
</head>
<body>
<div id="container">
<div id="logo"> <img src="yoga.png" alt="Logo vom Yoga-Studio - feines Yoga" /></div>
<div id="navigation"> Navigation und noch mehr Text </div>
<div id="inhalt"> Inhalt und noch mehr Text. Inhalt und noch mehr Text. </div>
</div>
</body>
</html>

Theoretisch kann man auch den div-Elementen Hintergrundgrafiken zuweisen; meistens werden aber diese eher durch CSS-Befehle „aufgehübscht“. Hier zum Beispiel durch den Befehl shadow:

#container {box-shadow:8px 8px 8px #000000; }

Dieser Schatten hat die Farbe Schwarz (#000000), hat einen vertikalen und horizontalen Versatz von 8px und die dritte 8px steht für das Weichzeichnen der Farbe/ des Schattens. Dieser Befehl wird übrigens nicht von allen Browsern und speziell den älteren davon nicht unterstützt. D. h. der Schatten wird einfach nicht  dargestellt – also halb so wild 😉

Eine schöne Toolbox gibt es hier:

http://westciv.com/tools/boxshadows/index.html

 

Das Ergebnis sieht dann so aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Meine erste Seite</title>
<style>
body {background-color:#CCCCCC; color:#011C26; background-image: URL(496.png)}
#container {border:1px solid black; width:800px; margin:auto; box-shadow:8px 8px 8px #000000;}
#logo {padding:5px;background-color:#A6242F;}
#navigation {padding:5px; width:150px;height:350px;float:left;background-color:#C0B18F;}
#inhalt {padding:5px; height:350px;background-color:#D9CEAD;}
</style>
</head>
<body>
<div id="container">
<div id="logo"> <img src="yoga.png" alt="Logo vom Yoga-Studio - feines Yoga" /></div>
<div id="navigation"> Navigation und noch mehr Text </div>
<div id="inhalt"> Inhalt und noch mehr Text..  </div>
</div>
</body>
</html>
Layout mit anderer Textfarbe und Hintergrundmuster

Layout mit anderer Textfarbe und Hintergrundmuster

In Teil 14 von „wie erstelle ich eine Hompepage“ werden wir  dann den oberen Logo-Bereich etwas höher machen, den Text formatieren und die Abstände zwischen Text und Rand erweitern.