Einige hatten sich ein Tutorial für so kleine Navikästchen gewünscht wo man seinen Text reinschreiben kann. Im Prinzip sind das einfach gestylte Div-Layer die man mit CSS ganz einfach anpassen kann. Das ganze ist gar nicht so schwer. Ich werde es im folgenden Tutorial erklären.

Wir wollen zu diesem Ergebnis kommen.

Also fangen wir mal an.

.box {
}

Wir haben jetzt in unserer CSS Datei also eine neue Klasse erstellt. Jetzt können wir im Prinzip schon anfangen zu stylen. Gut ist es wenn man vorher ungefähr weiß wie das ganze aussieht. Ich möchte das meine Textfarbe #808080 ist, das ist grau, meine Schriftart soll Tahoma sein und die Größe der Schrift 12


.box {
color:#808080;
font-family:Tahoma;
font-size:12px;}


color definiert also die Textfarbe
font-familiy den Namen der Schrift und
font-size ist die Größe der Schrift

Jetzt will ich aber noch einen Schritt weiter. Meine Textbox soll eine Hintergrundfarbe bekommen. Ausserdem will ich das die Box einen Rahmen in einem dunkleren Grau kriegt. Nämlich in der Farbe #A5A5A5
Der Rand soll 1px breit und gepunktet sein.

Meine CSS sieht jetzt so aus:


.box {
color:#808080;
font-family:Tahoma;
font-size:12px;
background-color:#E8C4D6;

border:1px dotted #A5A5A5;}


background-color definiert also unsere Hintergrundfarbe und
border unseren Rand

Da mir der Rand jetzt aber viel zu langweilig aussieht mache ich den Linken Rand 4px breit und die anderen nur 1px. Damit wir nicht überall wieder die Farbe angeben müssen machen wir das so:


.box {
color:#808080;
font-family:Tahoma;
font-size:12px;
background-color:#E8C4D6;
border:1px dotted #A5A5A5;
border-left-width:4px;
border-right-width:1px;
border-top-width:1px;
border-bottom-width: 1px;}

Wir sagen einfach nochmal welche Größe der border left (links), right (rechts), top (oben), bottom (unten) haben soll.

Jetzt sollte das ganze schon ganz schön aussehen. Ich bringe jetz aber nochwas mit rein.


.box {
color:#808080;
font-family:Tahoma;
font-size:12px;
background-color:#E8C4D6;
border:1px dotted #A5A5A5;
border-left-width:4px;
border-right-width:1px;
border-top-width:1px;
border-bottom-width: 1px;
padding:8px;}

Padding bedeutet das der Text von jeder Seite 8px abstand hat, damit der Rahmen nicht so rangeklatscht aussieht.

Und wie kommt diese Box dann auf meine Homepage? Ganz Einfach. Wir hatten die Box ja .box genannt. Du kannst auch noch unendliche viele andere Boxen erstellen. du kannst sie nennen wie du willst. Aber meine Box hat den Namen "box" also sieht das im HTML-Code so aus:

<div class="box">
Mein Text, lalalalaa, dubidubidubiduuuu</div>

So, das wars eigentlich schon. Man kann seine Box jetzt natürlich in allen Variationen stylen. Man kann den Rahmen zum Beispiel auch durchgehen machen. Dann lässt man das dottet einfach weg. Oder, wenn man einen gestrichelten Rahmen will schreibt man dashed statt dotted hin.

Ich hoffe ihr habt das so einigermaßen verstanden. Bei Fragen könnt ihr gerne Fragen =D
Wenn es was größeres ist was bei euch nicht klappt könnt ihr mich selbstverständlich auch bei MSN adden: froghunterin[at]hotmail[dot]de

Viel Spass mit dem TUT =D