CSS - 100% Width Horizontal Menu Using Css

how can i make list items that are in a horizontal list all the same width. I try adding the width attribute to it but it has no effect

new to the world of css and now working on a shell for a website I'm doing.

here is the css
PHP Code:
 html, body{ 
 margin:0; 
 padding:0; 
 }
 
h1, h2, h3, h4, h5, h6 {
 color: #bf9060;
}

img {
    padding-bottom: 2px;
}
 
#pagewidth{ 
 width:100%; 
  min-width: 500px; 
  
} 
 
#header{ 
 height:88px; 
 width:100%; 
 background:#ccae8f; 
 background-image: 
 url("/images/pillowback3.jpg");
 background-repeat: repeat-x;
 }
#navcontainer
{
margin: 0;
padding: 0;
height: 25px;
width: 100%;
}

#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;

}

#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#navcontainer ul li a
{
background: #ffffff;
width: 125px;
height: 18px;
border: 1px solid #ccae8f;
padding: 0;
margin: 0;
color: #000000;
text-decoration: none;
display: block;
text-align: center;
font: normal 14px/22px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navcontainer ul li a:hover
{
color: #ffffff;
background: #806c59;
}

#navcontainer a:active
{
background: #806c59;
color: #ffffff;
}

#navcontainer li#active a
{
background: #c60;
border: 1px solid #c60;
color: #fff;
} 





and the list
PHP Code:
<div id="navcontainer">
            <ul id="navlist">
            <li><a href="/pillows.php" title="Everything you need for your pillow needs">Home</a></li>
            <li><a href="/build/index.php" title="Start here for the Best Pillows the net has to offer">Build</a></li>
            <li><a href="/samples/index.php" title="Pick up to 8 samples ">Samples</a></li>
            <li><a href="/products/index.php" title="See our full line of Products">Products</a></li>
            <li><a href="/about/index.php" title="Meet our staff. How PillowWorks works.">About</a></li>
            <li><a href="/contact/index.php" title="Contact us for any reason">Contact</a></li>
            </ul>
            </div> 





as you can see i'm using px to style the size of the elements, but that isn't very liquid

Is there any way to have horizontal list items automatically fill any given width?

for example, If I have 5 list items, I can set each width to 20% and the list will fill the width of the container, but if I don't set a width, then they collapse to the left.

the behavior I'm after is like a table. The 'old' way to create a horizontal list would be to create a table with one row and 5 cols. Setting the width of the table to 100% would make each cell 20% automatically. Any way to accomplish this in css without explicitly setting the width?

Hi all,

I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear.

You can find the page he
http://www.perceptes.com/topdog/

The CSS and JS (uses jQuery) can be found he
http://www.perceptes.com/topdog/css/screen.css
http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment)
http://www.perceptes.com/topdog/js/tdps.js
http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment)

For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look.

Thanks very much in advance!

I am trying to get a page that has 3 boxes in a row (horizontally) with the first two having a fixed width, and my problem is getting the third one to take up the rest of width - so I don't have to specifiy a width for the third one. I have tried the auto width which works great and shows up perfectly in Firefox but just leaves a not very wide box in IE. There is probably an easier or cleaner way to do this but this is what I have so far:

CSS:

#box1 {
width:70px;
height:120px;
text-align:right;
padding:10px;
border: 1px solid gray;
font-size:10px;
position:absolute; top:250px; left:0px;
}

#box2 {
width:70px;
height:120px;
text-align:right;
padding:10px;
border: 1px solid gray;
font-size:10px;
position:absolute; top:250px; left:97px;
}

#box3 {
width:auto; /*WIDTH IN QUESTION*/
height:120px;
text-align:right;
padding:10px;
border: 1px solid gray;
font-size:10px;
position:absolute; top:250px; left:194px; right:0px;
}

HTML:

<body>
<div id="box1">TEST</div>
<div id="box2">TEST</div>
<div id="box3">TEST</div>
</body>

Gday CSS PPL,

Im still yet to test on other browers, but im using IE 6.0

while the explorer is full screen the width of my div is 100%

But when i resize the browser on the horizontal untill a horizontal scroll bar appear, and scroll to the right, the div cuts off where the scrolling begins,

div.banner {
background-image: url(../images/banner_repeat.gif);
width:100%;
height:163px;
text-align:center;
}

