Navigation und CSS

Hallo,

bin gerade dabei eine alte site in Contao nachzubauen. Die Hauptnavigation besteht aus 7 untereinanderstehnden Textlinks welche als Hintergrund bunte Quadrate haben, die Farbe wechselt beim Darüberfahren bzw. Anklicken. Alles im prinzip recht simpel aber ich bekomme es nicht geregelt. diese Quadrate in Contao einzufügen. Die Navigation besteht aus einem einfachen Navigationsmodul. Ursprünglich wurden die Quadtrate per CSS so aufgerufen:

HTML-Code:

---

<a href="kontakt.html" class="navlinks">Kontakt</a>

---

wobei in "navlinks" der background Pfad angegeben ist.
Gebe ich nun im Nav Modul als eigenes CSS "navlinks" an, so erscheint (logischerweise) nur ein einziges Quadrat am Anfang des menüs, es soll aber vor allen menüpunkten erscheinen.
ich stehe jetzt etwas auf dem Schlauch - Wo liegt hier der Denkfehler?
danke!

gruss
Thomas

Wenn Du dem Modul die Klasse gibts, dann hat auch nur das Modul den per CSS definierten Hintergrund und nicht der Link.

Ohne Dein CSS zu verändern könntest Du jeder betroffenen Seite in den Einstellungen .navlinks mitgeben. Es ist aber vermutlich zielführender Dein CSS anzupassen. Aus dem Bauch heraus:

Code:

---

nav.navlinks > li:hover{
background-image:foobar.svg;
background-position: ...
}

---

Danke, es funktioniert, wenn ich die css Klasse "navlinks" jeder Seite mitgebe :)

Ja klar - das ist die nicht ganz so schöne Lösung, weil Du nicht vergessen darfst die Klasse mitzugeben ... ;-)

soweit funktioniert das - nur:
den Link der gerade geöffneten Seite kann ich in contao nicht auszeichnen, also nicht :active, sondern der Zustand danach, quasi wenn der link gar keiner mehr ist. Im "normalen" CSS ohne cms kann man einfach diesen Link mit einer zusätzlichen Klasse oder ID auszeichnen, in Contao habe ich ja keinen direkten Zugriff auf den Navi Code.....hmmm
was kann man da machen?
Danke
Thomas

Hat der nicht die Klasse .active?

Kommt drauf an welche Elemente Du gestaltet hast und welche Contaoversion Du verwendest
In Contao 3.5 hast Du folgende Elemente bei der Standardnavi zur Verfügung

• li-Element .active
• span
• span .active

Contao 4

• li-Element .active
• strong
• strong .active

Sollte er eigentlich haben ;) Außerdem ist er kein Link mehr, sondern ein <span> (Contao 3) bzw <strong> (Contao 4)

Danke für die Aworten auf die simplen Dinge ;)
.active löst das Problem span zeichnet sämtliche Links -auch im Text- mit aus.

Das span müsstest Du natürlich auf die Navigation bzw. Hauptnavigation eingrenzen.
.active musst Du auch aufpassen, weil es sowohl beim li-Element als auch beim span bzw. strong (Contao 4) vorkommt und wenn Du mehrere Navigationen verwenden solltest oder unterschiedliche Gestaltungen in unterschiedlichen Ebenen vorkommen, musst Du auch da Einschränkungen machen.

Zitat:

---

Zitat von mlweb

• li-Element .active
• span
• span .active

Contao 4

• li-Element .active
• strong
• strong .active

---

Ich habe gerade ein Aha-Erlebnis - weiß jemand, warum hier beim aktiven Menüpunkt von span auf strong gewechselt wurde?

Stichwort(e) „korrekte Semantik“, siehe zB hier:
https://github.com/contao/core/issues/6336


Gesendet von iPhone mit Tapatalk Pro

M-hm, auch eine Form der Beschäftigungstherapie... Dann kann man jetzt das strong-Tag per CSS neutralisieren oder noch ein Template ändern, wenn man's nicht fett haben will.

Entweder reset.css oder in deinem css
nav strong {font-weight: normal}


Gesendet von iPhone mit Tapatalk Pro