Liste: Jeder Eintrag eigene Bullet-Grafik?

[ad]

Hallo,
ich habe ein Hauptmenü, bei dem vor jedem Punkt ein kleines farbiges Quadrat stehen soll. Jedes Quadrat hat eine leicht andere Farbe, um die unterschiedl. Bereiche der Webseite zu kennzeichnen.

Das Menü mach ich natürlich mit einer Liste. Kann man nun jedem Eintrag ein eigenes Bild verpassen? Dieses Bild sollte sich dann zusätzlich bei einem a:hover auch noch verändern lassen.

Wie würdet ihr das sonst lösen?

100dank und ein schönes WE,
andi

[ChrisB]

Hi,

Das Menü mach ich natürlich mit einer Liste. Kann man nun jedem Eintrag ein eigenes Bild verpassen?

Ja, kann man.

Wenn man noch nicht weiss, wie, dann macht man sich über Selektoren in CSS schlau.

MfG ChrisB

[ad]

Hi Chris

Wenn man noch nicht weiss, wie, dann macht man sich über Selektoren in CSS schlau.

Ok, ich hab jetzt im HTML
 <li id="0"><a class='current' href="/de/coaching/index.php">Coaching</a></li>

Und im CSS
#main_navigation li#0{
background:url(/images/btn-menu1-full.png) no-repeat;
}

Das klappt nicht. Stimmt das #0 im CSS nicht?

Danke & Gruß
andi

[ChrisB]

Hi,

Stimmt das #0 im CSS nicht?

id="0" im HTML stimmt nicht.

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Stimmt das #0 im CSS nicht?

id="0" im HTML stimmt nicht.

und zwar deshalb.

Qapla'

[ad]

id="0" im HTML stimmt nicht.

und zwar deshalb.

Alles klar, vielen Dank!

[Gunnar Bittersmann]

@@ad:

nuqneH

Kann man nun jedem Eintrag ein eigenes Bild verpassen? Dieses Bild sollte sich dann zusätzlich bei einem a:hover auch noch verändern lassen.

Wie würdet ihr das sonst lösen?

Abhängig davon, was passieren soll, wenn später Menüpunkte hinzukommen oder wegfallen.

Angenommen, momentan sieht es so aus:
   (rot) foo
  (gelb) bar
  (grün) baz
  (blau) quz

Wenn nun "baz" wegfällt, wie soll es aussehen, so:
   (rot) foo
  (gelb) bar
  (blau) quz
oder so:
   (rot) foo
  (gelb) bar
  (grün) quz

Im ersten Fall wären IDs für die Menüpunkte angesagt, im zweiten die Pseudoklasse ':nth-child'.

Qapla'

[ad]

Hi Gunnar. Danke für Deine Antwort.

»»... Im ersten Fall wären IDs für die Menüpunkte angesagt, im zweiten die Pseudoklasse ':nth-child'.

Ich versuch es über IDs, komme aber grad nicht weiter.

[Der Martin]

Hallo,

Das Menü mach ich natürlich mit einer Liste. Kann man nun jedem Eintrag ein eigenes Bild verpassen?

aber sicher. Weißt du ja inzwischen.

Dieses Bild sollte sich dann zusätzlich bei einem a:hover auch noch verändern lassen.

Das wohl nicht (wobei ich davon ausgehe, dass a ein Kindelement von li ist). Es gibt in CSS keine Rückwärts-Selektion, d.h. man kann ein Element nicht anhand seiner Kindelemente oder deren Zustand selektieren.

Man kann das, was du vorhast, aber mit li:hover realisieren - sofern man in Kauf nimmt, dass alte IEs dann halt von diesem Effekt ausgeschlossen bleiben. Eine akzeptable Einschränkung, würde ich sagen.

So long,
 Martin