Navigation

[THE_fan]

Servus, hab nen kleines Problemchen.

Eigentlich ist es nichts Wildes, mich stört es aber..

CSS

#ulNavi
{
	height:			30px;
	list-style:		none;
	padding:		0px;
	margin:			0px;
	margin-left:		10px;
	border-top:		5px solid #C0FF3E;
}

.liNavi
{
	background:		#C0FF3E;
	width:			120px;
	height:			30px;
	float:			left;
	text-align:		center;
	padding:		0px;
	margin:			0px;
}
	
.liNavi a:link
{
	background:		#C0FF3E;
	color:			#698B22;
	text-decoration:	none;
	width:			120px;
	height:			30px;
	border-top:		1px solid #C0FF3E;
	border-left:		1px solid #C0FF3E;
	border-right:		1px solid #C0FF3E;
}

.liNavi a:visited
{
	background:		#C0FF3E;
	color:			#698B22;
	text-decoration:	none;
	width:			120px;
	height:			30px;
	border-top:		1px solid #C0FF3E;
	border-left:		1px solid #C0FF3E;
	border-right:		1px solid #C0FF3E;
}


.liNavi a:hover
{
	background:		#ffffff;
	color:			#698B22;
	text-decoration:	none;
	width:			120px;
	height:			30px;
	border-top:		1px solid #cccccc;
	border-left:		1px solid #cccccc;
	border-right:		1px solid #cccccc;
}

.liNavi a:active
{
	background:		#ffffff;
	color:			#698B22;
	text-decoration:	none;
	width:			120px;
	height:			30px;
	border-top:		1px solid #cccccc;
	border-left:		1px solid #cccccc;
	border-right:		1px solid #cccccc;
}

HTML

			  <div id="divNavi"><ul id="ulNavi">
						<li class="liNavi"><a href="#">Hyperlink</a></li>
						<li class="liNavi"><a href="#">Hyperlink</a></li>
						<li class="liNavi"><a href="#">Hyperlink</a></li>
						<li class="liNavi"><a href="#">Hyperlink</a></li>
						<li class="liNavi"><a href="#">Hyperlink</a></li>
						<li class="liNavi"><a href="#">Hyperlink</a></li>
					    </ul>
			  </div>

Das Problem ist nun, wenn ich einen Link anklicke, wird mir die Formatierung von liNavi a:active angezeigt. Das ist auch richtig so. NUR, wenn ich nun irgendwohin, egal ob auf einen anderen Link oder auf einen Buchstaben in der Seite, auf den Header oder den Footer - egal hauptsache irgendwo anders hinklicke, ist die Formatierung weg und es sieht so aus, als wäre kein Link gerade aktiv.
Ich möchte also, dass die Besucher der Page auch nach tausendfachem rumklicken, markieren etc. immernoch den aktiven Link als aktiv angezeigt bekommen.

Ich habe es bisher nicht hinbekommen, dass das klappt.

Ich wäre sehr froh, wenn mir jemanden heflen könnte!



Schonmal vielen Dank! :)

 

[Alti]

Liegt nicht an CSS. Du hast nur gleiche links verwendet (#), und wenn du einen klickst, hast du alle besucht ;) Ergibt sich wenn du die Navigation dann richtig machst.

 

[THE_fan]

Ah super, vielen Dank :)

//edit:
Kann es sein, dass das aber nur mit dem Include funktioniert?
Ich habe nun mal einfach die Links auf "index2.html", "index3.htm",...,"index7.htm" verlinkt. Diese Seiten sind jeweils ein Duplikat von der index.htm. Allerdings führt das nun nicht zum gewünschten Erfolg..
Scheinbar muss man etwas an der CSS rumwerkeln.. Hmm

//edit2:
Man muss wohl die "Aktiv-Status" irgendwo speichern, um ihn an andere Seiten zu übergeben..
Wenn jemand die ganze Datei mal haben möchte, einfach schreiben ;)

 

[gruenspan]

Man muss wohl die "Aktiv-Status" irgendwo speichern, um ihn an andere Seiten zu übergeben..

mach doch den aktiv-status als klasse im CSS und übergib diese jedesmal in der aktuellen datei

<a href="#" class="aktiv">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>

 

[THE_fan]

Jau das wäre natürlich ne Idee...
Wie mache ich es aber, wenn ich Inhalte include? Dann habe ich ja nur bspw. die index.php, die ja quasi statisch ist, nur der Inhalt sich eben verändert..

[...]

CSS

#ulNavi
{
	height:			30px;
	list-style:		none;
	padding:		0px;
	margin:			0px;
	margin-left:		10px;
	border-top:		5px solid #C0FF3E;
}

.liNavi
{
	background:		#C0FF3E;
	width:			120px;
	height:			30px;
	float:			left;
	text-align:		center;
	padding:		0px;
	margin:			0px;
}
	
.liNavi a:link
{
	background:		#C0FF3E;
	color:			#698B22;
	text-decoration:	none;
	width:			120px;
	height:			30px;
	border-top:		1px solid #C0FF3E;
	border-left:		1px solid #C0FF3E;
	border-right:		1px solid #C0FF3E;
}

.liNavi a:visited
{
	background:		#C0FF3E;
	color:			#698B22;
	text-decoration:	none;
	width:			120px;
	height:			30px;
	border-top:		1px solid #C0FF3E;
	border-left:		1px solid #C0FF3E;
	border-right:		1px solid #C0FF3E;
}


.liNavi a:hover
{
	background:		#ffffff;
	color:			#698B22;
	text-decoration:	none;
	width:			120px;
	height:			30px;
	border-top:		1px solid #cccccc;
	border-left:		1px solid #cccccc;
	border-right:		1px solid #cccccc;
}

.liNavi a:active
{
	background:		#ffffff;
	color:			#698B22;
	text-decoration:	none;
	width:			120px;
	height:			30px;
	border-top:		1px solid #cccccc;
	border-left:		1px solid #cccccc;
	border-right:		1px solid #cccccc;
}

HTML

			  <div id="divNavi"><ul id="ulNavi">
						<li class="liNavi"><a href="#">Hyperlink</a></li>
						<li class="liNavi"><a href="#">Hyperlink</a></li>
						<li class="liNavi"><a href="#">Hyperlink</a></li>
						<li class="liNavi"><a href="#">Hyperlink</a></li>
						<li class="liNavi"><a href="#">Hyperlink</a></li>
						<li class="liNavi"><a href="#">Hyperlink</a></li>
					    </ul>
			  </div>

[...]

Um nochmal auf mein Problem zurückzukommen..
Kann mir jemand erklären, wieso das im IE6 wunderbar aussieht und funktioniert, im IE7 aber nicht?
Das sind ja Welten Unterschied! Wie IE und FF^^