CODEWITHSUNDEEP
htmlcss
jvh
jvh

Reputation: 143

Replace text inside a list with an image

So I'm trying to replace text (link) inside a list with an image. This doesn't seem to work

my code:

HTML:

<div id = "headeranna"> 
    <ul>
        <li><a href="#" id="annaklein">Vraag het aan Anna</a></li>
        <li><a href="#">Vraag het aan Anna</a></li>
    </ul>
</div>

CSS:

#headeranna {
    position: absolute;
    margin-left:410px;
    margin-right: 10px;
    margin-top: -90px;
    float:right;
}

#annaklein{
    display:block;
    width: 26px;
    height: 26px;
    background: url(small_anna.gif);
    text-indent: -9999px
}

This doesn't do anything at all, am I missing something?

Upvotes: 0

Views: 113

Answers (3)

matzone
matzone

Reputation: 5719

Try this in your CSS 

#annaklein{
list-style-type: none;
list-style-image:url("small_anna.gif");
width: 26px;
height: 26px;
text-indent: -9999px;}

Upvotes: 0

Fico
Fico

Reputation: 2407

It is a good practice to use quotes 

  background: url("small_anna.gif");

By the way...

An absolute positioned element will always compute float to value "none". So the declaration in #headeranna float:right; is not necessary.

Take care that the path for your image is ok in relation to your document

You can see this background working here fiddle (I modify some margin values just for the example target)

Upvotes: 1

seniorpreacher
seniorpreacher

Reputation: 666

There can be different kind of problems:

  • wrong url for the image
  • too big image and it's left top corner is transparent or same as background
  • etc...

I suggest you to use the background link this:

background: transparent url(small_anna.gif) top left no-repeat;

or at least try:

background: red; /* you can start with checking if you can see the background */

And maybe you should put your code to JsFiddle, there we can see your problem.

Upvotes: 1

Related Questions