CSS-Datei Optimieren

[Cosmoflamme]

Hallo zusammen!
Ich habe mehrere Stylesheet-Definitionen z.B

#menue1 a:hover {background-image: url(/design/hover.gif);}
#menue2 a:hover {background-image: url(/design/hover.gif);}
#menue3 a:hover {background-image: url(/design/hover.gif);}

..usw

Meine Frage an die Spezialisten ist nun,ob sich die gleichen Definitionen für verschiedene Elemente nicht irgentwie Platzsparend zusammen gefasst werden können.

Ich habs schon mit Komma versucht,so wie es hier
beschrieben ist.
Allerdings klapps auf die Art leider nicht:

#menue1,#menue2,#menue3 a:hover {background-image: url(/design/hover.gif);}

 

[theHacker]

Wenn mehrere Element trennen, dann musst du das richtig machen; nichts weglassen:

#menue1 a:hover, #menue2 a:hover, #menue3 a:hover {
  /* ... */
}

Das ist aber auch nicht schön.

Du benutzt für mehrere Elemente dieselbe Formatierung. Hier bring Klassen zum Einsatz:

a.menuitem:hover {
  /* gilt für alle Elemente, die Klasse "menuitem" haben */
}

<li><a href="#" id="menue1" class="menuitem">Link 1<a></li>
<li><a href="#" id="menue2" class="menuitem">Link 2<a></li>
<li><a href="#" id="menue3" class="menuitem">Link 3<a></li>

Falls du die IDs nicht irgendwo brauchst, weil du via JS im DOM fummeln musst, dann kannst du dir die IDs komplett sparen.

edit:
War'n schlimmer Fehler drin

 

[Cosmoflamme]

Vielen Dank für Deine Antwort!
Das erste Beispiel würde funktionieren,beim zweiten wüsste ich nicht,wo ich das class angeben muss.

Ich versuche es nochmal zu erklären:
Also ich habe ein Menü aus mehreren Divs,denen ich ID's zugewiesen habe.
Die ID benötige ich,um damit bei hover einen Text anzeigen zu lassen,den ich voher mit "display:none" verschwinden lassen habe.

<div id="menue1"><a href="#"><span></span></a></div>
<div id="menue2"><a href="#"><span></span></a></div>
<div id="menue3"><a href="#"><span></span></a></div>

Ich möchte aber gleichzeitig bei hover auch dem Div ein Hintergrundbild zuweisen.

#menue1 a:hover {background-image: url(/design/hover.gif);} 
#menue2 a:hover {background-image: url(/design/hover.gif);} 
#menue3 a:hover {background-image: url(/design/hover.gif);}

Da bei jedem Div das gleiche Hintergrundbild erscheinen soll,wäre es doch sinnvoll das zusammen zu fassen.
Ebenso wie die Definition,die fürs verschwinden-lassen des Textes zuständig ist.

#menue1 a span {display:none;}
#menue2 a span {display:none;}

 

[Renegade]

Hi,

Du ordnest den Links eine Klasse zu. Diese definiert die Eigenschaften:

<div id="menue1"><a href="#" class="menuitem"><span></span></a></div>
<div id="menue2"><a href="#" class="menuitem"><span></span></a></div>
<div id="menue3"><a href="#" class="menuitem"><span></span></a></div>

a.menuitem:hover {
  background-image: url(/design/hover.gif);
  display:none;
}

 

[theHacker]

Die ID benötige ich,um damit bei hover einen Text anzeigen zu lassen,den ich voher mit "display:none" verschwinden lassen habe.

Das wird alles nur mit CSS gemacht ? Falls ja, wenn ich das richtig verstanden hab, brauchst du die IDs überhaupt nicht.

Hier ein paar Links mit verstecktem Text:

<ul>
  <li><a href="#" class="menuitem">Link 1<span> - foo</span></a></li>
  <li><a href="#" class="menuitem">Link 2<span> - bar</span></a></li>
</ul>

In meinem Beispiel sind die Links in einer Aufzählung. So wie sich das bei dir anhört, wird das wohl auch so sein, drum: <ul> benutzen.

Zu Beginn blende ich die Texte in den <span>s aus:

a.menuitem span {
  display: none;
}

Wird der Link gehovert, zeige ich den Text an:

a.menuitem:hover span {
  display: inline;
}

 

[Cosmoflamme]

Das ist schwierig zu erklären

Ich habe mehrerer kleine unsichtbare 10x10 px-grosse Divs,die das Menü bilden.Bei Hover wird an einer anderen Stelle der Linktext eingeblendet,und gleichzeitig wird dem Div ein Hintergrundbild zugewiesen.
Die Divs im Menü selber sind mit der Zielseite verlinkt.
Daher brauche ich für jedes Div auch eine feste und andere ID.

...aber Hackers erste Idee funktioniert ja bestens (Gekauft! ).

 

[theHacker]

Das ist schwierig zu erklären

D.h. wir können noch mehr optimieren bzw. verbessern

Laut deiner Beschreibung klingt das nach einer Latte von Icons, die sich verändern, wenn ich drüberfahr und nur, wenn ich mit der Maus auf dem Icon bin, wird der zugehörige Text angezeigt. Richtig ?

Ich interpretier das mal als "ja" und schreib weiter
Falls nein, zeig uns doch mal, um was es geht, damit wir die Situation live begutachten können.

Die Divs entsprechend sind immer noch Aufzählungsobjekte. Aufzählungen haben ein Aufzählungszeichen, da nimmst du dann deine 10x10-Grafik aus dem Div-Hintergrund. Der Rest mit dem versteckten Text funktioniert genauso.

Bsp:
Das Menü ist ganz primitiv. Ich versehe es mit einer Klasse "menu", der ich mit CSS die ganze Funktionalität einräume.

<ul class="menu">
  <li><a href="#">H<span>ome</span></a></li>
  <li><a href="#">F<span>oo</span></a></li>
  <li><a href="#">B<span>ar</span></a></li>
</ul>

/* normales Menü-Item: Text versteckt */
ul.menu li {
  list-style-image: url(menu_bullet.gif);
}
ul.menu li a span {
  display: none;
}

/* Menü-Item gehovert: Bild ändert, Text zeigen*/
ul.menu li:hover {
  list-style-image: url(menu_bullet_hover.gif);
}
ul.menu li:hover a span {
  display: inline;
 }