CODEWITHSUNDEEP
htmlcss
ediblecode
ediblecode

Reputation: 11971

Using an image for a list item that is not a link

I have the following code:

<footer id="footer">
    <ul id="labels">
        <li id="label1">About</li>
        <li id="label2"><a href="">blah</a></li>
        <li id="label3"><a href="">blah</a></li>
        <li id="label4"><a href="">blah</a></li>
        <li id="label5"><a href="">blah</a></li>
    </ul>
</footer>

I know how to specify an image for li items 2-5 but not sure how to for label1?

I have the following CSS but it only works when label1 has the <a href=""> tag. Is there any way to do it the way I am trying to and if not how should I approach it?

#label1 a { 
    height:9px; 
    width:43px; 
    background: url(/Content/images/footer/about.png) no-repeat 0 0; 
    padding:0; 
}

Sorry I'm very new to CSS/HTML

Upvotes: 0

Views: 79

Answers (2)

Shai Mishali
Shai Mishali

Reputation: 9382

You can use CSS's list-style-image for each of the labels 

li#label1{ list-style-image:url('img1.jpg'); }
li#label2{ list-style-image:url('img2.jpg'); }
li#label3{ list-style-image:url('img3.jpg'); }
li#label4{ list-style-image:url('img4.jpg'); }
li#label5{ list-style-image:url('img5.jpg'); }
li#label6{ list-style-image:url('img6.jpg'); }

Upvotes: 0

Tim S.
Tim S.

Reputation: 13843

#label1 { /* I've edited this rule */
    height: 9px;
    width: 43px;
    background: url(/Content/images/footer/about.png) no-repeat 0 0;
    padding: 0;
}

remove the a bit. It makes you select the <a> element within #label1. But because you want to apply these rules to #label1, you only have to remove the a selector.

Upvotes: 1

Related Questions