I have stacked three <ul> lists to create a horizontal navigation:
<!-- m --><a class="postlink" href="http://www.hyperarts.com/vertical_nav_test.html">http://www.hyperarts.com/vertical_nav_test.html</a><!-- m -->
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=http://www.webdeveloper.com/forum/archive/index.php/"">Executive Overview</a></li>
<li class="diagnostics"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Diagnostics</a></li>
<li class="biomaterials"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Biomaterials/ Bioprocesses</a></li>
<li class="partnering"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Partnering</a></li>
</ul>
<ul>
<li class="technology"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Technology</a></li>
<li class="nutra"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Nutraceuticals</a></li>
<li class="regulatory"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Regulatory</a></li>
<li class="finance"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Finance and Cap Markets</a></li>
</ul>
<ul>
<li class="healthcare"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Healthcare</a></li>
<li class="agbio"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Agbio</a></li>
<li class="international"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">International</a></li>
<li class="about"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Burrill & Company</a></li>
</ul>
</div>
Thanks. TimThe reason some of the links aren't the same height is because you've specified a width which causes some of the links with long text to drop down to the next line. Try increasing the width of your #button li.Thanks. I removed the width attribute of the #button and this solves the line breaking problem. But what I *really* need is for all 4 items in each row to be the same height, with complete color fill and the hover border affecting the whole <li>. And for contextual reasons, I can't make the navigation any wider. Can I do it? Is there a way?
Thanks.
TimWell, since you have display:block; in your #button li a you should be able to specify a fixed height there.
Also, I'm not sure I follow your coloring problem. It all seems to work fine for me...
<!-- m --><a class="postlink" href="http://www.hyperarts.com/vertical_nav_test.html">http://www.hyperarts.com/vertical_nav_test.html</a><!-- m -->
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=http://www.webdeveloper.com/forum/archive/index.php/"">Executive Overview</a></li>
<li class="diagnostics"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Diagnostics</a></li>
<li class="biomaterials"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Biomaterials/ Bioprocesses</a></li>
<li class="partnering"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Partnering</a></li>
</ul>
<ul>
<li class="technology"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Technology</a></li>
<li class="nutra"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Nutraceuticals</a></li>
<li class="regulatory"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Regulatory</a></li>
<li class="finance"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Finance and Cap Markets</a></li>
</ul>
<ul>
<li class="healthcare"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Healthcare</a></li>
<li class="agbio"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Agbio</a></li>
<li class="international"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">International</a></li>
<li class="about"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Burrill & Company</a></li>
</ul>
</div>
Thanks. TimThe reason some of the links aren't the same height is because you've specified a width which causes some of the links with long text to drop down to the next line. Try increasing the width of your #button li.Thanks. I removed the width attribute of the #button and this solves the line breaking problem. But what I *really* need is for all 4 items in each row to be the same height, with complete color fill and the hover border affecting the whole <li>. And for contextual reasons, I can't make the navigation any wider. Can I do it? Is there a way?
Thanks.
TimWell, since you have display:block; in your #button li a you should be able to specify a fixed height there.
Also, I'm not sure I follow your coloring problem. It all seems to work fine for me...