Zur Navigation

current Link in anderer Farbe und Link JPG

1 uwe

Hallo,
ich habe folgendende CSS Datei für das Menü.

2 Fragen dazu:
1.
Jetzt will ich den aktuellen Link in einer anderen Farbe darstellen.
Hier wird aber das Format von dem Link nicht übernommen
.current { background-color: red;}

Wie und wo ist es richtig?

2.
Bei bestimmten Menüpunkten soll vor dem Text ein GIF eingefügt werden.
(Braucht nur in der ersten Grundebene)

so in etwa
background: url(pfeil88.gif) no-repeat padding-left: 20 #FFF;

Gruss Uwe


#menue1 {
position: relative;
}
#menue1 ul {
list-style: none;
margin: 0;
padding: 0;
}
#menue1 li.level1 {
width: 200px;
padding: 2px 5px 2px 5px;
font: normal 1em Helvetica,Arial,sans-serif;
text-decoration: none;
border: 1px solid;
border-color: #3380cc #000 #000 #3380cc;
background:#B0E0E6;
color: #fc0;
}
#menue1 li.level2 {
width: 180px;
margin-top: 2px;
margin-left: 5px;
padding: 2px 5px;
border: 1px solid;
border-color: #3385ff #000 #000 #3385ff;
background-color: #0472b3;
color: #fc0;
//kopfmenu
color: red;
}
#menue1 li.level3 {
width: 140px;
margin-top: 2px;
margin-left: 15px;
padding: 2px 5px;
border: 1px solid;
border-color: #39f #000 #000 #39f;
background-color: #048adb;
color: #fc0;
}
#menue1 li.level1 a, #menue1 li.level2 a, #menue1 li.level3 a {
display: block;
padding-left: 5px;
text-decoration: none;
}
#menue1 li.level1 a:link,
#menue1 li.level1 a:visited,
#menue1 li.level1 a:active {
//Kopfhintergrund
background-color: transparent;
color: #e1cba2;
color: black;
}
#menue1 li.level1 a:hover {
background-color: transparent;
//color: #eee2cc;
width: auto;
}
#menue1 li.level2 a:link, #menue1 li.level3 a:link,
#menue1 li.level2 a:visited, #menue1 li.level3 a:visited,
#menue1 li.level2 a:active, #menue1 li.level3 a:active {
padding-left: 9px;

//Link Hintergrund
background-color: transparent;
color: #eee2cc;
border: 1px solid;
}
#menue1 li.level2 a:link,
#menue1 li.level2 a:visited,
#menue1 li.level2 a:active {
border-color: #0472b3;
}
#menue1 li.level3 a:link,
#menue1 li.level3 a:visited, #menue1 li.level3 a:active {
border-color: #048adb;
}
#menue1 li.level2 a:hover, #menue1 li.level3 a:hover {
padding-left: 12px;

background: url(pfeil3.gif) no-repeat left center #FFF;
background-color: blue;
color: #fff;
border: 1px solid;
}
#menue1 li.level2 a:hover {
border-color: #035485 #048adb #048adb #035485;
}
#menue1 li.level3 a:hover {
border-color: #0472b3 #24aafb #24aafb #0472b3;
}
#menue1 .level1 a span.info {
display: none;
}
#menue1 .level1 a:hover span.info {
position: absolute;
display: block;
top: 30px;
left: 220px;
width: 200px;
background: #035485;
color: #eee2cc;
padding: 10px;
font-variant: normal;
text-align: left;
border: 1px solid;
border-color: #3385ff #000 #000 #3385ff;
}


//hier mein Versuch
//Dabei wird aber das Format von dem Link aber nicht übernommen
.current { background-color: red;
}

05.01.2009 18:56

2 Jörg Kruse

Jetzt will ich den aktuellen Link in einer anderen Farbe darstellen.
Hier wird aber das Format von dem Link nicht übernommen
.current { background-color: red;}

Damit diese Definition die anderen überschreibt, müssen möglicherweise im Selektor analog die entsprechenden Elternelemente mit aufgeführt werden.

#menue1 li.level1 a.current

Gegebenenfalls müssen hierbei auch noch die Pseudoformate (:hover etc.) genannt werden.

Bei bestimmten Menüpunkten soll vor dem Text ein GIF eingefügt werden.
(Braucht nur in der ersten Grundebene)

so in etwa
background: url(pfeil88.gif) no-repeat padding-left: 20 #FFF;

So wär's syntaktisch korrekt (dem #FFF fehlt der Bezug):

background: url(pfeil88.gif) no-repeat; padding-left: 20px;

In CSS werden Kommentare übrigens nur durch "/*" und "*/" gekennzeichnet, nicht durch "//"

/* dies ist ein Kommentar */

05.01.2009 20:23

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]