23 svar · 985 visningar · startad av maqe
När jag lägger in en länk så väljer jag att skriva ut en ikon framför länken som visar vilket format dokumentet har som jag länkar in. Ikonen tillhör länken och under alla mina länkar har jag understrykning men under ikonen skulle jag vilja ta bort bordern. hur gör jag för att komma åt en img som är en länk?
a img { border: 0 none; }
dectgap skrev:
a img { border: 0 none; }
Den verkar inte hugga det där.
Såhär ser min länk ut när jag kollar source på den.
<div><a title="EPiServer4.50" href="/ImageVault/Images/id_63/conversionFormat_0/scope_0/ImageVaultHandler.aspx" target=""><img alt="EPiServer4.50" src="/ImageVault/Images/id_63/scope_1024/ImageVaultHandler.aspx" border="0" />EPiServer4.50</a></div>
HTML:
<div><a class="foo" href="/ImageVault/Images/id_63/conversionFormat_0/scope_0/ImageVaultHandler.aspx" >EPiServer4.50</a></div>
CSS:
a:link.foo{
background: url(/ImageVault/Images/id_63/scope_1024/ImageVaultHandler.aspx) no-repeat 0 50%;
padding-left: 15px; /*Testa dig fram vilken padding du behöver här */
}
mv icaaq
icaaq skrev:
HTML: <div><a class="foo" href="/ImageVault/Images/id_63/conversionFormat_0/scope_0/ImageVaultHandler.aspx" >EPiServer4.50</a></div> CSS: a:link.foo{ background: url(/ImageVault/Images/id_63/scope_1024/ImageVaultHandler.aspx) no-repeat 0 50%; padding-left: 15px; /*Testa dig fram vilken padding du behöver här */ }mv icaaq
Denna lösning fungerar inte för mig, jag har ingen möjlighet att påverka hur länken skrivs ut då allt detta sker i ett CMS verktyg. Länken måste se ut som den gör men jag vill få bort strecket under ikonen bara.
a img {border: none;}
Eller så kan du väl skriva [kod]border: 1px solid #fff;[/kodEller vad du nu använder för bakgrundsfärg. :) Så har du border ändå, bara att den inte syns...
silfver skrev:
a img {border: none;}Eller så kan du väl skriva [kod]border: 1px solid #fff;[/kodEller vad du nu använder för bakgrundsfärg. :) Så har du border ändå, bara att den inte syns...
Men det borde fungera tycker du alltså? Händer ingenting när jag gör så ?
Ramen runt bilden går ju att få bort, men understrecket under länken ligger ju kvar och länken inkluderar ju bilden, så du får trixa med marginalerna istället:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div {
display:inline;
margin-left:28px;
}
img {
margin-left:-28px;
margin-right:3px;
}
a img {
border:0 none
}
</style>
</head>
<body>
<div><a href="#"><img src="http://www.webforum.nu/images/wfstandard/email.gif">sdafsdf</a></div>
</body>
</html>
Insider skrev:
Ramen runt bilden går ju att få bort, men understrecket under länken ligger ju kvar och länken inkluderar ju bilden, så du får trixa med marginalerna istället:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="sv"> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> div { display:inline; margin-left:28px; } img { margin-left:-28px; margin-right:3px; } a img { border:0 none } </style> </head> <body> <div><a href="#"><img src="http://www.webforum.nu/images/wfstandard/email.gif">sdafsdf</a></div> </body> </html>
Med Denna kod får jag fortfarande ett litet streck under min bild?
Det är för att du satt en border-bottom på a{}.
Ta bort den. Vill du inte ha ett vanligt understreck för länken kan du använda en bakgrundsbild. Ex:
a
{
text-decoration:none;
background: transparent url(link_bg.jpg) repeat-x 100% 100%;
}
Insider skrev:
Det är för att du satt en border-bottom på a{}.
Ta bort den. Vill du inte ha ett vanligt understreck för länken kan du använda en bakgrundsbild. Ex:a { text-decoration:none; background: transparent url(link_bg.jpg) repeat-x 100% 100%; }
Det funkar ju bara skapligt att ha background som border, blir det en radbrytning i länken så funkar det ju inte?
kan ha varit för att jag satt background på en <p> kankse :)
Funkade inte för det märkte jag nu
span div a
{
text-decoration: underline;
background: url(bild.gif) no-repeat 0 50%;
padding: 4px 0 4px 25px;
}
a img{
display: none;
}
mv icaaq
Men du får inte ha en div(block-element) inuti en span(inline-element) så du får ta bort den om du ska validera sidan ;)
mv icaaq
Hm jag får nog göra på nått annat sätt eller skippa understrykningar. Jag kan inte göra något åt koden jag skall ändra med css. mao jag kan inte flytta ut ikonen till css:en istället. All den koden måste vara intakt som den är nu men jag vill inte ha någon border under ikonen. Dock verkar det inte som att det går eftersom bilden tillhör länken. och jag kan inte påverkas länkens border enbart under bilden.
icaaq skrev:
Men du får inte ha en div(block-element) inuti en span(inline-element) så du får ta bort den om du ska validera sidan ;)
mv icaaq
Det är episerver tillsammans med ett plugin "imagevault" som gör den där koden så jag kan inte påverka den. Man får leva med att det är lite fel när man skall validera när man inte har någon möjlighet att påverka koden som kommer ut