4 replies [Last post]
timware
Offline
Regular
Oakland CA
Last seen: 17 years 23 weeks ago
Oakland CA
Joined: 2003-12-01
Posts: 13
Points: 0

I have stacked three <ul> lists to create a horizontal navigation:

http://www.hyperarts.com/vertical_nav_test.html

The 4 <li>s in each row should all be the same height, and the hover state (2px yellow border) should happen in the whole <li>, but I can't get this happening. The CSS is in the <head> of the document, but here it is:

<style type="text/css">
#button {
width: 496px;
padding: 5px;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
color: #FFF;
}

#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
display: inline;
}

#button li {
margin: 0;
float: left;
width: 124px;
}

#button li a {
display: block;
padding: 5px;
color: #fff;
font-weight: bold;
text-decoration: none;
width: 100%;
}

html>body #button li a {
width: auto;
}

#button li a:hover {
border: 2px solid #FC0;
padding: 3px;
color: #fff;
}

/* CHAPTER COLOURS */

.overview { background:#F90; }

.technology { background:#999; }

.healthcare { background:#F30; }

.diagnostics { background:#639; }

.international { background:#9A60A3; }

.partnering { background:#3D5F36; }

.nutra { background:#68AC5B; }
.dk-nutra { background:#508546; }

.agbio { background:#369369; }

.biomaterials { background:#2E9FD7; }

.regulatory { background:#214C8B; }

.finance { background:#4F4420; }

.about { background:#072E5E; }

</style>

</head>

<body>

<hr>

<div id="button">
<ul>
<li class="overview"><a href="">Executive Overview</a></li>

<li class="diagnostics"><a href="">Diagnostics</a></li>

<li class="biomaterials"><a href="">Biomaterials/ Bioprocesses</a></li>

<li class="partnering"><a href="">Partnering</a></li>
</ul>

<ul>

<li class="technology"><a href="">Technology</a></li>

<li class="nutra"><a href="">Nutraceuticals</a></li>

<li class="regulatory"><a href="">Regulatory</a></li>

<li class="finance"><a href="">Finance and Cap Markets</a></li>
</ul>

<ul>

<li class="healthcare"><a href="">Healthcare</a></li>

<li class="agbio"><a href="">Agbio</a></li>

<li class="international"><a href="">International</a></li>

<li class="about"><a href="">Burrill & Company</a></li>
</ul>

</div>

Thanks. Tim

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 5 years 14 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

CSS horizontal nav using &lt;ul&gt; problem with heights etc

Works fine (I think) here, IE6, WinXPHome... what are you using that means it doesn't work?

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 25 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

CSS horizontal nav using &lt;ul&gt; problem with heights etc

same here IE6 and FB.7

Day

The only way to learn is to do it yourself

timware
Offline
Regular
Oakland CA
Last seen: 17 years 23 weeks ago
Oakland CA
Joined: 2003-12-01
Posts: 13
Points: 0

CSS horizontal nav using &lt;ul&gt; problem with heights etc

Well, in the interim I've fixed the problem and, as you said, it works on IE & NS, v5+, Mac & Win, so I'm there. The only bug is I want the width of this navigation to be 495px and wanted the width of the individual list items to be a set percentage of that. I just can't set the width of each list item to be 25% because IE chockes on it. I had to either set an absolute value or set the percentage to 24%. I had help on some forums to get to the solution, and thanks for your input. Here's the final code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

<html>

<style type="text/css">
#button {
padding: 3px;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
color: #FFF;
}

#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
display: inline;
}

#button li {
margin: 0;
padding:0;
float: left;
width: 124px;
}

/* here is where you specify the height of the block and the display */

#button li a {
display: block;
height:32px;
padding: 3px 3px 3px 8px;
color: #fff;
font-weight: bold;
text-decoration: none;
width: 100%;
}

html>body #button li a {
width: auto;
vertical-align: bottom;
}

#button li a:hover {
border: 2px solid #FC0;
padding: 1px 1px 1px 6px;
color: #fff;
}

/* CHAPTER COLOURS */

.overview { background:#F90; }

.technology { background:#999; }

.healthcare { background:#F30; }

.diagnostics { background:#639; }

.international { background:#9A60A3; }

.partnering { background:#3D5F36; }

.nutra { background:#68AC5B; }
.dk-nutra { background:#508546; }

.agbio { background:#369369; }

.biomaterials { background:#2E9FD7; }

.regulatory { background:#214C8B; }

.finance { background:#4F4420; }

.about { background:#072E5E; }

</style>

</head>

<body>

<hr>
<center>I would like all the items in each row to be as tall as the tallest item. --></center>

<p>
<div id="button">
<ul>
<li class="overview"><a href="">Executive Overview</a></li>

<li class="diagnostics"><a href="">Diagnostics</a></li>

<li class="biomaterials"><a href="">Biomaterials/ Bioprocesses</a></li>

<li class="partnering"><a href="">Partnering</a></li>
</ul>
<br clear=all><ul>

<li class="technology"><a href="">Technology</a></li>

<li class="nutra"><a href="">Nutraceuticals</a></li>

<li class="regulatory"><a href="">Regulatory</a></li>

<li class="finance"><a href="">Finance and Cap Markets</a></li>
</ul>
<br clear=all><ul>

<li class="healthcare"><a href="">Healthcare</a></li>

<li class="agbio"><a href="">Agbio</a></li>

<li class="international"><a href="">International</a></li>

<li class="about"><a href="">Burrill & Company</a></li>
</ul>

</div>

css_seth
Offline
Regular
minneapolis, mn
Last seen: 17 years 18 weeks ago
minneapolis, mn
Joined: 2004-01-02
Posts: 33
Points: 0

CSS horizontal nav using &lt;ul&gt; problem with heights etc

maybe try not using lists at all?

i imagine you could get the same effect using simply anchor tags and a combination of padding (to get your text right within' the button) and display: inline and perhaps some creative positioning? i dunno

i'm a noob, but i found some helpful information pointing out how that method of using lists isn't necessary really, and it's more code!