Variablen in CSS??

[mrbela]

Hallo Leute,

ich bin dabei eine Homepage zu erstellen, die in der Menüführung mehrere Bilder (=Buttons) hat. Für diese will ich mouseover-Effekte definieren.

Das habe ich bisher so gelöst:

Code: Alles auswählen

  a.startseite { display:block;
             background-image:url(../img/index_03.gif);
             width:115px; height:110px }
  a:hover.startseite { background-image:url(../img/index_03_mo.gif); }


  a.ueberuns { display:block;
             background-image:url(../img/index_04.gif);
             width:116px; height:110px }
  a:hover.ueberuns { background-image:url(../img/index_04_mo.gif); }

(_mo = mouseover)

Die Links in der html-Datei, die dann als Bild dargestellt werden sehen so aus:

Code: Alles auswählen

<a href="startseite.php" class="startseite">

Da ich mich nicht so gut auskenne in css, meine erste Frage:

Macht es überhaupt Sinn in diesem Fall Klassen zu benutzen?

Und die weitere Frage. Bevor ich den obigen Code für jedes Bild redundant speicher, gibt es eine möglichkeit den Bildnamen, also index_03,index_04 usw, der css-Datei zu übergeben, so dass ich nur einmal den Code schreiben muss?

Danke für die Hilfe!

[sejuma]

Um Links unterschiedlich zu gestalten, in diesem Fall unterschiedliche Hintergrundgrafiken zuzuweisen, sind Klassen das probate Mittel.

Eigenschaften, die überall gleich sind, lassen sich zusammenfassen und brauchen nur einmal angegeben zu werden.

Code: Alles auswählen

a {
display: block;
height...
width...
}

Diese Angaben kannst du dir dann bei den Klassen sparen.

Ich weis nicht, wie deine Grafiken aussehen. Wenn sie sich lediglich im Text unterscheiden, dann könntest du unter Verzicht auf Klassen eine einheitliche Hintergrundgrafik verwenden und den Text als Linktext einbinden. Beide Varianten findest du hier beschrieben: http://www.ohne-css.gehts-gar.net/0022.php