Forum Moderators: not2easy
<html>
<head>
<title>Horizontal Menu testing</title>
<style type="text/css">
.menu4 {
margin: 0px;
padding: 0px;
}
.menu4 ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menu4 li {
margin: 0px;
padding: 0px;
float: left;
font-family: arial, verdana, helvetica;
text-decoration: none;
text-align: center;
}
.menu4 {
padding: 0px;
background: #FFFFFF none;
}
.menu4 li {
margin-right: 0px;
text-align: center;
}
.menu4 a {
display: block;
color: #FFFFFF;
text-decoration: none;
background-color:#D2A929;
border-top:1px solid #ffcc66;
border-bottom:1px solid #996600;
border-right:1px solid #996600;
border-left:1px solid #ffcc66;
}
.menu4 a:hover {
display: block;
color: #FFFFFF;
text-decoration: none;
background-color:#999933;
border-bottom:1px solid #ffcc66;
border-top:1px solid #996600;
border-left:1px solid #996600;
border-right:1px solid #ffcc66;
}
#pagecontainer{
background-color: d2a929;
margin:0px;
padding: 0px;
width: 720px;
}
#maincontent {
border-width : 0px;
padding: 0px 0px 0px 0px;
margin: 0px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="pagecontainer">
<div id="maincontent">
<div class="menu4">
<ul>
<li><a href="../Solar/solar.html">link 1</a></li>
<li><a href="../Solar/solar.html">longer Link 2</a></li>
<li><a href="../Solar/solar.html">super long link 3</a></li>
<li><a href="../Solar/solar.html">link 4</a></li>
</ul>
<br clear="left">
</div>
</div>
</div>
</body>
</html>
Is there a way I can make the ul take up the entire available width and not fix the width of my buttons?
First, try adding the following styles to the .menu4 ul rule declaration. This causes the menu to visually fill the available space in .menu4.
float:left;
width:100%;
background-color:#D2A929;
border-top:1px solid #ffcc66;
border-bottom:1px solid #996600;
border-right:1px solid #996600;
border-left:1px solid #ffcc66;
However, it does not cause the buttons to stretch so that the full width of the menu is filled up by buttons. (This code keeps the buttons exactly how you have them, but extends the beveled bar beyond the width of the buttons.)
If you need the buttons themselves to expand, set the width on the .menu4 li rule declaration to 25% (four buttons divided into 100% is 25%; if you have five buttons, you'll want 20%; etc.).
cEM
