webForumDet fria alternativet

Problem med pseudoklasser tillsammans med selektor

HTML & CSS

0 svar · 142 visningar · startad av dectgap

Medlem sedan sep. 20021 655 inlägg
Frågan#1

Jag håller på att göra en meny och har lite problem med att markera aktuell sida i menyn.

Aktuell kod:

[b]style[/b]:
a {
  padding-left: 12px;
  color: #00f;
  text-decoration: none;
}

a:link, a:visited {
  background: url(yel_dot.gif) no-repeat 0% 50%;
}

a:hover, a:active {
  background: url(red_dot.gif) no-repeat 0% 50%;
}

a.selected:link, a.selected:visited, a.selected:hover, a.selected:active {
  background: url(red_dot.gif) no-repeat 0% 50%;
}

div.submeny a.selected:link, div.submeny a.selected:visited, div.submeny a.selected:hover, div.submeny a.selected:active {
  background: url(red_dot.gif) no-repeat 0% 50%;
}

div.submeny {
  display: none;
  margin-left: 10px;
  line-height: 150%;
  font: 10px Verdana, Helvetica, Arial, sans-serif;
}

div.submeny a:link, div.submeny a:visited {
  background: url(yel_dot_s.gif) no-repeat 0% 50%;
}

div.submeny a:hover, div.submeny a:active {
  background: url(red_dot_s.gif) no-repeat 0% 50%;
}

[b]html-kod[/b]:
 <a href="#" onclick="ocSubmeny('avdelningar');">Avdelningar</a><br />
 <div id="avdelningar" class="submeny">
 <a href="#" class="selected">Minior</a><br />
 <a href="#">Junior</a><br />
 <a href="#">Patrull</a><br />
 <a href="#">RS</a><br />
 <a href="#">Ledare</a><br />
 </div>

red_dot.gif och yel_dot.gif är små prickar där den röda används för att markera vilken menydel man står vid. red_dot_s.gif och yel_dot_s.gif är mindre varianter av prickarna, som används för submenyer.

Menyn fungerar nästan som det är tänkt.
När man går in på en sida på menyn ska jag genom php lägga till ett klass-attribut. I kod-stycket ovan är man inne på "Minior"-sidan. Problemet är att jag vill ha red_dot_s.gif för att markera "Minior", eftersom det är en submeny, men webbläsaren använder istället red_dot.gif (den större varianten).

Se problemet "in action" här:
http://roslund.homeip.net/mattias/fosie/030615.html
Notera att Minior-pricken är större än Junior-pricken.

EDIT:
Sicket pucko jag är då.
Allting fungerade precis som jag hade skrivit att det skulle fungera. Jag hade bara glömt ändra red_dot.gif till red_dot_s.gif när jag kopierade koden.

263 ms totalt · 4 externa anrop · v20260731065814-full.e96017d9
125 ms — deklarationer (db)
0 ms — hämta statistik (cache)
133 ms — hämta tråd, inlägg och bilagor (db)
127 ms — ändringar (db)