Hi everyone,
I'm having some trouble with getting my menu items to fill their alloted space.
Basically this is a horizontal navigation with about 6 tabs/ buttons. I want them to automatically stretch and be equal size and also stretch to the size of the actual menu div.
The solution i'm using now is to divide the page width by the amount of buttons and come up with an amount which I can use for a fixed pixel width of each tab.
Hopefully this picture might help you see what i'm trying to do.
As you can see (red circle) the menu doesn't quite stretch to the full width of the wrapper.
If anyone knows how I can counter this without using fixed widths for the buttonns I would very much appreciate it.
Also, if i've been unclear in an way please ask because i'm bit of a noob with html/css so im not sure if i've told everything I need to in order for someone to help me.
Cheers
Edit: Added the CSS for it:
I'm having some trouble with getting my menu items to fill their alloted space.
Basically this is a horizontal navigation with about 6 tabs/ buttons. I want them to automatically stretch and be equal size and also stretch to the size of the actual menu div.
The solution i'm using now is to divide the page width by the amount of buttons and come up with an amount which I can use for a fixed pixel width of each tab.
Hopefully this picture might help you see what i'm trying to do.
As you can see (red circle) the menu doesn't quite stretch to the full width of the wrapper.
If anyone knows how I can counter this without using fixed widths for the buttonns I would very much appreciate it.
Also, if i've been unclear in an way please ask because i'm bit of a noob with html/css so im not sure if i've told everything I need to in order for someone to help me.
Cheers
Edit: Added the CSS for it:
Code:
.menu {font-family:arial;font-weight: bold; width:815px; height:25px; position:relative; font-size:12px; z-index:100;float:center; margin-bottom:15px;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none;width:133.84px; height:25px; text-align:center; color:#acf2eb; border-top:1px solid #0f7ba6; border-left: 1px solid #015a7d; border-right: 1px solid #015a7d; border-bottom: 1px solid #0f7ba6; background:url("css-nav.gif") repeat-x; line-height:25px; font-size:12px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}
.menu ul li:hover a {color:#fff; background:url("css-navhover.gif") repeat-x;}
.menu ul li:hover ul {display:block; position:absolute; top:26px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#edd71c; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#b0e4e6; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
Last edited: