Navigation - Aktiver Link mit Hintergrundbild

Hi,
ich muss für eine Kunden eine Website programmieren.
Ich hab es jetzt so gelöst, dass der blaue Balken als Hintergrund im #head hinterlegt ist.
Für den jeweils aktiven Link hab ich eine Hintergrundgrafik gespeichert (heller, schattierter Kasten mit dem blauen Punkt)
Jetzt möchte ich den jeweils aktiven Navigationspunkt ansprechen über #header .mod_navigation li span.active, #header .mod_navigation a[title=Home]:hover. Aber das Problem ist, wie kann ich den jeweils aktiven Listenpunkt ansprechen? Die Navigationspunkte sind unterschiedlich lang und daher habe ich für jeden Punkt ein anderes Hintergrundbild.
Ist es überhaupt sinnvoll das so zu lösen oder gibt es da eine besser Lösung?
Im Anhang ein Bilder der Navigation wie sie sein sollte. Ich möchte die Navigation ungern komplett als Bild-Navigation erstellen.

Danke. VG

Verstehe ich jetzt nicht genau
der aktive Punkt bekommt ja die Klasse .active somit kannst du diesen auch ansprechen.

Ja das weiß ich ja, aber ich möchte jedem aktivem Navigationspunkt ein anderes Hintergrundbild geben. Und wenn ich das mit span.active mache, dann ist das für jeden Punkt die gleiche Grafik.

Hallo MelZu,

dazu kannst du in der Seitenstruktur jeder Seite eine CSS-Klasse geben und dann gezielt das mit der active-Klasse kombinieren.

->

Code:

---

.mod_navigation.home li.active { ... }

---

Ah, super danke. Das probier ich aus vielen Dank!!

hallo ihr lieben,
ich glaube ich habe das gleiche problem.
seit zwei tagen versuche ich jedem aktiven navigationspunkt ein eigenes hintergrundbild zu zuordnen.
die vier navigationspunkte haben jeweils ein eigenes hintergrundbild.
wenn der navigationspunkt aktive ist, soll sich das hintergrundbild ändern.

wie spreche ich nun RICHTIG den jeweiligen aktiven navigationspunkt an?

konkret:

es gibt:

Veranstaltungstechnik
Kongressorganisation
Messesolution
Referenzen

beim ersten punkt hat es geklappt.
(aktiv ist das bild kräftig, inaktiv matt)
bei den anderen bekomme ich es nicht hin.
in der seitenstruktur habe ich die jeweilge css klasse zugeordnet
-> die CSS klasse von Veranstaltungstechnik heisst "Veranstaltungstechnik"


es ist warscheinlich ganz ganz leicht.
aber leider reicht mein verständnis/ wissen leider nicht aus.

am liebsten hätte ich natürlich auch noch bei "hover" das gleiche verhalten wie bei "active" aber, ok, ein schritt nach dem anderen...


über eure hilfe wäre ich SEHR dankbar!

Hallo DaBu,

mit einem Link zur Seite wäre es leichter, Dir zu helfen!

http://trisense.danielabursch.de/ind...gstechnik.html

Die CSS Klassen sind ein grauen, aber versuch es mal hiermit:

Code:

---

#main .mod_navigationMain li.active.Kongressorganisation {
    background-image: url("../../tl_files/trisense/photos/Kongress_active.jpg");
}

---

Wenn du "background-image" benutzt, sparst du dir CSS und ggf. Arbeit falls der Hintergrund mal angepasst werden soll.

Das hier muss auch angepasst werden, du kannst nicht allen Menüpunkten das gleiche Bild zuweisen, jedoch unterschiedliche Bilder erwarten.

Code:

---

#main .mod_navigationMain li.active {
background: url("../../tl_files/trisense/photos/Veranstaltungstechnik_active.jpg") center top no-repeat;
}

---

Zitat:

---

Zitat von InitArt

Die CSS Klassen sind ein grauen, aber versuch es mal hiermit:

Code:

---

#main .mod_navigationMain li.active.Kongressorganisation {
    background-image: url("../../tl_files/trisense/photos/Kongress_active.jpg");
}

---

Wenn du "background-image" benutzt, sparst du dir CSS und ggf. Arbeit falls der Hintergrund mal angepasst werden soll.

Das hier muss auch angepasst werden, du kannst nicht allen Menüpunkten das gleiche Bild zuweisen, jedoch unterschiedliche Bilder erwarten.

Code:

---

#main .mod_navigationMain li.active {
background: url("../../tl_files/trisense/photos/Veranstaltungstechnik_active.jpg") center top no-repeat;
}

---

---

InitArt, du bist der beste!

du hast mir den tag gerettet!
super!
so einfach! und schwupps klappt´s! du hast mir genau das richtige geschrieben!

das mit dem "background-image" hab ich noch nicht verstanden, also, wo und wie ich das einfügen kann/ muss/ soll,
aber für´s erste bin ich mit der jetztigen situation sehr glücklich!
kannst ja mal schauen!

danke! danke!


wenn du mir jetzt noch einen tipp gibst,
wie ich zwei artikel NEBENeinander (links text, rechts bild) positionieren kann
(im moment gelöst mit "im artikel bild einfügen und rechts oben positionieren")
wäre das der knaller!

Packe die Navigation in den Header, dann erstellst du ein zwei Spalten Layout und gibts beiden Spalten 50% der Breite (z.B.).
Das Artikel Modul muss dann auch noch in der rechten Spalte eingefügt werden.
Nun erstellst du zwei Artikel in der gleichen Seite, wobei das Bild in der rechten Spalte angezeigt werden soll.

Alternativ könntest du das Inhaltselement "ce_image" via CSS rechts platzieren.

Zitat:

---

Zitat von InitArt

Packe die Navigation in den Header, dann erstellst du ein zwei Spalten Layout und gibts beiden Spalten 50% der Breite (z.B.).
Das Artikel Modul muss dann auch noch in der rechten Spalte eingefügt werden.
Nun erstellst du zwei Artikel in der gleichen Seite, wobei das Bild in der rechten Spalte angezeigt werden soll.

Alternativ könntest du das Inhaltselement "ce_image" via CSS rechts platzieren.

---

vielen dank für die tipps!
ich werde es ausprobieren! :)