Lave et link med et billede og en tekst

prøv med

<a class="link" href="side.aspx" valg</a>

i stedet for

<a id="link" href="side.aspx" valg</a>



jeg mener at class skrives som .class og id skrives som #id i dit stylesheet.

Det id på linket bliver ikke bruget til at style, jeg styler vedhjælp af <td colspan="3" class="valg">

Arh okay, det er da også rigtigt. Har du prøvet dig frem ved at ændre i størrelsen af tabellen?

Prøv evt. også at slette "padding" i dit stylesheet, medmindre det er livsnødvendigt.

Det hjælper ikke

Kan du vise et eksempel ?-)

-- i øvrigt har du en lille fejl i dit stylesheet, da a:active aldrig vil blive aktiveret i en browser, der følger css-rekommendationerne, så det skal nok være:

.valg a,.valg a:link,.valg a:visited{
    height: 30px;
    width: 200px;
    padding: 3px 0 0 30px;
    font-weight:bold;
    background:url(../Images/billede.gif) no-repeat left center;
    text-decoration:none;
    color:#000;
}

.valg a:hover{
    text-decoration:underline;   
}
.valg a:active{text-decoration:none;}

okay så prøv:

HTML:

<div id="valg_billede">
<table class="valg">
<tr><td><a href="side.aspx">valg</a></td></tr>
</table>
</div>

Style:

#valg_billede {
    top: (det du vil have)px
    left:(det du vil have)px
    position: absolute
    height: 30px;
    width: 200px;
    background-image:url(../Images/billede.gif);
    background-repeat:no-repeat;
}
.valg {
    top: (det du vil have)px
    left:(det du vil have)px
    position: absolute
}

.valg a {
    color:#000000;
    font-weight:bold;
}

.valg a:hover {
    color:#000000;
    text-decoration:underline;
}


Det er en lidt mere besværgelig måde, men den bør til gengæld også virke. Hvis den ikke gør, ved jeg sku ikke hvad.

Det her løser faktisk mit problem:

valg
{
    height: 30px;
    width: 300px;
    padding: 7px 0 0 30px;
    font-weight:bold;    background-image:url(../Images/billede.gif);
    background-repeat:no-repeat;
    background-position:left center;
    text-decoration:none;
    color:#000;
}

.valg a:hover
{
    text-decoration:underline;   
}

Men er det korrekt?

Det ser da umiddelbart korrekt nok ud. Hvis du skal have positioneret din tekst i forhold til dit billede, vil det dog være nemmere at adskille de to, men dig om det.

Virker det nu?

Ja det virker nu :-)

Jeg vil da mene at den nemmeste måde at lave det på er ved at lave det på den måde jeg har gjordt, ellers skal der da skrive noget mere kode hvergang jeg laver et link?

Det kan du have ret i, men nu ved jeg heller ikke hvordan dit projekt ser ud helt præcist. Men cool at det virker nu.

roenving og larsbb smid nogle svar så får i point!

Oki '-)

-- men hovedparten er vel larsbbs ?-)

Hehe, jeg er sku ligeglad hvem af os der får de point. Er bare glad for at kunne hjælpe.

Tak for point ;~}