CODEWITHSUNDEEP
htmlcsscss-sprites
Rah
Rah

Reputation: 3

How do I position a icon/image on the left of the link using CSS sprites?

Given the markup below how would i position an icon on the left using css sprite? I've worked with sprites before but not like the example below.

HTML

<ul class="menu">
<li id="link1"><a href="">Link1</a></li>
<li id="link2"><a href="">Link2</a></li>  
<li id="link3"><a href="">Link3</a></li>     
</ul>

CSS

ul.menu {
width:210px;
font-family:FranklinGothic-Book, Georgia, "Times New Roman", Times, serif;
}

ul.menu li {
color:#000;
font-size:24px;
list-style:none;
border-top:1px solid #dcdcdc;
margin:14px 0;
}

ul.menu li:hover {
color:#000;
background-color:#dcdcdc;
list-style:none;
border-top:1px solid #dcdcdc;
margin:14px 0;
}

ul.menu li a {
color:#000;
list-style:none;
border-top:1px solid #dcdcdc;
text-decoration:none;
margin:14px 0;
}

ul.menu li#link1 {
background-position:0 0;
}

ul.menu li#link1 span {
font-size:18px;
}

ul.menu li#link2 {
background-position:0 -2px;
}

ul.menu li#link3 {
background-position:0 -5px;
}

Any assistance would be greatly appreciated. Thanks in advance.

Upvotes: 0

Views: 1735

Answers (2)

Swarnamayee Mallia
Swarnamayee Mallia

Reputation: 2008

Below is your corrected CSS and fiddle link

ul.menu li {
color:#000;
font-size:24px;
list-style:none;
border-top:1px solid #dcdcdc;
margin:14px 0;
padding-left:20px;
background:url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6) no-repeat 0 -633px;   
}

ul.menu li#link1 {
background-position:0 -633px;
}

ul.menu li#link2 {
background-position:0 -605px;
}

ul.menu li#link3 {
background-position:0 -655px;
}

Upvotes: 2

Deryck
Deryck

Reputation: 7668

You have many options but this is the easiest.

1) Use the list-style-image property (list-style for shorthand).

ul.menu li {
    list-style: url('icons.png') outside;
}

Upvotes: 0

Related Questions