ad: Liste: Jeder Eintrag eigene Bullet-Grafik?

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

  1. 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

    --
    “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
    1. 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

      1. Hi,

        Stimmt das #0 im CSS nicht?

        id="0" im HTML stimmt nicht.

        MfG ChrisB

        --
        “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
        1. @@ChrisB:

          nuqneH

          Stimmt das #0 im CSS nicht?

          id="0" im HTML stimmt nicht.

          und zwar deshalb.

          Qapla'

          --
          Volumen einer Pizza mit Radius z und Dicke a: pi z z a
          1. id="0" im HTML stimmt nicht.

            und zwar deshalb.

            Alles klar, vielen Dank!

  2. @@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'

    --
    Volumen einer Pizza mit Radius z und Dicke a: pi z z a
    1. 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.

  3. 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

    --
    Die neue E-Mailadresse des Papstes: mailto:urbi@orbi