Mehrfach Button-Hintergrund mit nur einer Bilddatei (II)

Antworten
Admin
Administrator
Beiträge: 84
Registriert: Di 19. Aug 2014, 10:47

Mehrfach Button-Hintergrund mit nur einer Bilddatei (II)

Beitrag von Admin » Di 19. Aug 2014, 16:20

Ziel diese Tut's ist eine Navigation mit folgenden Eigenschaften:
  • Darstellung der Schaltzustände mit nur einer Bilddatei
  • Wechsel der Schriftfarbe entsprechend dem Schaltzustand
  • „bewegter“ Button beim Anklicken
Bilddatei mit den 3 Schaltzuständen:
algrund.gif
Hier findest du das Ergebnis als Vorschau.

Öffne im KompoZer eine neue Datei. Erstelle ein div und weise ihm folgende Regel zu:

Code: Alles auswählen

#navi {
    width: 300px;
    height: 300px;
    }
Die Abmessungen sind frei gewählt und haben keine Bedeutung.

Schreibe Seite1, Seite2, Seite3, Seite4 und Seite5 untereinander. Markiere sie alle und formatiere sie als unsortierte Liste. Erstelle folgende Regeln

Code: Alles auswählen

  #navi ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

#navi li {
    }
Füge jedem Listenpunkt einen Link #nogo hinzu. Und erstelle für die Links folgende Regel

Code: Alles auswählen

#navi li a {
    padding: 0px 0px 0px 20px;
    background-image: url(algrund.gif);
    background-repeat: no-repeat;
    display: block;
    height: 30px;
    line-height: 25px;
    text-decoration: none;
    color: white;
    }
Höhen und Abstände musst du entsprechend deinen Gegebenheiten anpassen.

Kommen wir nun zum Maus-Over-Effekt durch Wechsel des Hintergrundbildes und der Schriftfarbe. Erstelle die folgende Regel

Code: Alles auswählen

#navi li a:hover {
    color: red;
    background-image: url(algrund.gif);
    background-repeat: no-repeat;
    background-position: left center;
    }
Beachte hierbei das die background-position auf Links und Mitte steht.

Jetzt noch die Regel für den Angeklickt-Effekt.

Code: Alles auswählen

 #navi li a:active {
    color: #66ffff;
    background-image: url(algrund.gif);
    background-repeat: no-repeat;
    background-position: left bottom;
    }
Beachte hierbei das die background-position auf Links und Unten steht.
Dieses Tutorial wurde am 06.06.2008 von gimp-michel für KompoZer-Web erstellt.

Antworten