Zur Navigation

Navogation: aktive Seite hervorheben / Wo ist der Fehler?

1 Geli

Hallo,
bin am suchen, wo in meinem Code der Fehler steckt!?!
Ich möchte gerne, dass die aktiv angezeigte Seite in der Navigation einen andersfarbigen Button hat und dieser stehen bleibt, solange die Seite geöffnet ist.
Die Befehle hover und aktive funktionieren.

Hier der HTML-Code
 <ul id="navigation">    
    <li id="home"><a href="./home.htm">Home</a></li>  
    <li id="bandx"><a href="./bandx.htm">BandX</a></li>  
    <li id="events"><a href="./events.htm">Events</a></li>
    <li id="sounds"><a href="./sounds.htm">Sounds</a></li>
    <li id="download"><a href="./download.htm">Downloads</a></li>
    <li id="fotos"><a href="./fotos.htm">Fotos</a></li>
    <li id="gaestebuch"><a href="./gaestebuch.htm">Gästebuch</a></li>
    <li id="kontakt"><a href="./kontakt.htm">Kontakt</a></li>
    <li id="links"><a href="./links.htm">Links</a></li>
    <li id="impressum"><a href="./impressum.htm">Impressum</a></li>
  </ul> 

und das CSS

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

ul#navigation li {
	list-style: none;
	float: left;		
}  

li#home a {
	margin-left: 4px;
	margin-bottom: 2px;
	margin-right: 0px; 
	margin-top: 2px;		
	padding: 0px;
	width: 100px;
	height: 30px;
	display: block;
	background-image: url(bilder/button_100_rot.gif);
	background-repeat: no-repeat;
	color: #403c34;
	text-decoration: none;
	line-height: 35px;
	text-align: center;  
	font-size: 14px;
	font-weight: bold;
		  }

li#home a:hover {
	background-image: url(bilder/button_100_blau.gif);  
	background-repeat: no-repeat;
	font-weight: bold;
	margin-left: 4px;
	margin-bottom: 2px;
	margin-right: 0px; 
	margin-top: 2px;	
	padding: 0px;
	width: 100px;
	height: 30px;
	display: block;
	color: #d1c1a8;
	text-decoration: none;
	line-height: 35px;
	text-align: center;
	text-indent: inherit;
	font-size: 14px;	
	  }
	  
li#home a:active {
	background-image: url(bilder/button_100_blau.gif);  
	background-repeat: no-repeat;
	font-weight: bold;	
	margin-left: 4px;
	margin-bottom: 2px;
	margin-right: 0px; 
	margin-top: 2px;	
	padding: 0px;
	width: 100px;
	height: 30px;
	display: block;
	color: #d1c1a8;
	text-decoration: none;
	line-height: 35px;
	text-align: center;
	text-indent: inherit;
	font-size: 14px;	
	  }
	  	  	  
li#home a:hover,li#home a:active, li#home_aktuell a {
    background-image: url(bilder/button_100_blau.gif);  
	background-repeat: no-repeat;
	font-weight: bold;
	margin-left: 4px;
	margin-bottom: 2px;
	margin-right: 0px; 
	margin-top: 2px;	
	padding: 0px;
	width: 100px;
	height: 30px;
	display: block;
	color: #d1c1a8;
	text-decoration: none;
	line-height: 35px;
	text-align: center;
	text-indent: inherit;
	font-size: 14px;		
	  }
       

Würde mich freuen, wenn hier mal ein Experte draufschauen könnte.

Viele Dank!

Gruß Geli

12.07.2011 11:48 | geändert: 12.07.2011 11:50

2 Jörg

li#home a:hover,li#home a:active, li#home_aktuell a {

Die ID home_aktuell ist dem Link zugeordnet und nicht dem Listenpunkt:

    <li id="home"><a href="./home.htm" id="home_aktuell">Home</a></li>

Entsprechend sollte der Selektor so ausschauen:

li a#home_aktuell

12.07.2011 12:57

3 Geli

Hallo Jörg,
ganz ehrlich - ohne Deine Hilfe hätte ich es noch NIE geschafft, eine Seite fertig zu kriegen.

VIELEN DANK!!!!
Passt jetzt!!!

Ich stehe noch ziemlich am Anfang bei diesem Projekt und hoffe, dass es nicht allzu schlimm wird mit meiner Fragerei!

Hätte ich die Macht, Preise für die "besten Internet-Hilfe-Foren" zu vergeben, würde ich hier sofort den 1. Preis platzieren!

Grüsse
Geli

12.07.2011 13:14

4 Jörg

Danke für die Blumen :)

14.07.2011 21:21

Beitrag schreiben (als Gast)





[BBCode-Hilfe]