| >>Funstuff |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| |
Navi Buttons
Design Iceblue : Eigene Navi-Buttons:
 |
Auf dem Bild die Klassen im Design "Iceblue" . Die Buttons der Navigation haben die Klasse nav bekommen . Egal welche Klasse verwendet wird , schreibt ein td. davor . Das td. steht für Tabellenspalte . Korrekt heißt es dann td.nav .
(Bild anklicken zum vergrößern) |
Original-Button Größe : 185 x 33 Pixel |
Das ist der Original-Button. Der neue muss in gleicher Größe erstellt werden! Für den Hover-Effekt einen zweiten. |
• ohne "Hover-Effekt" wird nur 1 Button benötigt
• Navi-Buttons für Iceblue, fertig zum kopieren : www.free-picture.de.tl
• Button mit Rechtsklick auf deinem PC speichern
• neuen Button hochladen bei "Bilder verwalten"
• bei "Bilder verwalten" den Namen des Bildes anklicken
• Bild anzeigen lassen, mit der Maus auf das Bild
• mit Rechtsklick auf "Eigenschaften", da steht BILD-URL
• diese BILD-URL kommt in den Code
Die Linkfarbe kann bei td.nav a geändert werden .
Einfügen im Feld "Text über Design"
- diese Klassen sind im Beispiel-Code bereits enthalten
- wer Beispiel-Code verwendet, muss nur seinen Code anpassen
- wer bereits Codes eingefügt hat, benötigt den style-tag nicht !
<style type="text/css">
<!--
/*Navi-Button*/
td.nav {
background-color: #xxxxxx;
background-image: url(Hier Button-URL 1); }
/*Hover-Effekt Navi-Button 2*/
td.nav:hover {
background-color: #xxxxxx;
background-image: url(Hier Button-URL 2); }
/*Textlink Farbe und Größe*/
td.nav a {
color: #000000;
font-size: 14px;
font-family: arial,verdana;
text-align: left;
text-decoration: none; }
/*Textlink Hover-Effekt*/
td.nav a:hover {
color: #000080; }
/* aktuell besuchte Seite */
tr.checked_menu td {
background-color: #6f8ac4;
background-image: url(Hier Button-URL 3); }
-->
</style>
Wenn Ihr nur Hintergrundfarbe für Buttons möchtet:
• bei background-image: none; die Klammer leer lassen
• fügt bei background-color: einfach Eure Wunschfarben ein
• zum Beispiel Blauer Hintergrund mit #000080;
• oder Roter Hintergrund mit #800000;
• Farbcode-Palette findet Ihr hier : Farbcode-Tabelle
 |
|
|
|
|
|
|
|
|
|
|
|
|
