Forskellig markering af links med CSS
Jeg har lavet en CSS som skal markere links på forskellige måder afhængig om det er en menu med links eller tekst med links.Her kommer CSS-koden:
body {background-color: #CFC68D}
p.tekst {font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
color: #FFFFFF;
}
.menu {font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-style:normal;
color:#FFFFFF;
line-height: 70px;
background-color: #A0A77B;
}
a {
font-size:12px;color:#FFFFFF; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:link {
color: #FFFFFF; text-decoration: none; background:#A0A77B;}
a:hover {font-size:12px; color: #000000; text-decoration:none; background:#CFC68D;}
.hojre a:link {font-size:12px; color: #FFFFFF; text-decoration:underline; background:#CFC68D;}
.hojre a:hover {font-size:12px; color:#000000; text-decoration:underline; background:#A0A77B;}
Her et eksempel på et menulink hvor jeg har fået CSS til at lystre:
<a href="album.html" target="indhold" class="menu">>Billeder</a><br />
Linket er markeret med en pil foruden at det er en del af navigationsmenuen; tekstens farve, baggrundsfarve og størrelse skifter som den skal. Alt OK.
Men her kommer problemerne:
I disse html-koder som står på de almindelige tekstsider, kan jeg ikke få CSS til at understrege teksten til trods for at den skifter farve og understreger når man fører musen hen over linket:
<body>
<p class="hojre">
<a href="http://www.brunata.dk/" class="hojre" target="_blank">Brunata</a><br />
</p>
</body>
Og ligeledes i mail:
<body>
<p class="tekst" align="center">Brunata. Mail: <a class="hojre" href="mailto:brunata@brunata.dk">brunata@brunata.dk</a>
</body>
Som det ses, arbejder jeg med class, og teknikken virker delvist. Jeg er klar over at der står a:link text-decoration: none, men det er jo fordi linket i menuen ikke skal være understreget.