and yeah, the background image 'banner_repeat' stops repeating at that point.

any help would be great,

Thx in advance,

James

Ok, I know virtually nothing about css, but realized that that a css menu is better for SEO. Anyway I found this vertical menu that works the way I want it. But I also need a horizontal version of it with dropdown submenus. Can someone help with this? I have been trying a bunch of things but it just looks awful and doesn't work right. It has 3 basic componets; Html, Javascript, and css.

Here they are below.

drop_down.js:
Code:

// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList; 

HTML:
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>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "style2.css";
</style>
</head>
<body> 
<ul id="nav"> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">About</a> 
    <ul> 
      <li><a href="#">History</a></li> 
      <li><a href="#">Team</a></li> 
      <li><a href="#">Offices</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Services</a> 
    <ul> 
      <li><a href="#">Web Design</a></li> 
      <li><a href="#">Internet Marketing</a></li> 
      <li><a href="#">Hosting</a></li> 
      <li><a href="#">Domain Names</a></li> 
      <li><a href="#">Broadband</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Contact Us</a> 
    <ul> 
      <li><a href="#">United Kingdom</a></li> 
      <li><a href="#">France</a></li> 
      <li><a href="#">USA</a></li> 
      <li><a href="#">Australia</a></li> 
    </ul> 
  </li> 
</ul> 
</body>
</html> 

Style2.CSS:
Code:

body {
	font: normal 11px verdana;
	}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
	}

ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

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

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
		
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
li:hover ul, li.over ul { display: block; } /* The magic */ 

I've tried the tutorials on CSS menus but can't seem to get it to work right for my project.

I want a spacer to seperate the buttons at 1 pixels wide but currently it's about 10 pixels wide. I've adjusted until i'm blue in the face can somebody help?


The code is below:

Code:

  <tr>
          
    <td width="766">
       <div id="navcontainer">        
          <ul>
          <li><a href="">Home</a></li>
          <li><a href=""> Project Status</a></li>
          <li><a href=""> Tasks</a></li>
          <li><a href="">General Information</a></li>
          <li><a href="">Completed Tasks</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Contact</a></li>
        </ul>
    </div>

CSS

Code:

   body,html {
   margin: 0;

}

#navcontainer ul {
	list-style-type: none;
	text-align: center;
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	margin: 0px;
	padding: 0px;


}

#navcontainer ul li {
	display: inline;


}

#navcontainer ul li a {
	text-decoration: none;
	padding: 0.2em 1em;
	color: #fff;
	background-image: url(images/back.gif);
	height: 24px;
	line-height: 23px;

}

#navcontainer ul li a:hover {
	color: #fff;
	background-color: #960033;
	background-attachment: fixed;
	background-repeat: repeat;
	background-position: center;
	background-image: url(images/backover.gif);


}

---

I am trying to create a navigation menu for a page using images i have sliced in photoshop and I now need to put the images all on a 900px wide line and link them to the appropiate pages.

When i put the images next to each other i end up with a gap. The only way I have found to solve the problem is to leave the img src all on the same line. I'm sure this isn't the best way to do it and it is throwing out the div below.

Ideas anyone?

Code:

Code:
Original - Code <div id="nav"> <img id="home" src="images/menu/home.gif" alt="" /><img id="about" src="images/menu/about.gif" alt="" /><img id="wedding" src="images/menu/wedding.gif" alt="" /><img id="corporate" src="images/menu/corporate.gif" alt="" /><img id="occasions" src="images/menu/occasions.gif" alt="" /><img id="contact" src="images/menu/contact.gif" alt="" /> </div>

  
<div id="nav">
<img id="home" src="images/menu/home.gif" alt="" /><img id="about" src="images/menu/about.gif" alt="" /><img id="wedding" src="images/menu/wedding.gif" alt="" /><img id="corporate" src="images/menu/corporate.gif" alt="" /><img id="occasions" src="images/menu/occasions.gif" alt="" /><img id="contact" src="images/menu/contact.gif" alt="" />
    </div>

Jake

what i want as horizontal fly out menu BUT I want the list of items to appear horizontally in a line below. These menus have the items appear vertically from a horizontal menu

i looked at these and could find one

http://www.cssdrive.com/index.php/menudesigns/category/C20/

I have a horizonatal menu on my webise and the list items that drop down, are all jumbled into a single block of text. How do I create a new line fore each list item?