Eigene 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. |
Eigener Navi-Button :
- Navi-Buttons für Iceblue, fertig zum kopieren :
www.free-picture.de.tl - mit Rechtsklick auf deinem PC speichern
- oder (wenn vorhanden) mit Grafikprogramm erstellen in Größe 185 x 33
- fertigen Button hochladen bei "Bilder verwalten"
- bei "Bilder verwalten" den Namen des Bildes anklicken
- nun mit der Maus auf das Bild
- mit Rechtsklick auf "Eigenschaften", da steht BILD-URL
- diese BILD-URL kommt in den Code
Einfügen im Feld "Text über Design"
<style type="text/css">
<!--
/* Navi-Button */
td.nav {
background-color: #xxxxxx;
background-image: url(Button-URL 1); }
/* Navi-Button Hover-Effekt */
td.nav:hover {
background-color: #xxxxxx;
background-image: url(Button-URL 2); }
/* Navi-Link Farbe und Größe */
td.nav a {
color: #000000;
font-size: 14px;
font-family: arial,verdana;
text-align: left;
text-decoration: none; }
/* Navi-Link Hover */
td.nav a:hover {
color: #000080; }
/* aktuell besuchte Seite */
tr.checked_menu td {
background-color: #6f8ac4;
background-image: url(Button-URL 3); }
-->
</style>
<!--
/* Navi-Button */
td.nav {
background-color: #xxxxxx;
background-image: url(Button-URL 1); }
/* Navi-Button Hover-Effekt */
td.nav:hover {
background-color: #xxxxxx;
background-image: url(Button-URL 2); }
/* Navi-Link Farbe und Größe */
td.nav a {
color: #000000;
font-size: 14px;
font-family: arial,verdana;
text-align: left;
text-decoration: none; }
/* Navi-Link Hover */
td.nav a:hover {
color: #000080; }
/* aktuell besuchte Seite */
tr.checked_menu td {
background-color: #6f8ac4;
background-image: url(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
