# visited Link: per CSS ein Bild anzeigen



## julieann (10. März 2010)

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 (10. März 2010)

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 (10. März 2010)

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


----------



## Maik (10. März 2010)

So auch nicht?

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

mfg Maik


----------



## julieann (10. März 2010)

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 (10. März 2010)

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 (10. März 2010)

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 (10. März 2010)

Du hast meine Anleitung auch falsch umgesetzt.



Maik hat gesagt.:


> 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 (10. März 2010)

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 (10. März 2010)

Was hälst du hiervon?


```
ul.menu li a:hover span { ... }
```
oder auch

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

mfg Maik


----------



## julieann (10. März 2010)

Also, ich krieg es irgendwie nicht hin...Ich weiß,was du meinst, und dass ich das in meinem Code noch nicht so mache, aber irgendwie steh ich aufm Schlauch 


```
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:visited a span {color: #fff ; background:#009933 url("../images/haken.gif") no-repeat right top; margin-right: 15px; }
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;}
```

Das reicht ja so nicht bzw ist nich richtig...


----------



## Maik (10. März 2010)

Mmh... kannst du meinen geschriebenen Worten nicht folgen?

Du willst doch, dass der Haken rechts neben dem grünen Hintergrund erscheint, also außerhalb davon, demnach erhält <span>  "background:#009933" und <a> "background:url("../images/haken.gif") no-repeat right top".

Dein Selektor ul.menu li:visited a span kann zudem nicht funktionieren, weil die :visited-Pseudoklasse den Verweisen vorbehalten ist.

mfg Maik


----------

