Quick css/html question!

Herojuana

Herojuana

Herojuana

Associate
Joined
24 Nov 2007
Posts
1,262
Location
Lancashire
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.

menuprobnn2.png


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:
Well if u have a image that is only 1 pixel wide, then you can simply put it as the background and repeat vertically.

Then just have the text on top. But to use without the setting definite widths would be hard, if u set the width of the menu div (The whole thing) to 100% it'll fill the whole thing, then see if the menu button will automatically re-size to the whole thing or not, just play around with it and see how it goes

Gaunt
 
would help if you posted the html as well.
Also try and structure you stylesheet more like this

Code: 
.styleClass{
    float: left;
    display: none;
    margin: 0 2px 1px 5px;
}

makes things a lot more readable that keeping everything inline
 
Nothing wrong with doing it like he has. I used to indent it and all but find having it on one line much easier to go through and edit. Personal choice really.
 
Tripnologist said:
Nothing wrong with doing it like he has. I used to indent it and all but find having it on one line much easier to go through and edit. Personal choice really.
Click to expand...

Because its a pain when you want to open a style sheet in a narrow area and you have to keep scrolling right to see everything when using the one per line you can scroll easily using the wheel.

But if you want to make things harder that's your choice I supose.
 
Gman said:
Because its a pain when you want to open a style sheet in a narrow area and you have to keep scrolling right to see everything when using the one per line you can scroll easily using the wheel.

But if you want to make things harder that's your choice I supose.
Click to expand...


That's why I said it's down to personal preference. Just because you may have a smaller monitor or prefer having small windows open, doesn't mean the OP does.

The OP admits to being a bit of a 'noob' so I was really just posting so he'd know that if he prefers to do it the way he is doing, there is nothing wrong with it.

:)
 
Programming style in all preference

While yes there are set styles that should be adhered the main thing is that they are consistent.

Otherwise your all good to do it however you want, if he finds it easier he could put 6 blank lines between each part of the style just to break it up (Which i know programmers who do prefer that style).

All personal Preference
 
You must log in or register to reply here.
Back
Top Bottom