webForumDet fria alternativet

underline på bilder?

HTML & CSSur HTML, XHTML & CSS

14 svar · 865 visningar · startad av flumpa

Medlem sedan jan. 2003247 inlägg
Frågan#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;
}

Medlem sedan jan. 2000978 inlägg
#2

Kan du länka till sidan eller visa all kod? Det blir lite enklare... :)

Medlem sedan juli 20033 147 inlägg
#3

Antar att bilderna som får en underline är länkar.
Du kan lösa det med

a img { border: none; }
Medlem sedan jan. 2003247 inlägg
#4

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

.

Medlem sedan jan. 2000978 inlägg
#5

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.

Medlem sedan jan. 2003247 inlägg
#6

hur gör man något sånt?

Medlem sedan jan. 2000978 inlägg
#7
.normallink {background: url();}
<a href="#" class="normallink"></a>
Medlem sedan jan. 2005257 inlägg
#8

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;
}

Medlem sedan jan. 2000978 inlägg
#9

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>.

Medlem sedan jan. 2005257 inlägg
#10

You're right, tänkte galet =o)

Medlem sedan jan. 2003247 inlägg
#11

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>

Medlem sedan jan. 2000978 inlägg
#12

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. :)

Medlem sedan jan. 2003247 inlägg
#13

Aja då är jag med.. Ska prova det i morgon..

Medlem sedan jan. 2003247 inlägg
#14

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?

Medlem sedan jan. 2003247 inlägg
#15

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

266 ms totalt · 3 externa anrop · v20260731065814-full.4bcf49fe
138 ms — hämta forumlista (db)
126 ms — hämta statistik (db)
130 ms — hämta tråd, inlägg och bilagor (db)