Image at the end of a link
Posted by Joeri on 6th May, 2009
div a
{
min-height : 6px;
padding-right : 6px;
background : transparent url("images/postlink.gif") 100% 50% no-repeat;
}
/* because IE is stupid */
* html div a
{
height : 6px;
}
div a
{
min-height : 6px;
padding-right : 6px;
background : transparent url("images/postlink.gif") 100% 50% no-repeat;
}
/* because IE is stupid */
* html div a
{
height : 6px;
}
cool! hoe groot is die image eigenlijk?
Het gaat over dat kleine pijltje uiterst rechts in de link (zie afbeelding). Dat is uiteraard heel klein. Maar de moeilijkheid zit em erin om dat precies op die plek te krijgen via html en css.
In dit geval zou de html er als volgt uitzien:
<div><a href="#">http://www.google.com</a>
</div>
De afbeelding zit in dit geval mee in de “a href” als achtergrondafbeelding.
Ik ben een waterdichte manier aan het zoeken om dit te fixen. Je kan dit namelijk ook oplossen door binnen de link nog eens een span met een klasse aan te maken, waarin je dan de mini-afbeelding plaatst als achtergrondafbeelding.
Heeft iets weg van de referenties die soms op wiki’s worden gebruikt.
Is het doel dat enkel de kleine image kan gebruikt worden als link, of eerder als bijkomende ‘decoratie’ aan de al bestaande link?
In sommige gevallen zie ik zowieso een betere ‘aantrekkingskracht’ voor een bepaalde link met zo een bijkomend pijltje (of ander grafisch pareltje)
Ik zie dat je veel nieuwe dingen bij aan het leren bent, voor de rest alles nog ok daar in Gent?
Greetz.
.extlink {
background:transparent url(extlink.gif) no-repeat scroll right center;
padding:0 10px;
}
ha ha ha dit is een link