justinbriggs1 Posted May 21, 2009 Share Posted May 21, 2009 Hey everyone, this has been bugging me for awhile, probably something simple that I am missing but I can't seem to find it.I need a wrapper div to expand as I add <li> elements to it, but it doesn't want to cooperate, it just sits there at the same fixed width. The page in question is:http://www.summerforkids.com/dev/zen/and the element is called #navCatTabsWrapper, here is the code for that one:#navCatTabsWrapper{margin: 220px 0 0 265px;background-color:#ffffe0;color: #492c0c;}Why does the wrapper div not conform to the size of the <ul>? Any help would be appreciated. Thanks,JW Link to comment Share on other sites More sharing options...
jlhaslip Posted May 21, 2009 Share Posted May 21, 2009 there is a specific width of 575px involved. Link to comment Share on other sites More sharing options...
Ingolme Posted May 22, 2009 Share Posted May 22, 2009 Why do you have so many <div> elements around the list? <div id="navCatTabsWrapper"><div id="navCatTabs"><ul> <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=4&zenid=0387a6260909c00cdfb6030eedd09abc">Bath</a> </li> <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=5&zenid=0387a6260909c00cdfb6030eedd09abc">Bedding</a> </li> <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=9&zenid=0387a6260909c00cdfb6030eedd09abc">Diaper Bags</a> </li> <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=7&zenid=0387a6260909c00cdfb6030eedd09abc">Eat</a> </li> <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=6&zenid=0387a6260909c00cdfb6030eedd09abc">Furniture</a> </li> <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=10&zenid=0387a6260909c00cdfb6030eedd09abc">Gifts & Accessories</a> </li> <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=8&zenid=0387a6260909c00cdfb6030eedd09abc">Mattresses</a> </li> <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=3&zenid=0387a6260909c00cdfb6030eedd09abc">Play</a> </li> <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=2&zenid=0387a6260909c00cdfb6030eedd09abc">Wear</a> </li></ul></div></div> I don't think you need either of them, you can make it like this: <ul id="navCatTabs"> <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=4&zenid=0387a6260909c00cdfb6030eedd09abc">Bath</a> </li> <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=5&zenid=0387a6260909c00cdfb6030eedd09abc">Bedding</a> </li> <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=9&zenid=0387a6260909c00cdfb6030eedd09abc">Diaper Bags</a> </li> <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=7&zenid=0387a6260909c00cdfb6030eedd09abc">Eat</a> </li> <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=6&zenid=0387a6260909c00cdfb6030eedd09abc">Furniture</a> </li> <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=10&zenid=0387a6260909c00cdfb6030eedd09abc">Gifts & Accessories</a> </li> <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=8&zenid=0387a6260909c00cdfb6030eedd09abc">Mattresses</a> </li> <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=3&zenid=0387a6260909c00cdfb6030eedd09abc">Play</a> </li> <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=2&zenid=0387a6260909c00cdfb6030eedd09abc">Wear</a> </li></ul> And then condense all the CSS to adapt to it: #navCatTabs { text-align: center; padding: 0.5em 1em; list-style-type: none; text-align: left; margin: 220px 0 0 375px; background-color:#ffffe0; color: #492c0c;}#navCatTabs li { display: inline;}#navCatTabs ul li a { text-decoration: none; padding: 0em 0.3em; color: #492c0c; white-space: nowrap;}#navCatTabs li a:hover { color: #FF80C0; text-decoration: underline;} The <ul> element is a container just like a <div> is, except that it has semantiv value. You can give it an ID and style it without needing to put it inside another container. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.