✔ Gerade besuchte Seite hervorheben

A

AnjaR

Grünschnabel
Hallo zusammen!

ich möchte eine Navigation mit unterschiedlichen Linkzuständen für jeden einzelnen Menüpunkt erstellen. Das funktioniert auch soweit. ich möchte jedoch das jedes seite ein anderes navigationsbild hat wenn ich gerade auf der seite bin. ich würde dies gerne über <li id=aktuell ... machen. Meine Frage ist jetzt: wie kann ich im css auf die einzelnen aktuellen bilder zugreifen? Bin noch Anfänger, deshalb weiss ich nich ob das ne überflüssige Frage ist ;-) die bilder wechseln schon beim hover, active zustand aber ich weiss nicht wie ich genau im css auf #aktuell zugreifen muss... :confused:

Für einen Tipp wär ich sehr dankbar! :)



hier mal mein aktueller html-part der navi:
HTML: 
<div id="navigation">
        <ul>
             <li id="aktuell"><a class="link1" href="index.html"></a></li>
             <li><a class="link2" href="überuns.html"></a></li>
            <li><a class="link3"  href="#" ></a></li>
            <li><a class="link4"  href="#" ></a></li>
             <li><a class="link5"  href="#" ></a></li>
        </ul>
             <br style="clear:both;" />
   
</div>



und der entsprechende css-part:



CSS: 
/******NAVIGATION*********/
#navigation{
	
	margin: 200px 0 20px 10px;
}


#navigation ul{
	list-style: none;
	margin: 0;
	padding: 0;

}



#navigation li {
	float:left;
	margin-left:5px;
	
	}
	

#navigation a {
	display:block;
	height:83px;
	margin-left: 15px;	
}	
/*************LINK1***/

a.link1:link,a.link1:visited {
	width:98px;
	background-image:url(../images/home-ohne.png);
	
	
}


a.link1:hover {
	width:98px;
	background-image:url(../images/home-grau.png);
	
	
	
}



 a.link1:active,a.link1:focus{
	 width:98px;
	background-image:url(../images/home-mit.png);
	 
	 
	 
}


#navigation#aktuell a{
	
	
	
}
 
Zuletzt bearbeitet von einem Moderator:
Hi,

nutze bitte zukünftig in deinen Beiträgen die Syntax-Highlighter (hier: [code=html] [/code], [code=css] [/code], [code] [/code]) für deine Quellcode-Präsentationen - vielen Dank!

Grundsätzlich lautet hier der Selektor für den ersten Menüpunkt "Home":

CSS: 
#navigation #aktuell a.link1:link, #navigation #aktuell a.link1:visited {
background-image:url(../images/home-xxx.png);
}

Zu beachten sind im Vergleich zu seinem Ansatz die Leerzeichen zwischen den ID-Bezeichnern, da es sich hier um einen Selektor für Nachfahren handelt.

Sofern es sich um dieses Hintergrundbild handeln sollte, werden die bestehenden gruppierten Selektoren folgendermaßen erweitert:

Code: 
a.link1:active,a.link1:focus, #navigation #aktuell a.link1:link, #navigation #aktuell a.link1:visited {
width:98px;
background-image:url(../images/home-mit.png);

}


Für den zweiten Menüpunkt gilt demnach:
HTML: 
<div id="navigation">
        <ul>
             <li><a class="link1" href="index.html"></a></li>
             <li id="aktuell"><a class="link2" href="überuns.html"></a></li>
             <li><a class="link3"  href="#" ></a></li>
             <li><a class="link4"  href="#" ></a></li>
             <li><a class="link5"  href="#" ></a></li>
        </ul>
        <br style="clear:both;" />
</div>

CSS: 
#navigation #aktuell a.link2:link, #navigation #aktuell a.link2:visited {
background-image:url(../images/xxx-xxx.png);
}
bzw.
Code: 
a.link2:active,a.link2:focus, #navigation #aktuell a.link2:link, #navigation #aktuell a.link2:visited {
...

}


Eine alternative Art der Selektor-Definitionen wird in dem Artikel Highlighting current page with CSS vorgestellt. Hier wird sich stattdessen auf den benannten ID-Bezeichner im <body>-Tag der einzelnen Seiten bezogen.

mfg Maik
 
Ich empfehle dir, dich mit CSS Sprites näher zu beschäftigen.

Bei dieser Technik sind alle Link-Zustände in einer einzigen Grafikdatei vereint, und der entsprechende Bildausschnitt wird mittels background-position im Anzeigebereich des Links sichtbar.

Die Vorteile:

  1. Weniger HTTP-Requests, da nur noch eine einzige Grafikdatei vom Server geladen wird.
  2. Kein kurzes "Flackern" beim erstmaligen Überfahren der Verweise, da zu diesem Zeitpunkt erst die "Hover"-Grafikdatei vom Browser angefordert wird.

Ein Beispiel im kleinen Maßstab, wo ich für jeden Menüpunkt eine gesonderte Grafikdatei verwendet habe, kannst du im zweiten Teil meines Tutorials CSS-Rollover unter dem Abschnitt "CSS-Rollover mit background-position" entnehmen.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück