...

View Full Version : How do I create a dynamic li with a background?



cb2004
06-07-2007, 12:11 PM
I am in need of a dynamic li but am not sure of the best way to go about it. Basically I can envisage the top and bottom parts being a fixed height with the backgrounds. The middle part will then just have a border on the left and right and will expand as the content gets bigger.

This is the code I have at the min. The background is also attached:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#product {
width: 548px;
}

#product ul {
padding: 0;
margin: 0;
list-style: none;
}

#product li {
background: url(productbackground.gif) no-repeat;
text-align: center;
display: block;
width: 132px;
height: 172px;
float: left;
margin: 0 5px 5px 0;
}
</style>
</head>
<body>
<div id="product">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
Any ideas people?

Bill Posters
06-07-2007, 12:31 PM
See:
ALA: Sliding Doors of CSS (http://alistapart.com/articles/slidingdoors/)
456BereaStreet: Creating bulletproof graphic link buttons with CSS (http://www.456bereastreet.com/archive/200705/creating_bulletproof_graphic_link_buttons_with_css/)

cb2004
06-07-2007, 12:41 PM
Cheers for the link and fast response. However confusion entails :). Which is the best method to use for my situation?

cb2004
06-08-2007, 10:31 AM
I gave this another whirl and just cant get there. Shall I add a span before and after, each with a background image?

cb2004
06-09-2007, 03:33 PM
Is there a better way of doing this without the use of an <li>?

Cheers.

Bill Posters
06-09-2007, 03:39 PM
Navigation menus are a list, so it's appropriate to use a list of some type (e.g. ul) with list items (i.e. li).

Try both methods out and you should be able to decide for yourself which best suits your needs and your coding approach.

VIPStephan
06-09-2007, 03:43 PM
With your code, what I would do is:

Cut the image in three parts, top, middle, bottom. Top and bottom are the rounded corners, middle is a 1px high image with border left and right.
Apply top and bottom image to the ul and the parent div, respectively (doesn’t matter which one goes where).
Apply the middle image to each li, repeating vertically.


Now ths only works if you have no padding in your list (ul) or div (or margin on your lis).

Alternatively you could also apply the middle image to the div and the bottom image to the UL, and the first list item will get the top image.
There are different approaches, and you’ll have to decide which one is best for you (i.e. if you have more content within that div or if you have indented list items…).

cb2004
06-11-2007, 12:12 PM
How we looking guys? Any pointers would be absolutely fantastic. Cheers for your help so far as well.


<!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>Untitled Document</title>
<style>
#product {
width: 548px;
}

#product ul {
padding: 0;
margin: 0;
list-style: none;
}

#product li {
background: url(limiddle.gif) repeat-y;
text-align: center;
display: block;
width: 132px;
float: left;
margin: 0 5px 5px 0;
}

#product div.top {
background: url(litop.gif) no-repeat;
height: 20px;
}

#product div.bottom {
background: url(libottom.gif) no-repeat;
height: 20px;
}
</style>
</head>
<body>
<div id="product">
<ul>
<li><div class="top"></div>Test<div class="bottom"></div></li>
<li><div class="top"></div>Test<div class="bottom"></div></li>
<li><div class="top"></div>Test<div class="bottom"></div></li>
<li><div class="top"></div>Just testing if this will drop down onto another which it does not which is great<div class="bottom"></div></li>
<li><div class="top"></div>Test<div class="bottom"></div></li>
<li><div class="top"></div>Test<div class="bottom"></div></li>
<li><div class="top"></div>Test<div class="bottom"></div></li>
<li><div class="top"></div>Test<div class="bottom"></div></li>
</ul>
</div>
</body>
</html>

Bill Posters
06-11-2007, 01:42 PM
Seems to work OK in FF/Win, IE7 and Op9/Win.

