tutorials
  Leisten
 
"

Design ändern - Die Leisten über dem Content

 

Jetzt ändern wir die Leiste über der Navigation über dem Mittelteil und über den Boxen:

auch hier gilt - alle CSS-Codes müssen in die Style-Anweisung eingbunden werden:

 

<style type="text/css">

<!--

Hier kommt der komplette Code rein.

-->

</style>

 

Jetzt die Codes:

 

td.nav_heading

td.edit_content_top

td.sidebar_heading

 

 

hier gibt es wie immer mehrere Möglichkeiten:

 

1. die Leiste soll ganz weg:

 

 

{background-image: none;}

 

 

durch diesen Befehl wird die Leiste transparent - man könnte auch so:

 

{background-image: url(Link des Bild);}

 

 

ein Bild einfügen.

 

In der Leiste ist ja jetzt normalerweise noch Text

wenn hier kein Text erscheinen soll, dann geben wir einfach keinen Text ein. Wenn wir aber zum Beispiel die Überschrift Navigation ändern möchten können wir den Text in Farbe, Form, Größe und Schriftbild anpassen:

 

 

font-size: Schriftgröße:

14px; hier können wir die Textgröße anpassen

 

 

font-weight: Schriftgewicht :

normal= normal, bold= fett, bolder= fetter, lighter= leichter

 

 

font-style:Schriftstil:

 

normal= normal - italic= kursiv

 

 

font-family: Schriftfamilie/Schriftart:

Der Wert für font-family gibt entweder eine Schriftart oder eine Schriftfamile an. Der Browser kann dem User nur die Schriften zeigen, die der User selbst auch auf dem Rechner hat. Es ist aber möglich, mehrere Schriftarten und Schriftfamilien hintereinander anzugeben. Wichtig ist nur, dass die Werte durch ein Komma voneinander getrennt sind. Der Browser probiert alle Werte durch und wählt den Ersten, der auf dem Betriebssystem installiert ist. Außerdem müssen Schriftarten und Schriftfamilien, die ein Leerzeichen beinhalten, in Anführungszeichen gesetzt werden. Also so: "Arial Black" , oder so: 'Arial Black'

 

 

text-decoration:

none= Keine Hervorhebung

underline= Unterstrichen

overline= Überstrichen

line-through= Durchgestrichen

blink= Blinkender Text (funktioniert im Internet-Explorer erst ab Version 7)

 

 

text-align: Textausrichtung:

left= linksbündig center= zentriert right= rechtsbündig

 

 

color: Farbe

Die Farbe kann man auch mit Namen wie black, white definieren am besten ist es aber wenn man gleich mit den HEX-Werten - da gibt es alle Farbvarianten - hier ist ein Color-Code-Picker - da kann man die Textfarbe in jeder Nuance sehen:

 

  Color-Code-Picker


das sieht dann fertig so aus:

td.nav_heading{background-image: url(Bild-Adresse); font-size:18px;font-weight: bold;font-family: Verdana;text-align: center;text-decoration: underline;font-style: italic;color: #ff0000;}

 

 

hier nochmal vereinfacht ohne die Text-Codes:

td.nav_heading{background-image: url(Bild-Adresse);}

 

 

so verfahren wir jetzt auch mit dem Balken über dem Mittelteil:

td.edit_content_top{background-image: url(Bild-Adresse);}

 

 

und mit dem Balken über den Boxen:

td.sidebar_heading{background-image:url (Bildadresse);}

 

 

und in jeden Code können wir wieder die Befehle für die Schrift eingeben, wenn sie geändert werden soll.

Dieser Code wird zu unserem CSS Code der Navigation eingebunden - das heißt wir müssen nicht wieder

den Code in eine Style- Anweisung einbinden.

 

 

Wenn wir wieder alles richtig gemacht haben sieht es so aus

 

Es besteht aber auch die Möglichkeit die Balken nur aus einer Farbe zu gestalten

td.nav_heading{background-image: url(URL);background-color: #000000;}

das ist jetzt eine schwarze Leiste - andere Farb-Hex-Codes siehe oben

wir können auch noch einen Rand um die Leiste machen

td.nav{background-image: url(URL);background-color: #000000;border: 1px solid #c5c5c5;}

 

 

das ist jetzt eine schwarze Leiste mit einem hellgrauen Rand

 

Wir können auch den Rand-Typ verändern:

Rahmen-Codes

 

 

Unserer Kreativität sind kaum Grenzen gesetzt.


 

 
 
Aktualisieren # Diese Seite Drucken ein Bild Zurück Vor ein Bild ein Bild ein Bild nur IE

Impressum | Rechtliche Hinweise | News

© success4you , Tutorials-Area 2007

 
 
=> Willst du auch eine kostenlose Homepage? Dann klicke hier! <=
http://www.bambusratte.com/taf.php?%20bgcolor=c5c5c5&txtcolor=000000&anrede=s&site=http:tutorials-%20area.de.tl&bgpic=http:img.webme.com/pic/t/tutorials-area/tutback2.gif&nametaf=Tell-A-Friend