visited Link: per CSS ein Bild anzeigen

[julieann]

Ich möchte gern bei meiner Navigation das Element "visited" verändern. Grundsätzlich weiß ich ja, wie das mit CSS geht.
Die Siete:

http://www.oecocolor.de

Ich möchte nun,dass neben den grünen Balken ein Haken erscheint,falls die Seite bereits besucht wurde. Dazu habe ich ein Bild erstellt und im CSS ( http://www.oecocolor.de/css/popupaus.css )
folgendes eingefügt:

ul.menu{z-index:2; position: relative;top: 235px; float: right; margin:0;padding:10px;list-style-type:none;text-align:right;display:block;font: bold 0.9em 'Arial', sans-serif;line-height:165%;width:135px}
ul.menu li{margin:0;padding:1px;border-top:0px ;border-bottom:0px;}
ul.menu li a{text-transform: uppercase; display:block;text-decoration:none;color:#fff;background:#009933;margin: 0 0 0 0; padding: 0 10px 0 0;width:110px;}
ul.menu li a:visited{color: #fff ; background:#009933 url("../images/haken.gif") no-repeat 110px; }
ul.menu li a:hover{color: #fff ; background:#026724 url("../images/arrow.gif") no-repeat 0 7px;}

Er zeigt den Haken aber nur innerhalb es Blocks an, ich kann ihn nicht darüber hinaus nach rechts verschieben. Mir wäre rechts daneben aber lieber. Weiß jemand Rat?

 

[Maik]

Hi,

hast du auch mal die Links besucht, damit die :visited-Pseudoklasse zum Zuge kommt?

Bei mir funktioniert's nämlich tadellos.



mfg Maik

 

[julieann]

Ja,habe gerade ein Problem bemerkt/ausgemerzt. Aber ich kriege die Haken nciht rechts nach außen neben die Navigation?

 

[Maik]

So auch nicht?

ul.menu li a:visited{color: #fff ; background:#009933 url("../images/haken.gif") no-repeat right top; }

mfg Maik

 

[julieann]

Ja, so richtet er es oben rechts aus. Aber weißt du,was ich meine? Am liebsten hätte ich es außerhalb des grünen Balkens der Navigation, also rechts neben den Balken (weißer Hintergrund).

 

[Maik]

Dann müsstest du das Menü etwas umstrukturieren:

<li><a href="#"><span>Linktext</span></a></li>

Das <span>-Element erhält den derzeitigen grünen Hintergrund, und das <a>-Element das Hintergrundbild.

Wenn ich mir meinen Schnappschuß von eben betrachte, ist es ratsam, zunächst mal die gesamte Menübreite aufzustocken, da es darin derzeit ziemlich eng zugeht.

Für das <a>-Element wird dann ein rechter Innenabstand festgelegt, damit das <span>-Element einen Abstand zu dessen Hintergrundbild einhält.

mfg Maik

 

[julieann]

Habe das auf der index-seite mal eingefügt. ABer irgendwie passt das mit meiner Syntax so noch nicht

	<ul class="menu">
<li><a href="wir.php" title="Wir über uns"><span class="menuinnen">Wir &uuml;ber uns</span></a></li>
<li><a href="produkte.php" title="Produktinfo"><span class="menuinnen">Produktinfo</span></a></li>
<li><a href="anwendung.php" title="Anwendungen"><span class="menuinnen">Anwendungen</span></a></li>
<li><a href="einbau.php" title="Einbau"><span class="menuinnen">Einbau</span></a></li>
<li><a href="vertrieb.php" title="Vertrieb"><span class="menuinnen">Vertrieb</span></a></li>

</ul>

und im CSS:

.menuinnen {

padding-right: 10px;

}
a.menu2:link, a.menu2:visited {margin-left: 8px;text-decoration: none; font: 0.9em 'Arial', sans-serif; color:#000000; position: relative; top: 10px;}


ul.menu{z-index:2; position: relative;top: 235px; float: right; margin:0;padding:10px;list-style-type:none;text-align:right;display:block;font: bold 0.9em 'Arial', sans-serif;line-height:165%;width:135px}
ul.menu li{margin:0;padding:1px;border-top:0px ;border-bottom:0px;}
ul.menu li a{text-transform: uppercase; display:block;text-decoration:none;color:#fff;background:#009933;margin: 0 0 0 0; padding: 0 10px 0 0;width:110px;}
ul.menu li a:visited{color: #fff ; background:#009933 url("../images/haken.gif") no-repeat right top; }
ul.menu li a:hover{color: #fff ; background:#026724 url("../images/arrow.gif") no-repeat 0 7px;}

ul.menu li a.current,ul.menu li a.current:hover{background:#026724 url("../images/arrow.gif") no-repeat 0 7px;}

 

[Maik]

Du hast meine Anleitung auch falsch umgesetzt.

Das <span>-Element erhält den derzeitigen grünen Hintergrund, und das <a>-Element das Hintergrundbild.


Für das <a>-Element wird dann ein rechter Innenabstand festgelegt, damit das <span>-Element einen Abstand zu dessen Hintergrundbild einhält.

Übrigens ist die Klasse menuinnen bei Nutzung eines entsprechenden Selektors für Nachfahren überhaupt nicht erforderlich.

ul.menu li a span { ... }

mfg Maik

 

[julieann]

Ich verstehe zwar jetzt, was du meinst (glaube ich doch zumindest ). Aber wie setze ich dann das hover etc. um? Wenn ich das grün doch dem span Element zuweise?

 

[Maik]

Was hälst du hiervon?

ul.menu li a:hover span { ... }

oder auch

ul.menu li:hover a span { ... }

mfg Maik