CSS :hover Funktion

Avignon

Hallo!

Sicherlich werden einige jetzt schmunzeln, aber ich habe da ein Problem mit der :hover-Funktion.

Hier ein Beispiel, um mich verständlich zu machen:
[Blockierte Grafik: http://www.syndicat-apiculture-vaucluse.com/divers/css01.jpg]

Bei dieser Seite handelt es sich um die Seite "Historique". Ich hätte aber gerne, dass der Link in der senkrechten Menüleiste eine andere Farbe hat, wenn diese Seite aktiv ist.
Hier, so wie ich es hinbiegen möchte:
[Blockierte Grafik: http://www.syndicat-apiculture-vaucluse.com/divers/css02.jpg]

Hier der Code meiner CSS-Datei:

#leftColumn1 ul {
margin: 0px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
#leftColumn1 ul li {
list-style: none;
display: inline;
}#leftColumn1 ul li a {
display: block;
padding: 4px 4px 4px 10px;
background: url(images/li-dot.gif) no-repeat left top;
}
#leftColumn1 ul li a:hover {
text-decoration: none;
background-color: #EFEFEF;
background-image: url(images/li-dot.gif);
background-repeat: no-repeat;
background-position: left top;
}

Irgendwie muss es eine Funktion geben, die Einfluss auf die Farbe und Schrift des Links hat, der angezeigt wird.

**alpines**

Die html für jeden Eintrag ist doch unterschiedlich oder nicht? Setz einfach das Inline-CSS auf style="color: #Farbcode" und schon ist es gefärbt.
Hover dient ja nur dazu, dass wenn man mit der Maus auf dem Link hält sich die Farbe ändert.

Avignon

Zitat von alpines

Die html für jeden Eintrag ist doch unterschiedlich oder nicht? Setz einfach das Inline-CSS auf style="color: #Farbcode" und schon ist es gefärbt.

Es soll aber nur den Link der angezeigten Seite in einer anderen Farbe anzeigen.

PainTain

Ich habe das bei meiner Seite folgend gelöst:

Hier mal ein Beispiel-Menü, so wie deins:

PHP

<div id="panel">
	<ul class="menu-nav menu-nav-list" style="margin-top: 10px; margin-bottom: 0px;">  
		<li<?php if ($page == "home") { echo ' class="active"';} ?>>
			<a class="menu" href="/index.php"> &nbsp;Home</a>
		</li>
		<li<?php if ($page == "projects") { echo ' class="active"';} ?>>
			<a class="menu" href="/index.php?page=projects"> &nbsp;Projects</a>
		</li>
		<li<?php if ($page == "downloads") { echo ' class="active"';} ?>>
			<a class="menu" href="/index.php?page=downloads"> &nbsp;Downloads</a>
		</li>
		<li<?php if ($page == "contact") { echo ' class="active"';} ?>>
			<a class="menu" href="/index.php?page=contact"> &nbsp;Contact</a>
		</li>
	</ul>
</div>

Alles anzeigen

Die Variable $page musst du entsprechend füllen, welche Seite halt derzeit aktiv ist.
Und um den Link dann eben einzufärben, musst du noch die die Klasse "active" schreiben.

So könnte die dann z.B. aussehen

Code

.active {
	color: #EEE /* entsprechend anpassen */
}

**alpines**

Solange es getrennte HTML-Dateien sind kann man das doch für jeden Link einzeln schreiben.
Wenn es mehrere werden und keine HTML Dateien vorhanden sind, dann ist die Methode von PainTain die bessere.

i2c

Und als kleine Randbemerkung - den a tag der aktuellen Seite in der Navi entfernen bzw. durch ein strong ersetzen. Links sollten nie auf sich selbst zeigen

Avignon

Also ich erstelle meine Website mit DW. Habe 2 Template-Files, wobei ich die senkrechte Menüleiste aus dem Template genommen habe.

So sieht der Code dieses Menus aus:

Code

<div id="contentWrapper"><div id="leftColumn1"><div id="leftColumnContent"><!-- InstanceBeginEditable name="Sidebar Info" --><h3>Qui sommes-nous</h3>  <ul>  <li> <a href="/qui-sommes-nous-statuts.html">Statuts</a> </li>  <li><a href="/qui-sommes-nous-historique.html">Historique</a></li>  <li><a href="/qui-sommes-nous-composition.html">Composition Bureau</a></li>  <li><a href="/qui-sommes-nous-adherents.html">Adhérents</a></li>  <li><a href="qui-sommes-nous-contact.html">Contact</a></li>  <li><br /></li>                      </ul>

Erst einmal mille merci für Eure Erklärungen, wer's mal versuchen, umzusetzen.

Avignon

Dies ist der Code dieser Menüleiste:

<h3>Qui sommes-nous</h3>
<ul>
<li> <a href="/qui-sommes-nous-statuts.html">Statuts</a> </li>
<li><a href="#">Historique</a></li>
<li><a href="/qui-sommes-nous-composition.html">Composition Bureau</a></li>
<li><a href="/qui-sommes-nous-adherents.html">Adhérents</a></li>
<li><a href="qui-sommes-nous-contact.html">Contact</a></li>
<li><br /></li>

</ul>

Es ist die Seite /qui-somme-nous-historique.html

Was ist da falsch dran?

Awesome

Zitat von PainTain

Ich habe das bei meiner Seite folgend gelöst:

Hier mal ein Beispiel-Menü, so wie deins:

PHP

<div id="panel">
	<ul class="menu-nav menu-nav-list" style="margin-top: 10px; margin-bottom: 0px;">  
		<li<?php if ($page == "home") { echo ' class="active"';} ?>>
			<a class="menu" href="/index.php"> &nbsp;Home</a>
		</li>
		<li<?php if ($page == "projects") { echo ' class="active"';} ?>>
			<a class="menu" href="/index.php?page=projects"> &nbsp;Projects</a>
		</li>
		<li<?php if ($page == "downloads") { echo ' class="active"';} ?>>
			<a class="menu" href="/index.php?page=downloads"> &nbsp;Downloads</a>
		</li>
		<li<?php if ($page == "contact") { echo ' class="active"';} ?>>
			<a class="menu" href="/index.php?page=contact"> &nbsp;Contact</a>
		</li>
	</ul>
</div>

Alles anzeigen

Die Variable $page musst du entsprechend füllen, welche Seite halt derzeit aktiv ist.
Und um den Link dann eben einzufärben, musst du noch die die Klasse "active" schreiben.

So könnte die dann z.B. aussehen

Code

.active {
	color: #EEE /* entsprechend anpassen */
}

Richtig so.
Dies kann man nur so Lösen, anders geht es mMn nicht.