<span class> i en <div id> problem...

Tråden skapades och har fått 4 svar. Det senaste inlägget skrevs .
1

Hej!

Jag har kört fast i ett litet css problem. Om det är någon som orkar hjälpa mig vore jag grymt tacksam.

Saken är den att jag försöker göra två olika länkar inom samma <div id> tag. Det som jag inte får att fungera är underlänkarna som ska vara i en <span class> tag. <div id> tar helt enkelt över <span class> taggarna eller gör att dom inte fungerar fullt ut.
Vet inte hur jag ska förklara det bättre på mitt amatör kod språk. Men jag tror man ser här under vad jag menar. Jag är tyvär tvungen att ha underlänkarna i en <span class> för att förenkla uppdateringen (och försvåra för mig själv...)

Såhär ser det ut nu när det inte fungerar:

<div id="content">

<a href="#" class="sub_links">Länk</a>
eller
<a href="#"><span class="sub_links">Länk</span></a>

</div>

Så här ser css ut för grund texten:

#content {
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
color: #333333;
font-size: 11px;
line-height: 17px;
text-decoration: none;
}
#content a:link, a:visited, a:active{
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
color: #333333;
font-size: 11px;
line-height: 17px;
text-decoration: none;
}
#content a:hover {
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
color: #333333;
font-size: 11px;
line-height: 17px;
text-decoration: underline;

Så här ser css ut för sub länkarna som ska finnas inuti #content:

.sub_links {
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: 9px;
line-height: 11px;
color: #545454;
text-decoration: none;
}
.sub_links a:link, a:visited, a:active {
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: 9px;
line-height: 11px;
color: #545454;
text-decoration: none;
}
.sub_links a:hover {
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: 9px;
line-height: 11px;
color: #666666;
text-decoration: underline;

  • Medlem
  • Bollnäs
  • 2007-08-12 12:24

Först och främst saknades det avslut på några av taggarna, men det kanske bara blev i kopieringen.

Sen måste man ange relationerna på rätt sätt för att de ska kunna modifiera egenskaperna på redan angivna taggars utseende. I och med att du angett att <a>-taggarna inuti div#content ska se ut på ett visst sätt, så är det en mer precis angivelse än att enbart ange en <a>-tagg senare i CSS-koden. Du har dessutom angivit en html-struktur som ser ut som så här:

<div id="content">
<span class="sub_links"><a href="#">Länk</a></span>
</div>

I fel ordning, alltså.

Så här kan du göra för att dina länkar med klassen angiven till <a>-taggen i html-koden ska påverkas:

#content a.sub_links {
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: 9px;
line-height: 11px;
color: #545454;
text-decoration: none;
}
#content a.sub_links:link,
#content a.sub_links:visited,
#content a.sub_links:active {
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: 9px;
line-height: 11px;
color: #545454;
text-decoration: none;
}
#content a.sub_links:hover {
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: 9px;
line-height: 11px;
color: #666666;
text-decoration: underline;
}

Sen kan du städa lite i koden för att inte behöva ange allt flera gånger:

#content a.sub_links,
#content a.sub_links:link,
#content a.sub_links:visited,
#content a.sub_links:active {
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: 9px;
line-height: 11px;
color: #545454;
text-decoration: none;
}
#content a.sub_links:hover {
color: #666666;
text-decoration: underline;
}

Du kan även göra samma sak i resten av koden för att spara lite bandbredd och komplexitet.

Tack!

Jag provade det du sa och visst, nu funkar det fint, weee..
(Jo jag vet, har en del städning av koden att göra.)

Men som vanligt slutar det inte där. Saken är att Dreamweaver som jag jobbar i inte vill sätta <span> tagen runt <a> tagen.

<span class="sub_links"><a href="#">Länk</a></span>

Utan gör en

<a href="#" class="sub_links">Länk</a>

eller

<a href="#"><span class="sub_links">Länk</span></a></a>

Problemet är att de jag gör sidan åt kommer använda sig av Dreamweavers uppdateringsprogram Contribute. Contribute beter sig tyvärr som Dreamweavers och genererar kod som i det här fallet inte fungerar. Grymt irreterande. Får försöka lösa det på något annat sätt.

  • Medlem
  • Bollnäs
  • 2007-08-14 12:34
Ursprungligen av Thuresson:

Men som vanligt slutar det inte där. Saken är att Dreamweaver som jag jobbar i inte vill sätta <span> tagen runt <a> tagen.

/.../

<a href="#" class="sub_links">Länk</a>
#content a.sub_links:hover {
color: #666666;
text-decoration: underline;
}

Betyder i klartext:
När du för musen över en länk med klassen "sub_links" som ligger i något med ID "content" ska färgen sättas till grå och läggas en understrykning på länken.

Alltså borde du inte ha några problem med vart klasser och <span> ligger i hierarkien.

Vill du istället ha koden för

<a href="#"><span class="sub_links">Länk</span></a>

så blir det på det här viset:

#content a span.sub_links:hover {
color: #666666;
text-decoration: underline;
}

eller möjligtvis så här:

#content a:hover span.sub_links {
color: #666666;
text-decoration: underline;
}

(Vet inte om IE buggar med någon av varianterna...)

Oavsett borde du inte ha några problem att åstadkomma det du vill.

Måste tacka igen så mycket.

Provade båda av dina förslag och kom nog fram till att det senare fungerar best, även på IE. Contribute har lite problem, men bara man först väljer stil och sedan gör den till en länk fungerar det bra.

Det är nog dax att köpa en fet bok om css, man blir bara mer och mer förvirrad.

1
Bevaka tråden