Wie aktiven Navigationspunkt hervorheben

**maxi62** · 12.12.2009, 17:06

Hi
Ich habe Typolight gerade das erste mal installiert und taste man heran. Als erstes würde ich diese Musik Demo Seite so ändern wollen, das der aktive Menüpunkt im Navigationsmenü farblich oder durch Balken hervorgehoben wird. Also wenn ich auf einer News Seite bin, soll auch News entsprechend hervorgehoben werden.
So recht verstehe ich noch nicht wie man das nun hin bekommt, welches der richtige Weg ist. Könnt ihr mir da Tipps geben?

**Toflar** · 12.12.2009, 17:07

Hi maxi62

Jedes Element im Navi erhält entsprechende CSS-Klassen die du ansprechen und nach Belieben formatieren kannst:

.active für die gerade aktive Seite
.trail für das Elternelement bzw. die Elternelemente der gerade aktiven Seite

**maxi62** · 12.12.2009, 17:12

Und über welchen Menüpunkt komm ich jetzt zu der zuständigen CSS? Wie kann ich die ändern?

**Toflar** · 12.12.2009, 17:17

Uh da gibt's verschiedene Meinungen und Möglichkeiten.

Entweder du brauchst den Editor im Backend. Wenn du willst kannst du dort deine eigenen Stylesheets auch importieren.

Ich bevorzuge die direkte Einbindung via Template und lade dann einfach meine CSS-Files per FTP wie gewohnt in einen vordefinierten Ordner.

**maxi62** · 12.12.2009, 17:30

Mit css bin ich leider nicht sonderlich gut vertraut. Ich hab jetzt mal im Backend bei der music_academy css folgendes hinzugefügt:
.mod_navigation active

und dort andere Schriftfarbe gewält. Aber irgendwie hat ssich nix geändert! Aktiver Link ist immer noch gleich

**planepix** · 12.12.2009, 17:39

Hallo maxi62,

schreibe einmal

Code:

.mod_navigation span.active

als Selektor.

**maxi62** · 12.12.2009, 17:43

Oh ja, das klappt. Danke, ein erster Schritt!
Ich habe jetzt mal Hintergrund und Rahmen farblich gekennzeichnet. Jetzt ist aber der Rahmen immer genauso lang wie der Menüpunkt. Er sollte aber eigentlich immer gleich breit sein. Wie legt man das denn in der CSS fest?

**planepix** · 12.12.2009, 17:45

Dazu schreibst Du für das Listenelement eine feste Breite:

Code:

.mod_navigation li
{
width:120px;
...
}

**maxi62** · 12.12.2009, 18:08

Zitat von planepix

Dazu schreibst Du für das Listenelement eine feste Breite:

Code:

.mod_navigation li
{
width:120px;
...
}

Hmm, also das hab ich noch nicht hin bekommen. Ich weiß nicht wo ich die width:120px einfügen soll. Hab es bei verschiedenen Elementen probiert, ohne Effekt!

**Liebei** · 13.12.2009, 00:45

Hallo max62,

erstmal willkommen im Forum! Nicht böse sein, aber schau dir erstmal folgendes an:

css4you

Und dann lerne das ganz mit der Music Academy Demo kennen. Wenn Du dann spezielle Fragen hast, kannst Du sie gerne stellen, aber das ist wirklich Grundwissen was Du hier Wissen willst.

**nero** · 20.12.2009, 14:16

Ich hätte da auch gerade eine Frage dazu, weiß aber auch nicht nach was ich denn da suchen sollte.
Und zwar würde ich gerne nur dem aktiven Navpunkt ein Zeichen voranstellen z.b. ">". Kann ich das irgendwie über CSS lösen?

**MacKP** · 20.12.2009, 15:38

Hallo nero,
du machst dir ein Bild mit dem gewünschten Zeichen und gibst das dann dem aktiven Menüpunkt als background-img.
Schon hast du das so wie du möchtest.

Viele Grüße