XHTMLforum - Hintergrundfarbe eines aktivierten Links

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Hintergrundfarbe eines aktivierten Links (http://xhtmlforum.de/showthread.php?t=40350)

Hintergrundfarbe eines aktivierten Links [gelöst]

Hallöchen
als Newbie hab ich hier mal ne Frage, die allen wohl etwas bescheuert vorkommen muss..
Ich würde gerne ein Menu erstellen, in welchem die aktiven Links eine bestimmte Hintergrundfarbe annehmen. Nach dem Aktivieren eines anderen Links sollte die Hintergrundfarbe des vorher aktiviterten Links wieder seine Ursprungsfarbe und der neu geöffnete Link sollte dann die neue Hintergrundfarbe annehmen.
Hab das mal so versucht:
Im css Stylesheet hab ich den folgenden Eintrag hinterlegt:

Code:

a.linkleiste {

        color: black;

        font-size: 85%;

        font-weight: bold;

        text-decoration: none;

        background-color: #a4b4b4;

        border-left: none;

        border-top: none;

        border-right: 1px solid;

        border-bottom: 1px solid;

        }

a.linkleiste:hover, a.linkleiste:focus, a.linkleiste:active  {

        color: black;

        font-size: 85%;

        font-weight: bold;

        text-decoration: none;

        background-color:  #e9eded;

        border-left: 1px solid;

        border-top: 1px solid;

        border-right: none;

        border-bottom: none;        

        }

In dem entsprechenden Block Bereich:

Code:

<a class="linkleiste" href="?page=main">Home </a>

<a class="linkleiste" href="?page=impressum">Impressum </a>

Grundsätzlich funktioniert das, jedoch leider nicht ganz wie ich möchte...
Mein Ziel ist es, dass wenn ein Link angewählt ist und der Besucher sich auf der entsprechenden Seite befindet, die Hintergrundfarbe des entsprechenden Links wie in a.linkleiste:hover bestehen bleibt, bis dass der Besucher eine andere Seite besucht...
Also, wenn ich "Home" klicke, sollte die Hintergrundfarbe #e9eded bleiben, bis ich wieder auf "Impressum" klicke, dann sollte die Hintergrundfarbe von "Impressum" die Farbe #e9eded haben, "Home" sollte dann wieder die Hintergrundfarbe #a4b4b4 haben.
Kann mir jemand verraten, was ich falsch mache oder wie ich mein Ziel erreichen könnte?

Zitat:

Zitat von fidel

Mein Ziel ist es, dass wenn ein Link angewählt ist und der Besucher sich auf der entsprechenden Seite befindet, die Hintergrundfarbe des entsprechenden Links wie in a.linkleiste:hover bestehen bleibt, bis dass der Besucher eine andere Seite besucht...

Um den jeweils aktiven Menüpunkt zu markieren könntest du ihm eine Klasse zuordnen und dieser anschließend die gewünschten Eigenschaften zuweisen.

Und da es zurecht als logischer gilt, daß Menülinks nicht auf sich selber zeigen, würde ich Dir empfehlen, den Link auf der entsprechenden Seite zu entfernen und stattdessen z.B. ein <strong> einzusetzen (das hat im Gegensatz zu <span> auch semantisch eine Funktion und sieht auch ohne CSS gut aus), dieses erstmal genauso zu definieren wie <a> (nach dem Prinzip #nav a, #nav strong { ... }, evtl. font-weight anpassen) und dann entsprechende Redefinitionen bzgl. Farbe etc. vorzunehmen (nach dem Prinzip #nav a:hover, #nav strong { ... }).

Übrigens solltest Du Dein Menü als Liste <ul> darstellen; das ist in zeitgemäßem Webdesign de facto Pflicht, was ich heute bestimmt bereits zum dritten Mal schreibe ;)

Habt Dank! Nun gut, ich versuchte das mal in meinem Sinne nachzubilden:
css Stylesheet:

Code:

.linkleiste strong {

        color: black;

        font-size: 85%;

        font-weight: bold;

        text-decoration: none;

        background-color: #a4b4b4;

        border-left: none;

        border-top: none;

        border-right: 1px solid;

        border-bottom: 1px solid;

        list-style: none;

        }



.linkleiste, .linkleiste a {

        color: black;

        font-size: 85%;

        font-weight: bold;

        text-decoration: none;

        background-color: #a4b4b4;

        border-left: none;

        border-top: none;

        border-right: 1px solid;

        border-bottom: 1px solid;

        list-style: none;

        }



.linkleiste a:hover, .linkleiste a:focus, .linkleiste a:active, .linkleiste strong  {

        color: black;

        font-size: 85%;

        font-weight: bold;

        text-decoration: none;

        background-color:  #e9eded;

        border-left: 1px solid;

        border-top: 1px solid;

        border-right: none;

        border-bottom: none;        

        }

Im html Teil:

Code:

<strong>

<ul class="linkleiste">

        <a href="./?page=main">Home </a>

        <a href="./?page=impressum">Impressum </a>

</ul>

</strong>

Nun wird meine Linkleiste nicht mehr am linken ausseren Rand des div-Bereichs angezeigt, sondern erscheint nach rechts verschoben. Das mit der Hintergrundfarbe hat sich jedoch nicht geändert.. Möchte gerne eine horizontale Navigation, in welcher der Hintergrund des aktivierten Links eine bestimmte Farbe annimmt...
Ehm, heiko_rs, wie meinst Du, Links, die auf sich selbst zeigen? Sorry, versteh nicht...

Dir fehlen noch die <li>s, die jeden Link einschließen müssen. "Nicht auf sich selber zeigen" bedeutet, daß man auf der Seite "Kontakt" den gleichnamigen Link nicht anklicken kann (wozu auch, man ist ja bereits dort). Dorthin wird stattdessen ein <strong> gesetzt. Das Ganze sähe dann so aus:

Code:

<ul id ="nav">

   <li><a href="#">Home</a></li>

   <li><strong>Kontakt</strong></li>

   <li><a href="#">Impressum</a></li>

</ul>

Für eine horizontale Anordnung bekommt #nav li ein float: left; und eine Breite, und darin dann #nav li a mit display: block; darstellen (und #nav li strong erstmal analog definieren, und dann Farben etc. anpassen).

In der CSS am Besten erstmal alle Standard-Abstände auf Null setzen (die erste der folgenden beiden Regeln) und die Listenpunkte entfernen (und dann alles wie gewünscht anpassen) :

Code:

* {

margin: 0;

padding: 0; }



#nav {

list-style: none; }

Ich Idiot! :oops:
Total Fehlüberlegung!... Muss natürlich für jede Seite eine eigene "Linkleiste" erstellen und dort der aktuellen Seite dem Link "nach Ort und Stelle" die Linkeigenschaft nehmen!
Danke!!!