Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Mar 2007
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I create a dynamic li with a background?

    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:

    Code:
    <!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?
    Attached Thumbnails Attached Thumbnails How do I create a dynamic li with a background?-productbackground.gif  

  • #2

  • #3
    New Coder
    Join Date
    Mar 2007
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cheers for the link and fast response. However confusion entails . Which is the best method to use for my situation?

  • #4
    New Coder
    Join Date
    Mar 2007
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I gave this another whirl and just cant get there. Shall I add a span before and after, each with a background image?

  • #5
    New Coder
    Join Date
    Mar 2007
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is there a better way of doing this without the use of an <li>?

    Cheers.

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    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.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,475
    Thanks
    6
    Thanked 980 Times in 953 Posts
    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…).
    Last edited by VIPStephan; 06-09-2007 at 03:46 PM.

  • #8
    New Coder
    Join Date
    Mar 2007
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How we looking guys? Any pointers would be absolutely fantastic. Cheers for your help so far as well.

    Code:
    <!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>
    Attached Thumbnails Attached Thumbnails How do I create a dynamic li with a background?-litop.gif   How do I create a dynamic li with a background?-limiddle.gif   How do I create a dynamic li with a background?-libottom.gif  

  • #9
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    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.)

  • #10
    New Coder
    Join Date
    Mar 2007
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?:

    Code:
    <!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>

  • #11
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    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...

  • #12
    New Coder
    Join Date
    Mar 2007
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Apologies.

    Here

  • #13
    New Coder
    Join Date
    Mar 2007
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Still struggling. Could this be done better with floating divs?

  • #14
    New Coder
    Join Date
    Mar 2007
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The same thing happens with floating divs. Any ideas people:

    Divs

  • #15
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Just start a different list after every four lis. Use clear:both; on the ul.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •