F flumpa Medlem sedan jan. 2003 247 inlägg Frågan 3 jan. 2006 22:28 #1 Jag har gjort den här css koden för att få en snygg underline på min text.
Problemet är att den även vill lägga en underline på bilder.
Finns det något bra sätt att ta bort underlinen på bilderna?
Har letat runt här på webforum.nu men kan inte hitta en fungerande lösning.
Finns den någon sådan ?
Tack på förhand
a {
text-decoration: none;
white-space: nowrap;
background: url(underline1.gif) repeat-x 100% 100%;
padding-bottom: 2px;
}
a:hover {
background: url(underline2.gif) repeat-x 100% 100%;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #000000;
}
I Insider Medlem sedan jan. 2000 978 inlägg Kan du länka till sidan eller visa all kod? Det blir lite enklare... :)
M Melea Medlem sedan juli 2003 3 147 inlägg Antar att bilderna som får en underline är länkar.
Du kan lösa det med
a img { border: none; }
F flumpa Medlem sedan jan. 2003 247 inlägg
a img { border: none; }
Nä den koden fungerade inte så bra.
I internet Explorer så ligger linjen bakom bilden så man ser den när bilden laddas.
I FireFox så ser man linjen under bilden. Desutom så är alla ramarna på sidan olika stora, varför blir dom de?
Länk till websidan.
http://www.gaspop.com/flumpa/Index.html
.
I Insider Medlem sedan jan. 2000 978 inlägg Eftersom bilderna ligger i en länk så får dom ju samma egenskaper. Du måste på något sätt separera de länkar som ska ha bakgrundsbild från de övriga. Med en klass eller på något annat sätt.
I Insider Medlem sedan jan. 2000 978 inlägg .normallink {background: url();}
<a href="#" class="normallink"></a>
nidron Medlem sedan jan. 2005 257 inlägg Att a img {border: none;} inte fungerar beror väl på att det är background: url(underline1.gif) repeat-x 100% 100%; du använder som "border".
Testa:
a img {
background:none;
}
a:hover img {
background:none;
}
I Insider Medlem sedan jan. 2000 978 inlägg
nidron skrev:
Att a img {border: none;} inte fungerar beror väl på att det är background: url(underline1.gif) repeat-x 100% 100%; du använder som "border".
Testa:
a img {
background:none;
}
a:hover img {
background:none;
}
Den där koden förändrar ju ingenting eftersom det inte var nån bakgrundsbild i IMG-elementet från början heller.
Bakgrundsbilden ligger ju kvar i <A>.
nidron Medlem sedan jan. 2005 257 inlägg You're right, tänkte galet =o)
F flumpa Medlem sedan jan. 2003 247 inlägg Vad gör jag för fel när det här inte fungerar?
<style type="text/css">
.normallink {background: url();}
</style>
också länken så här:
<td bgcolor="#E5E5E5"><div align="center"><a href="lowpoly.php?pic=Libary2.jpg" class="normallink"><img src="Pic/Lowpoly/Libary1.jpg" width="108" height="108" border="0"></a></div></td>
I Insider Medlem sedan jan. 2000 978 inlägg Du missförstod mig. Du skulle applicera klassen på de länkar som inte innehåller bilder. Sen måste du ange sökvägen till bakgrundsbilden, som jag lämnade tomt i mitt exempel. :)
F flumpa Medlem sedan jan. 2003 247 inlägg Aja då är jag med.. Ska prova det i morgon..
F flumpa Medlem sedan jan. 2003 247 inlägg Det fungerade nästan när jag gjorde så här:
.normallink {
background: url(underline2.gif) repeat-x 100% 100%;
}
Men jag är ute efter att den ska ha en (a:hover) och inte få en (a).
Går det att få en (a:hover) på något sätt? Eller är jag på djupt vatten?
F flumpa Medlem sedan jan. 2003 247 inlägg Ville bara säga att jag kom på hur man gjorde
a:link.textlank {
text-decoration: none;
white-space: nowrap;
background: url(underline1.gif) repeat-x 100% 100%;
padding-bottom: 2px;
}
a:hover.textlank {
background: url(underline2.gif) repeat-x 100% 100%;
}
Och länkade med class="textlank"
Tack för all hjälp