I'd reconsider whether the div elements within the list items are the right choice. I'd be inclined to opt for span elements displayed as block elements. At least, that way, it won't potentially throw the default list item alignment out for those w/o CSS.
(It also just seems 'wrong' to use a div in that way. Div elements are a broad brush, imho, and should be reserved for broader gestures, not for something within a list item. That's just my opinion, though.)

cb2004
06-11-2007, 02:07 PM
Cheers for your help.

I thought we were on the home straight however I have encountered some problems. If you try this code you will see things are getting pushed out of place. Any ideas?:


<!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>Untitled Document</title>
<style>
#product {
width: 548px;
}

#product ul {
padding: 0;
margin: 0;
list-style: none;
}

#product li {
background: url(limiddle.gif) repeat-y;
text-align: center;
display: block;
width: 132px;
float: left;
margin: 0 5px 5px 0;

}

#product div.top {
background: url(litop.gif) no-repeat;
height: 20px;
}

#product div.bottom {
background: url(libottom.gif) no-repeat;
height: 20px;
}
</style>
</head>
<body>
<div id="product">
<ul>
<li>
<div class="top"></div>
<a href="index.php?act=viewCat&amp;catId=108"><img src="images/uploads/23054.jpg" alt="Angels" border="0" height="120" /></a><br />
<a href="index.php?act=viewCat&amp;catId=108">Angels</a>
<div class="bottom"></div>
</li>
<li>
<div class="top"></div>
<a href="index.php?act=viewCat&amp;catId=91"><img src="images/uploads/7523.jpg" alt="Beards &amp; Moustache's" border="0" height="120" /></a><br />
<a href="index.php?act=viewCat&amp;catId=91">Beards &amp; Moustache's</a>
<div class="bottom"></div>
</li>
<li>
<div class="top"></div>
<a href="index.php?act=viewCat&amp;catId=96"><img src="images/uploads/6155.jpg" alt="Clowns" border="0" height="120" /></a><br />
<a href="index.php?act=viewCat&amp;catId=96">Clowns</a>
<div class="bottom"></div>
</li>
<li>
<div class="top"></div>
<a href="index.php?act=viewCat&amp;catId=93"><img src="images/uploads/22296.jpg" alt="Cowboys &amp; Indians" border="0" height="120" /></a><br />
<a href="index.php?act=viewCat&amp;catId=93">Cowboys &amp; Indians</a>
<div class="bottom"></div>
</li>
<li>
<div class="top"></div>
<a href="index.php?act=viewCat&amp;catId=102"><img src="images/uploads/94332.jpg" alt="Eye Masks" border="0" height="120" /></a><br />
<a href="index.php?act=viewCat&amp;catId=102">Eye Masks</a>
<div class="bottom"></div>
</li>
<li>
<div class="top"></div>
<a href="index.php?act=viewCat&amp;catId=105"><img src="images/uploads/26154.jpg" alt="Flags &amp; St Georges Accessories" border="0" height="120" /></a><br />
<a href="index.php?act=viewCat&amp;catId=105">Flags &amp; St Georges Accessories</a>
<div class="bottom"></div>
</li>
<li>
<div class="top"></div>
<a href="index.php?act=viewCat&amp;catId=94"><img src="images/uploads/383bk.jpg" alt="Gangsters &amp; Molls" border="0" height="120" /></a><br />
<a href="index.php?act=viewCat&amp;catId=94">Gangsters &amp; Molls</a>
<div class="bottom"></div>
</li>
<li>
<div class="top"></div>
<a href="index.php?act=viewCat&amp;catId=101"><img src="images/uploads/23016.jpg" alt="Glasses" border="0" height="120" /></a><br />
<a href="index.php?act=viewCat&amp;catId=101">Glasses</a>
<div class="bottom"></div>
</li>
<li>
<div class="top"></div>
<a href="index.php?act=viewCat&amp;catId=104"><img src="images/uploads/25042.jpg" alt="Gloves" border="0" height="120" /></a><br />
<a href="index.php?act=viewCat&amp;catId=104">Gloves</a>
<div class="bottom"></div>
</li>
<li>
<div class="top"></div>
<a href="index.php?act=viewCat&amp;catId=95"><img src="images/uploads/22659.jpg" alt="Instant Kits" border="0" height="120" /></a><br />
<a href="index.php?act=viewCat&amp;catId=95">Instant Kits</a>
<div class="bottom"></div>
</li>
<li>
<div class="top"></div>
<a href="index.php?act=viewCat&amp;catId=100"><img src="images/uploads/28328.jpg" alt="Jewellery" border="0" height="120" /></a><br />
<a href="index.php?act=viewCat&amp;catId=100">Jewellery</a>
<div class="bottom"></div>
</li>
<li>
<div class="top"></div>
<a href="index.php?act=viewCat&amp;catId=103"><img src="images/uploads/Ali_G.jpg" alt="Masks" border="0" height="120" /></a><br />
<a href="index.php?act=viewCat&amp;catId=103">Masks</a>
<div class="bottom"></div>
</li>
<li>
<div class="top"></div>
<a href="index.php?act=viewCat&amp;catId=107"><img src="images/uploads/1438.jpg" alt="Other Costume Accessories" border="0" height="120" /></a><br />
<a href="index.php?act=viewCat&amp;catId=107">Other Costume Accessories</a>
<div class="bottom"></div>
</li>
<li>
<div class="top"></div>
<a href="index.php?act=viewCat&amp;catId=92"><img src="images/uploads/21757.jpg" alt="Pirates" border="0" height="120" /></a><br />
<a href="index.php?act=viewCat&amp;catId=92">Pirates</a>
<div class="bottom"></div>
</li>
<li>
<div class="top"></div>
<a href="index.php?act=viewCat&amp;catId=128"><img src="images/uploads/26443.jpg" alt="Schoolboys" border="0" height="120" /></a><br />
<a href="index.php?act=viewCat&amp;catId=128">Schoolboys</a>
<div class="bottom"></div>
</li>
<li>
<div class="top"></div>
<a href="index.php?act=viewCat&amp;catId=106"><img src="images/uploads/052G.jpg" alt="Sprays" border="0" height="120" /></a><br />
<a href="index.php?act=viewCat&amp;catId=106">Sprays</a>
<div class="bottom"></div>
</li>
<li>
<div class="top"></div>
<a href="index.php?act=viewCat&amp;catId=98"><img src="images/uploads/26932.jpg" alt="Tights" border="0" height="120" /></a><br />
<a href="index.php?act=viewCat&amp;catId=98">Tights</a>
<div class="bottom"></div>
</li>
<li>
<div class="top"></div>
<a href="index.php?act=viewCat&amp;catId=99"><img src="images/uploads/22168.jpg" alt="Weapons" border="0" height="120" /></a><br />
<a href="index.php?act=viewCat&amp;catId=99">Weapons</a>
<div class="bottom"></div>
</li>
</ul>
</div>
</body>
</html>

Bill Posters
06-11-2007, 03:39 PM
Can't you put up a url instead?
It's alot easier for us to quickly check than having to open an editor, paste in your code, save, etc...

cb2004
06-11-2007, 03:47 PM
Apologies.

Here (http://www.majesticit.co.uk/dynamicli/)

cb2004
06-11-2007, 07:26 PM
Still struggling. Could this be done better with floating divs?

cb2004
06-12-2007, 10:07 AM
The same thing happens with floating divs. Any ideas people:

Divs (http://www.majesticit.co.uk/dynamicli/divs.html)

_Aerospace_Eng_
06-12-2007, 10:16 AM
Just start a different list after every four lis. Use clear:both; on the ul.

cb2004
06-12-2007, 01:59 PM
Cheers for the reply.

I wish I could and I have though about that. But this is generated using ecommerce software where the li is basically repeated. Is this not possible any other way as I will look into doing it differently?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum