CSS - How Can I Make My Menu Items Display Evenly Spaced?

I'm wracking my brain, and I can't figure out why my content (which was fine when I just had it sitting in my empty graphical box) is now spaced half-way down the page. My work in progress is at "www *dot* deepwaterchurch *dot* com *slash* next"

I'd really appreciate any help. Thanks so much in advance.

P.S. The code is below (inline CSS for ease of fiddling):

Code:

<!--
*,html{margin:0;padding:0;}
body{
	background:black url("images/water.jpg") repeat-x top left;
	color:white;
	font:12pt verdana,arial,helvetica,geneva,sans-serif;
	width:100%;
	height:auto;
}
#container {
	width: 960px;
	position:relative;
	margin:0 auto;
	/*overflow:hidden;*/
}
#logo {
	position: absolute;
	background-image: url(images/logo.jpg);
	right: 52px;
	top: 15px;
	width: 250px;
	height: 131px;
}
#top {
	background:url(images/top.png) no-repeat;  
	width: 956px; 
	height: 646px; 
}
#content-container {
	background:url(images/boxmiddlerepeatable.png); 
	position:relative;
	width:852px;
	overflow:hidden;
	margin:0 auto;
	margin-top:-631px;
	top:0px;
	left:-2px;
}
#content{
position:relative;
margin:10px auto 0;
width:805px;
left:10px;
top:0;
min-height:646px;
}
#bottom {
	background-image:url(images/boxbottom.png); 
	position:relative;
	height:12px;
	width:851px;
	top:5px;
}
a:link {
	color: #3f7ba3;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color:#3f7ba3;
}
a:hover {
	text-decoration: none;
	color: #FFCC33;
}
a:active {
	text-decoration: none;
}
h1 {
	font-size: 9px;
	text-transform: uppercase;
	color:#666666;
}
h2 { 
	font-size: 13px;
	font-weight:900;
	color:#FFFFFF;
}
h3 {
	color:#999999;
	font-weight:400;
	font-size:12px;
}
#logo {
	position: absolute;
	background-image: url(images/logo.jpg);
	right: 52px;
	top: 15px;
	width: 250px;
	height: 131px;
}
.clear{clear:both;height:15px;
}
#navtabs {
	width:462px;
	height:60px;
	position:absolute;
	top:-10px;
	left:5px;
}
#navtabs ul {
	display: inline;
	margin: 0;
	padding: 0;
}
#navtabs li {
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
    position: relative;
    width: auto;
}
#navtabs li ul {
	position: absolute;
	width: 10em;
	left: -999em;
}
#navtabs li:hover ul {
	left: auto;
}
#navtabs li:hover ul, #navtabs li.sfhover ul {
	left: auto;
}
li.whoweare a {
	background-color:#000000;
	background: url(images/navigation/whoweare.jpg); 
	display: block;
	width: 77px;
	height: 67px;
	text-indent: -999999px;
	overflow: hidden;
}
li.whoweare a:hover {
background-color:#000001;
background: url(images/navigation/whoweare.jpg);
background-position:
-77px 0;
}
li.whatwedo a {
	background-color:#000000;
	background: url(images/navigation/whatwedo.jpg); 
	display: block;
	width: 77px;
	height: 67px;
	text-indent: -999999px;
	overflow: hidden;
}
li.whatwedo a:hover {
background-color:#000001;
background: url(images/navigation/whatwedo.jpg);
background-position:
-77px 0;
}
li.whatwedodown a {
background-color:#000002;
	background: url(images/navigation/whatwedo.jpg); 
	display: block;
	width: 77px;
	height: 67px;
	text-indent: -999999px;
	overflow: hidden;
	background-position:-77px 0;
}
li.beforeyoucome a {
background-color:#000000;
	background: url(images/navigation/beforeyoucome.jpg); 
	display: block;
	width: 77px;
	height: 67px;
	text-indent: -999999px;
	overflow: hidden;
}
li.beforeyoucome a:hover {
background-color:#000001;
background: url(images/navigation/beforeyoucome.jpg);
background-position:
-77px 0;
}
li.beforeyoucomedown a {
background-color:#000002;
	background: url(images/navigation/beforeyoucome.jpg); 
	display: block;
	width: 77px;
	height: 67px;
	text-indent: -999999px;
	overflow: hidden;
	background-position:-77px 0;
}
li.onceyourehere a {
background-color:#000000;
	background: url(images/navigation/onceyourehere.jpg); 
	display: block;
	width: 77px;
	height: 67px;
	text-indent: -999999px;
	overflow: hidden;
}
li.onceyourehere a:hover {
background-color:#000001;
background: url(images/navigation/onceyourehere.jpg);
background-position:
-77px 0;
}
li.onceyoureheredown a {
background-color:#000002;
	background: url(images/navigation/onceyourehere.jpg); 
	display: block;
	width: 77px;
	height: 67px;
	text-indent: -999999px;
	overflow: hidden;
	background-position:-77px 0;
}
li.faq a {
background-color:#000000;
	background: url(images/navigation/faq.jpg); 
	display: block;
	width: 77px;
	height: 67px;
	text-indent: -999999px;
	overflow: hidden;
}
li.faq a:hover {
background-color:#000001;
background: url(images/navigation/faq.jpg);
background-position:
-77px 0;
}
li.faqdown a {
background-color:#000002;
	background: url(images/navigation/faq.jpg); 
	display: block;
	width: 77px;
	height: 67px;
	text-indent: -999999px;
	overflow: hidden;
	background-position:-77px 0;
}
li.contactus a {
background-color:#000000;
	background: url(images/navigation/contactus.jpg); 
	display: block;
	width: 77px;
	height: 67px;
	text-indent: -999999px;
	overflow: hidden;
}
li.contactus a:hover {
background-color:#000001;
background: url(images/navigation/contactus.jpg);
background-position:
-77px 0;
}
li.contactusdown a {
background-color:#000002;
	background: url(images/navigation/contactus.jpg); 
	display: block;
	width: 77px;
	height: 67px;
	text-indent: -999999px;
	overflow: hidden;
	background-position:-77px 0;
}

-->
</style>
	
</head>
<body>
<div id="container">
<div id="top"></div><!--end top-->
<div id="content-container">
<div id="content"><!--START ENTERING CONTENT HERE-->
<div id="logo"></div>
 <div id="navtabs">
		<ul id ="nav">
	<li class="whoweare"><a href="whoweare">WHO WE ARE</a></li>
	<li class="whatwedo"><a href="whatwedo">WHAT WE DO</a></li>
	<li class="beforeyoucome"><a href="beforeyoucome">BEFORE YOU COME</a></li>
	<li class="onceyourehere"><a href="onceyourehere">ONCE YOU'RE HERE</a></li>
	<li class="faq"><a href="faq">FAQ</a></li>
	<li class="contactus"><a href="contactus">CONTACT US</a></li>	</ul></div><!--end navigation-->
	<div id="wrap">

    <div id="controller" class="hidden">
        <span class="jFlowControl">Current Series</span>
        <span class="jFlowControl">We're Social</span>
        <span class="jFlowControl">Compassion</span>
    </div>
    
    <div id="prevNext" class="hidden">
        <img src="images/prev.png" alt="Previous Tab" class="jFlowPrev" align="left"/>
        <img src="images/next.png" alt="Next Tab" class="jFlowNext" align="right"/>
    </div>
    <div id="slides">
        <div><img class="cushycms" src="images/currentseries.jpg" height="289" alt="Current Series Graphic" width="462" /><p class="slideshow">Current Series</p></div>
        <div><a href="social"><img src="images/weresocial.jpg" alt="We're Social" usemap="#social" border="0"></a>
		<map name="social"><area shape="rect" coords="21,86,232,258" href="http://www.facebook.com/group.php?gid=8981012794&ref=ts" />
		<area shape="rect" coords="252,97,426,271" href="http://twitter.com/deepwaterchurch" /></map>
		</div>
        <div><img src="images/luv.jpg" alt="show a little luv" class="cushycms"/></div>
    </div>
    </div>
<div id="overlay" style="z-index:3; position:relative; top:-209px; left:10px; width:462px; height:289px;"><img src="images/slideoverlay.png" /></div>
<!-- end slideshow -->
<div id="tagline" style="position:relative; top:-390px; left:492px;"><img src="images/tagline.jpg" /></div>
CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />


</div><!--end content-->
<div id="bottom"></div><!--end bottom-->	
</div><!--end content-container-->
<div class="clear"></div><!--end clearing div-->
</div><!--end container-->

Hello,

I'm customising a theme in wordpress and having a problem centering the three widgets that appear in the footer at the bottom. Nothing seems to work that I have tried. I know very little about css but understand the basic principle but can't seem to find the problem. I want the footer to be 100% the width of the page and for the three wigets to be in a single row of 3 but in the center and not off to the left. I've tried adjust the float but it just stacks them on top of each other set to none and over to the right set to right... I've inlcuded the CSS below and also the code in my footer.php page. Thanks in advance.

test site is http://mtbireland.com/hkr



Code:

</div>
</div>
</div>
<div style="width:100%; text-align: center; margin: 0 auto;">
<div id="footer"><div id="footer-left">
    <ul>
<?php if ( !function_exists('dynamic_sidebar')
   || !dynamic_sidebar('footer 1') ) : ?> <li>
      <?php endif; ?>
    </ul>
  </div>
  <div id="footer-middle">
    <ul>
<?php if ( !function_exists('dynamic_sidebar')
   || !dynamic_sidebar('footer 2') ) : ?> <li>
      <?php endif; ?>
    </ul>
  </div>
    <ul>
<?php if ( !function_exists('dynamic_sidebar')
   || !dynamic_sidebar('footer 3') ) : ?> <li>
      <?php endif; ?>
    </ul>
  </div>

Code:

#footer {
	height:200px;
	padding:20 0 0 0;
	color:#FFFFFF;
	font-size:12px;
	font-weight:normal;
	line-height:20px;
	font-family: Tahoma,georgia,Century gothic,  Arial, sans-serif;
	width:100%;
	float:left;
	background:#392E2C;
	text-align:left;
	}

/* Footer Widgets */
#footerwidgets {
	display: block;
	width:100%;
	background:#392E2C;
}
#footer-left {
	width: 210px;
	float: left;
	margin: 15px 10px 10px 30px;
	padding: 10px;
	text-align:left;
}
#footer-middle {
	width: 210px;
	float: left;
	margin: 15px 10px 10px 15px;
	padding: 10px;
	text-align:left;
}
#footer-right {
	width: 210px;
	float: right;
	margin: 15px 10px 10px 15px;
	padding: 10px;
	text-align:left;
}

Hey all,

Here's the site in question. It validates, and more or less displays how i want it in FF.

Thing is, is that in IE it displays the menu button images in reverse order...i have NO idea why it's doing this. It's based off the alistapart menu, that i've used numerous times without problems.

Here's the HTML;
Code:

      <ul id="nav">
        <li><a href="index.php"><img src="images/home_button.gif" alt="Home button image"></a></li>
        <li><a href="about.php"><img src="images/about_button.gif" alt="About Freedom Boat Sales button image"></a></li>
        <li><a href="#"><img src="images/inventory_button.gif" alt="Product inventory button image"></a> 
          <ul>
            <li><a href="newproducts.php" class="menutext">new</a></li>
            <li><a href="preownedproducts.php" class="menutext">pre-owned</a></li>
          </ul>
        </li>
        <li><a href="#"><img src="images/requests_button.gif" alt="Request button image"></a>
          <ul>
            <li><a href="requests.php?item=products" class="menutext">products</a></li>
            <li><a href="requests.php?item=pricing" class="menutext">pricing</a></li>
            <li><a href="requests.php?item=brochure" class="menutext">brochure</a></li>
          </ul>
        </li>
        <li><a href="contact.php"><img src="images/contact_button.gif" alt="Contact button image"></a></li>
      </ul>

Here's the CSS;
Code:

#menuposition {
width:730px;
height:30px;
position:relative;
margin:auto;
z-index:10;
}

ul#nav {
	list-style: none;
	height:30px;
	width:730px;
	}

ul li {
	float:left;
	height:30px;
	width:146px;
	position: relative;
	}

li ul {
	position: absolute;
	top:30px;
	display: none;
	list-style:none;
	}

ul li a {
	display: block;
	text-decoration:none;
	text-align:left;
	font:10px verdana, arial, sans-serif;
	}

li:hover ul, li.over ul {
    display: block;
	margin-left:20px;
	margin-top:-1px;
	width:118px;
	background-color:#E7E7E7;
	border-top:2px solid #666;
	border-left:1px solid #CCC;	
	border-right:1px solid #CCC;	
	border-bottom:1px solid #CCC;	
	}

.menutext {
width:118px;
height:30px;
}

a.menutext {
color:#255CB8;
text-decoration:none;
}

a.menutext:hover {
color:red;
text-decoration:none;
background-color:#DCDCDC;
}

	
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: right; }
* html ul li a { height: 1%; }
/* End */

Also, any thoughts on why the blue background won't extend the full screen height in FF?

Thanks!

Hi,

Can somebody tell me why the menu on the url below needs so much space
between menu items? (between the home, browses, forms, pages).

Maybe a margin / padding problem, but I cannot seem to find it.

The URL: http://www.genwise.com/temp/ordersbrowse.aspx.htm

Thank you!

--
Fizgig2

I'm using a menu from CSSPlay, and I have it working. http://www.wattersisere.co.uk/devshed

It also works for browsers with 800x600 screens. However, as you can see the menu items on the top bar are close together (2 * 11px). I am wanting to increase the spacing between them depending on the browser size. Maybe a % would be appropriate, any other ideas would be super.

Alternatively, I could increase the spacing between them to an aesthetically pleasing size and then force the smaller browsers to have a horizontal scrollbar. What would I have to make this work, or would you not recommend it?

Thanks,

Watters

Hello,

I'm new to this site which is really interesting, I hope a nice soul will be able to help me... I've tried to solve this but I can not find the solution.

my site is here, the code are too long to post here. I hope the moderator will understand.

moureau . me / pro.xml
moureau . me / site.css

The products menu has a problem... As you can see.

If I use display-block or -inline-block the result is different but never ok.

If I use Inline-Block, all the drop down menu items have the width(+padding) of the father menu except the last line which is longer without the right padding also, text and background.

If I use Block, all the drop down menu items have the width(+padding) of the father menu but the last line goes out of the menu only during an hover and just the text, not the black transparent background which has the same length as other drop down menu items...

What should I add to solve that ?

I would like the menu to be large enough to show all the items.

I'm using ImpressPages.org CMS that's why I can not use another layout for these menus.

Thanks a lot.

When I view my web pages with IE6 or resize the window the footer items fall start falling out of place.

Link: website

CSS Link: CSS Code

I am creating a dropdown menu based on suckerfish. The top level appears correctly, however the first submenu level puts all the menu items stacked over top of eachother right under the top level. Everything is correct except the items are overlapping. My html and css are below.

<ul id="nav">
<li style="border-left: none;">
<link here>
<ul>
<li>
<link here>
<ul>
<li>
<link here>
</li>
</ul>
<ul>
<li>
<link here>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<link here>
<ul>
<li>
<link here>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<link here>
</li>
</ul>
</li>
<li>
<link here>
<ul>
<li>
<link here>
</li>
</ul>
<ul>
<li>
<link here>
</li>
</ul>
</li>
<li>
<link here>
</li>
<li>
<link here>
</li>
<li>
<link here>
</li>
<li>
<link here>
</li>
</ul>


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

#nav a {
display: block;
}

#nav li {
float: left;
padding: 0px 10px 0px 10px;
}

#nav li ul {
position: absolute;
width: 200px;
color: #FFF;
background-color: #000;
left: -999em;
}

#nav li:hover ul {
left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

#nav li ul ul {
margin: -1em 0 0 10em;
}

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
left: auto;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul {
left: auto;
}

My CSS is pulled pretty much straight from suckerfish. there are a few small changes like the widths and background color, but the issue was there even when it was a direct copy. Currently I am only trying to get this to in firefox, as I am getting the same issue in every browser I try.

Just an fyi, I am using umbraco as the CMS for this site, and it is generating the html for the menu. There are actual links I just cant post them as I am new here, they contain just the hfer attribute.

Thanks

test link: users.tpg.com.au/tetsuo/CSS_help/index.html

Hi guys, Im really new to CSS, and doing a bit of crammed-study on it.

I finally found a fix that worked on css list navigation that i could use that'll work in IE but i cant seem to center each menu item to each respective rollover image (the BG gifs).

Some help on this would be greatly appreciated, i cant seem to find anything to fix this. I've tried several solutions (which is probably why my css might look like a huge mess).

the css file is he users.tpg.com.au/tetsuo/CSS_help/awis.html

hi, Im making a menu that looks like:
link1 link2 link3 link4

and then wen you hover over link a dropdown may appear

i have the problem that when they appear, they lay on top of each other. ANy idea how to make they display under each other. (it doesnt even work in IE at the mo, but i gues ill laft2 sort that later)

thanks

this is the html: PHP Code:
<ul>
<li><a href="index.php?action=home">home</a></li>
<li><a href="index.php?action=whatnew">what's new</a></li>
<li><a href="index.php?action=offers">special offers</a></li>
<li><a href="#">collections</a>
    <ul><a href="#">drop1</a></ul>
    <ul><a href="#">drop2</a></ul>
