asked on

How to position background image on list item?

I am building a styled accordian using jQuery and CSS code is attached below

The accordion is made up of around 25 <li> items (30px high) and has off and over states. For the different states I am using 2 large images that are the same height (750px) as the 25 <li> items positioned below each other. I have the roll-over and roll-off code working fine it is more the positioning of the background image on each <li> that I need help with.

So what I need to do is adjust the background image by 30 px for each <li> item so that when viewed on the page the list items make up the complete background image in rows.

Please see the attached image to see what I mean. :)

<style>
ul.menu, ul.menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
}

ul.menu a {
  display: block;
  text-decoration: none;	
}

ul.menu li {
  margin-top: 3px;
}

ul.menu li a, ul.menu ul.menu li a {
  background:url(/imgs/layout/accordian_off.png) no-repeat ;
  color: #fff;	
  padding:6px 0px 6px 40px;
}

ul.menu li a:hover, ul.menu ul.menu li a:hover {}

ul.menu li ul li a, ul.menu ul.menu li ul li a {
  background: #ccc;
  color: #000;
  padding-left: 20px;
}

ul.menu li ul li a:hover, ul.menu ul.menu li ul li a:hover {
  background: #aaa;
  border-left: 5px #000 solid;
  padding-left: 15px;
}
ul.menu ul.menu li a:hover {
    border-left: 0;
    padding-left: 0.5em;
}
ul.menu ul.menu {
    border-left: 5px #f00 solid;
}
ul.menu a.active, ul.menu ul.menu li a.active, ul.menu a.active:hover, ul.menu ul.menu li a.active:hover {
    text-decoration: none;
	background:url(/imgs/layout/accordian_over.png) no-repeat;}
div.panel {
    padding: 0px;
    margin-top: 3px;
}
/* Panel styling van be found in layout.css below the css for #contentwrapper.which1 */

ul.menu div.panel a, ul.menu div.panel li a:hover  {
    display :inline;
    color: #3d2d78;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    font-weight: normal;
}
ul.menu div.panel a:hover {
    color: #3d2d78;
    text-decoration: underline;
}


.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }
.indent3 { padding-left: 3em; }
.indent4 { padding-left: 4em; }
.indent5 { padding-left: 5em; }
.indent6 { padding-left: 6em; }
.indent7 { padding-left: 7em; }
.indent8 { padding-left: 8em; }
.indent9 { padding-left: 9em; }
.indent10 { padding-left: 10em; }
</style>

<ul class="menu">
		<li>
			<a href="#">LINK 1</a>
			<div class="acitem panel">
			<p>This contains stuff</p>
			<p>There can be <a href="http://www.i-marco.nl/">links</a> too</p>
			<ul>
				<li>blerk</li>
				<li>wonk</li>
				<li><a href="#">meh</a></li>
			</ul>
			</div>
		</li>
        <li>
			<a href="#">LINK 2</a>
			<div class="acitem panel">
			<p>This contains stuff</p>
			<p>There can be <a href="http://www.i-marco.nl/">links</a> too</p>
			<ul>
				<li>blerk</li>
				<li>wonk</li>
				<li><a href="#">meh</a></li>
			</ul>
			</div>
		</li>
        <li>
			<a href="#">LINK 3</a>
			<div class="acitem panel">
			<p>This contains stuff</p>
			<p>There can be <a href="http://www.i-marco.nl/">links</a> too</p>
			<ul>
				<li>blerk</li>
				<li>wonk</li>
				<li><a href="#">meh</a></li>
			</ul>
			</div>
		</li>
        <li>
			<a href="#">LINK 4</a>
			<div class="acitem panel">
			<p>This contains stuff</p>
			<p>There can be <a href="http://www.i-marco.nl/">links</a> too</p>
			<ul>
				<li>blerk</li>
				<li>wonk</li>
				<li><a href="#">meh</a></li>
			</ul>
			</div>
		</li>
	</ul>

Open in new window

Eternal_Student

If the image and list elements are a fixed height anyway, why not just save the image as a background image without the arrows and then create a class for the arrows on the list elements so something like the below:

That way you simplify the CSS and dont need to create loads of styles for each list item.

<div id="large-image">

<ul>
<li class="arrow-on"></li>
...
</ul>

</div>

Open in new window

swgdesign

ASKER

In my question I state that it is a JQuery accordion that utilises a <ul> as it's display tag.

So, if an item in the accordion is expanded the bottom list items would not be over the background image!

Eternal_Student

So when they are expanded, what does the extra space look like? Do you have a screen shot of the expanded state?

ASKER CERTIFIED SOLUTION

bastianr

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

swgdesign

ASKER

External student: when expanded a div of content(text and images) is shown below the list item that was expanded. Hence why the background image won't work. (I've already tried it)

Bastianr: I totally understand what you're saying; I would need to use a class for each individual list item and then adjust the background-position for each list item.

I did think of this, but wondered if there was a more dynamic solution...

bastianr

Yeah, the CSS could get lengthy. You could use JavaScript to set the styles as well to make things dynamic and more compact. You could loop through the links and set the packground position offsets dynamically. You probably want a class or some other hook to more easily isolate the elements for the style. Here's an example with jQuery:

<!-- set class on target links for convenient JS hook -->
<a href="#" class="parent-link">LINK 1</a>
<a href="#" class="parent-link">LINK 2</a>
...

$(function() { // at document ready, loop through target links, set CSS bg position
	var vertPos = 0;
	$('a.parent-link').each(function(){
		$(this).css('background-position', '0px ' + vertPos + 'px');
		vertPos -= 20;
	});
});

Open in new window