CSS Horizonal List Help

JonD · 23 Oct 2006 at 15:54

Im trying to create a horizonal list similar to this (with different colours of course)

http://www.tutorialtastic.co.uk/page/horizontal_css_block_navigation

But I want the yellow background to extend 100% wide.

Basically my links are left aligned, then any left over space extends to the end of the browser.

And ideas?

Flanders · 23 Oct 2006 at 16:11

The simplest way would be to whack the <ul></ul> in a div and give that the property width: 100%;, you might also want to give it the same background color as your list.

JonD · 23 Oct 2006 at 16:32

Yeah ive tried that but the li are float'd left so the div doesnt expand.

Flanders · 23 Oct 2006 at 17:09

Funny, works for me :confused:

Heres what I quickly knocked up using some of the code from that link:

XHTML:

Code:

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link title="default" href="test.css" type="text/css" rel="stylesheet" />

</head>

<body>

<div id="nav">

<ul id="navigation">
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>

</div>

</body>
</html>

CSS:

Code:

#nav {
  width: 100%;
  background: yellow;
  border: 1px solid #000;
  height: 26px;
}

#navigation {
  list-style: none;
  margin: 0;
  padding: 0;
}

#navigation li {
  float: left;
}

#navigation li a {
  display: block;
  background: yellow;
  width: 150px;
  text-align: center;
  color: red;
  padding: 3px 0;
}

#navigation li a:hover {
  background: red;
  color: yellow;
}

Hope that helps.

EDIT:

Realised after I hadnt assigned a height, should work now.

JonD · 23 Oct 2006 at 17:18

Yeh that works very wierd, I must have missed something.

One thing though. In IE, theres a small gap between each link, any way of getting rid of that?

JD