Jump to content

<ul> Wrapper Width


justinbriggs1
 Share

Recommended Posts

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...