Background positioning in <ul> <li>

Discussion in 'CSS' started by web_dude, Dec 21, 2007.

0
  1. #1
    Hi,

    I want to have an arrow point to the link when the user hovers it.

    I can't seem to move the arrow back and get it to show.

    Can anyone help? I have added the arrow as an attachment.

    Thanks.

    STYLE:

    #services {
    height: 145px;
    width: 240px;
    text-align: center;
    }

    #services ul {
    list-style: none;
    background: #FFFFFF;
    }

    #services li {
    background: #ede9e0;
    line-height: 16px;
    margin-bottom: 3px;
    width: 240px;
    }

    #services a {
    color: #666666;
    width: 240px;
    }

    #services a:hover {
    line-height: 14px;
    width: 240px;
    color: #000000;
    text-decoration: none;
    background: #ede9e0 url(/pages/LSE/images/lse_red_arrow.png) no-repeat;
    background-position: -2px;
    }



    <div id="services">
    <span>Services</span>
    <ul>
    <li><a href="">Contract Sales Group</a></li>
    <li><a href="">Bid Sales</a></li>
    <li><a href="">Dealer Sales</a></li>
    <li><a href="">Environments for Libraries</a></li>
    <li><a href="">Library Spirit</a></li>
    </ul>
    </div>
     

    Attached Files:

    web_dude, Dec 21, 2007 IP
  2. martinmarzejon

    martinmarzejon Peon

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try this, style it as you see fit.

    CSS
    
ul#services li {
	list-style: none;
}
ul#services li a {
	background-color: #ede9e0;
}
ul#services li a:hover {
	background-image: url(imagepath.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
}
    Code (markup):
    HTML
    
<ul id="services">
	<li><a href="#">Contract Sales Group</a></li>
	<li><a href="#">Bid Sales</a></li>
	<li><a href="#">Dealer Sales</a></li>
	<li><a href="#">Environments for Libraries</a></li>
	<li><a href="#">Library Spirit</a></li>
</ul>
    Code (markup):
     
    martinmarzejon, Dec 21, 2007 IP
  3. web_dude

    web_dude Guest

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for your help but your code doesn't do anything different than what I was doing (just a little cleaner).

    The problem is when you hover over my links the red arrow show right behind the first letter of the first word.

    I want it to go back about 5px but when I do that it disappears.

    Any thoughts on how I can do that?

    I've attached a screen shot
     

    Attached Files:

    web_dude, Dec 21, 2007 IP
  4. martinmarzejon

    martinmarzejon Peon

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Add left padding to ul#services li a

    Something like this...

    
ul#services li a {
	background-color: #ede9e0;
	padding-left: 15px;
}
    Code (markup):
     
    martinmarzejon, Dec 21, 2007 IP
  5. web_dude

    web_dude Guest

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    perfect. thanks.
     
    web_dude, Dec 21, 2007 IP
  6. martinmarzejon

    martinmarzejon Peon

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Here's the whole thing

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Arrow hover</title>
<style type="text/css">
ul#services {
	border-top: 1px solid #000;
	width: 240px;
	margin: 0;
	padding: 0;
}
ul#services li {
	list-style: none;
}
ul#services li a {
	display: block;
	color: #000;
	text-decoration: none;
	background-color: #ede9e0;
	padding-left: 15px;
	border-bottom: 3px solid #fff;
}
ul#services li a:hover {
	background-image: url(lse_red_arrow.png);
	background-repeat: no-repeat;
	background-position: 5px 6px;
}
</style>
</head>

<body>

<ul id="services">
	<li><a href="#">Contract Sales Group</a></li>
	<li><a href="#">Bid Sales</a></li>
	<li><a href="#">Dealer Sales</a></li>
	<li><a href="#">Environments for Libraries</a></li>
	<li><a href="#">Library Spirit</a></li>
</ul>

</body>
</html>
    Code (markup):
     
    martinmarzejon, Dec 21, 2007 IP