<!--when looping thru categories, do a WHERE cat_status >= 2-->
</li>
<li><a href="index.php?action=sBask">shopping basket</a></li>
<li><a href="index.php?action=contact">contact us</a></li>
</ul> 





this is the relevant css:
PHP Code:
#nav ul li {
        position: relative;
        margin: 0;
        padding: 0 10px 0 10px;
        list-style: none;
        display: inline;
    }

    #nav ul li ul {
        position: absolute;
        display: none;
    }
    
    #nav ul li:hover ul {
        display: block;
        left: 0;
        top: 10px;
    }

    #nav ul li:hover ul li {
        height: 20px;
    } 

I've worked out most css problems but I can't find any css that will make the drop down menu on my site sit on top of the YouTube video that you can see he www the-bizness .co. .uk

If you click on Home Page or Multimedia the drop-down menu is behind the video clip.

Very annoying. Any help appreciated!

Good morning

I can't seem to get the footer menu on my site (philipus.com) appear like I want it (it's Stu Nicholl's Skeleton Up menu). These are the problems.

1. The menu items (Start, Galleries etc) are all pushed to the left. I tried text-align: center in the #nav, li and ul but it doesn't work. How can I center them?

2. A border is defined in #nav ul which makes it appear also around the Galleries and Wallpapers pop-up menus. How can I ensure that it only appears around the pop-up menus?

3. The pop-up menu above the Galleries link isn't centered, but the pop-up above the Wallpapers links seems to be. Why is this and how can I ensure both are centered?

4. In IE, the pop-up menu items move to the left when the cursor hovers over them. How do I prevent this?

5. How can I make the pop-up menus a little bit "sticky", such that they allow you to slowly move the cursor up to them? Currently one has to move the cursor quickly to the pop-up menu otherwise it disappears. Does this have to do with the pop-up menus not overlapping a few pixels with the main menu?

6. I noticed when placing the menu in the middle of the page that the copyright text below the menu moved to the right. How can I ensure that the copyright text isn't affected by the menu?

Thanks immensely for your help. The menu's stylesheet is below.
/p

Code:

#nav,
#nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 10px verdana, sans-serif; border:1px solid #000; border-color:#ace #79b #68a #bde; border-width:1px 2px 2px 1px; background:#fff; position:relative; z-index:200;}
#nav {height:25px; padding:0;}

#nav li {float:left;}
#nav li li {float:none; background:#fff;}
/* a hack for IE5.x and IE6 */
* html #nav li li {float:left;}

#nav li a {display:block; float:left; color:#888; margin:0 25px 0 10px; height:25px; line-height:25px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}

#nav li:hover {position:relative; z-index:300;}
#nav li:hover ul {left:0; bottom:21px; top:auto;}
/* another hack for IE5.5 and IE6 */
* html #nav li:hover ul {left:10px;}

#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* yet another hack for IE5.x and IE6 */
* html #nav ul {width:1px;}

/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-15px; margin-left:100%; bottom:-7px; top:auto;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:underline; color:#57b;}

/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:-15px; margin-left:100%; bottom:-7px; top:auto;}

/* keep further levels hidden */
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}

/* show path followed */
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:underline; color:#57b;}

/* hide futher possible paths */
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#888;}

Something for the css pros:

Can anybody give me a hint on how to convert the following (table) based markup snippet to div-only markup?

http://www.twosailors.net/test.html

In all my tests I cannot get the rightmost cell expand so the whole menu gets it's total size. I do NOT want to convert the boxes to fixed width but keep them shrinkwrapping around the menu texts. Also, I do want a border around the boxes so any faking with background colors will not work either.

Any ideas?
Andreas Pardeike

Using tables, I can evenly space the cells apart. For instance:

Code:

<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th align="center"> qwerty1 </td>
    <th align="center"> qwerty2 </td>
    <th align="center"> qwerty3 </td>
  </tr>
</table>

There's nothing terribly wrong with this - it works! But I'm trying to switch to using CSS whereever possible. How would you achieve the same effect using stylesheets?

What is the best way to evenly space these links inside the div?

PHP Code:
<div id="contain_header">
        <div id="header">
        <a href="index.php" class="nav">Homepage</a>
        <a href="manufacturers.php" class="nav">Manufacturers</a>
        <a href="contact.php" class="nav">Contact Us</a>
        <a href="carfinder.php" class="nav">Advanced Car Search</a>
        <a href="specialoffers.php" class="nav">Special Offers</a>
        <a href="faq.php" class="nav">FAQ's</a></div>
    </div>