Aktiver Link Hintergrundfarbe

Moin an alle,

ich habe nun schon ein wenig gegoogelt, aber keine Lösung für mein Problem gefunden:
Ich habe ein Textmenü, welches aus einem CMS generiert wird und möchte die Hintergrundfarbe vom aktiven Link ändern. Dies funktioniert zwar, aber die Hintergründe sind je nach Textlänge unterschiedlich lang und wenn ich width = 140px setze o.Ä. ändert sich nichts. :confused:

Gruß
Apo1337

Moin,

Ich habe ein Textmenü, welches aus einem CMS generiert wird
und möchte die Hintergrundfarbe vom aktiven Link ändern.

Hinweis an Mitlesende: Der aktive Link kann nicht mit HTML/CSS ermittelt werden, sondern muss serverseitig zugesteuert werden. Der so gekennzeichnete Link (class) kann dann per CSS formatiert werden.

funktioniert zwar, aber die Hintergründe sind je nach
Textlänge unterschiedlich lang

Links sind Inline-Elemente. Sie sind nur so groß wie ihr Inhalt. Unterschiedlich lange Texte erzeugen unterschiedlich lange Hintergründe.

und wenn ich width = 140px
setze o.Ä. ändert sich nichts. :confused:

width hat bei Inline-Elementen keinen Effekt.

Mach ein Block-Element daraus und beachte das Box-Model.

Freundliche Grüße,
-Efchen

Moin moin,

Hinweis an Mitlesende: Der aktive Link kann nicht mit HTML/CSS
ermittelt werden, sondern muss serverseitig zugesteuert
werden. Der so gekennzeichnete Link (class) kann dann per CSS
formatiert werden.

Das ist so etwas zu generalisiert vormuliert.

Ein Aktiver Link ist ein geklickter Link der wiederum ganz klar mit CSS beeinflusst werden kann (und auch vom CSS ermittelt wird) , z.b. mach ich gerne blink auf den aktiven link die sich in einem anderen fenster öffnen. Dann ist der Link noch aktive .
Aber wie Efchen sagte ein aktivierten link also ein Menu Punkt kann nicht mit css alleine festegelegt werden , Da bei neuladen der Seite , der link als visited gilt. Somit wären alle bisher besuchten Menues als aktive gekenzeichnet (bzw visited) . Also muss man via Server eine classe etc zuweisen und damit die Farbe etc ändern.

Das ist so etwas zu generalisiert vormuliert.

Nein, Dein Einwand resultiert aus zweierlei Verständnis über den Begriff „aktiver Link“.

Tatsächlich gibt es die Pseudoklasse „active“, die einen aktiven Link kennzeichnet. CSS versteht darunter aber einen Link, der eben angeklickt wurde. Das Aussehen von „:active“ hat der Link aber nur zwischen dem Anklicken und dem neuen Seitenaufbau, für die meisten also gar nicht wirklich sichtbar.

Ich ging davon aus, dass hier die aktive Seite gemeint ist, wie das in den meisten Fällen, wo zu dem Thema eine Frage gestellt ist, gemeint ist. Um in einem Menü die Seite anzuzeigen, die man gerade besucht, reichen die Mittel von HTML und CSS nicht aus.

Moin,

ich habe mit TYPO3 mein Menü generiert und weise darüber jedem NO (Normal Status) die class „linkFarbe“ zu und der aktuellen Seite ACT (Active/Current Status) die class „linkFarbeACT“ zu.
Bei „linkFarbeACT“ lege ich die Hintergrundfarbe fest etc. Das ist ja auch alles nicht mein Problem.

Wichtig ist mir nur, dass jeder Link in dem Menü die selbe Breite hat, mit der die Hintergrundfarbe geändert wird.
In der ersten Antwort stand etwas von block, das scheint mir schon der richtige Lösungsansatz zu sein, da ich dann in der Klasse nur display:block angeben muss und dann die Kästchen die entstehen nur noch formatieren muss im CSS.
Danke Efchen.

Wie würde es aussehen, wenn ich eine Hintergrundfarbe für das ganze Menü wähle und dann bei der aktiven Seite einfach ein Hintergrundbild einfüge, dass die gewünschte Hintergrundfarbe hat? Wie sieht das dann mit der Performance aus, wird die Seite dadurch langsamer? (Zwecks Farbverläufe und sonstiges)

MfG
Apo1337

Hallo.

Ich habe ein Textmenü, welches aus einem CMS generiert wird
und möchte die Hintergrundfarbe vom aktiven Link ändern. Dies
funktioniert zwar, aber die Hintergründe sind je nach
Textlänge unterschiedlich lang und wenn ich width = 140px
setze o.Ä. ändert sich nichts. :confused:

Die Hyperlinks einer Navigationsleiste werden üblicherweise in eine Liste gesetzt (ul-Tags mit li-Tags, in denen die a-Tags für die Hyperlinks stehen).

Schau mal, ob das von dir verwendete CMS auch das li-Element (in dem der aktuelle „Menüpunkt“ enthalten ist) mit einer speziellen Klasse versieht. Die li-Elemente sind standardmäßig Blockelemente mit gleicher Breite innerhalb derselben ul-Liste. Somit würde die Gestaltung des entsprechenden li-Elements dein Problem lösen.

Beispiel bei Drupal7:

Service

Hier ist nicht nur das a-Tag mit einer Klasse versehen worden, sondern auch das li-Tag darumherum. Man könnte hier also „li.active-trail“ mit CSS gestalten (nicht „a.active-trail“) und hätte so etwas, wie du es benötigst.

Also guck mal, ob dein CMS das ähnlich macht.

Gruß
A