Tricky % menu

[Frantiq]

Hi Pros. I’ve been dealing with this problem for a few days now. Sorry about my english, I’ll do my best.

I’m trying to get a menu that is 100% width of the browser window. Within this menu there are 7 link with rollover effect. The problem for me is that I cant get is 1. the background-image to center and figure out the rollover effect when it’s all built around %. 2. I have also tried to get a bigger div centered in a smaller div (that scales according to the browser window size) while the big div holds the rollover effect.

I’ve made a test.html for you to view, PLEASE help me. I’m an intern at an agency in my home contry and the regular developer is on vacation. :/

here’s the site: http://www.henrikbackman.com/fom/test.html and the css is located at http://www.henrikbackman.com/fom/css/style.css

/Henrik

[Rob MacKay]

did you put every LI in a DIV for a reason? I think you might be over complicating things a little maybe?

[Frantiq]

"Robskiwarrior" wrote:

did you put every LI in a DIV for a reason? I think you might be over complicating things a little maybe?

I’m pretty sure I did over complicate it. I’m not that good with css, but I have to get this working.

[Rob MacKay]

how I would do it in my head is use a UL then set the LI to display:inline-block (float:left for IE).

then With your A links just do what you have done. instead of setting a XXpx XXpx for background position – try doing top center, then it will always put the graphic in the centre, without depending on the size of its container, surely…

Obviously I have not tried any of this stuff out…

[Frantiq]

"Robskiwarrior" wrote:

how I would do it in my head is use a UL then set the LI to display:inline-block (float:left for IE).

then With your A links just do what you have done. instead of setting a XXpx XXpx for background position – try doing top center, then it will always put the graphic in the centre, without depending on the size of its container, surely…

Obviously I have not tried any of this stuff out…

Could you write a short example on how that would look? I have no idea on where to start.

[Rob MacKay]

Code:

ul#nav {
width:100%;
height:25px;
background:url(my/repeating/background/image.jpg) repeat-x;
list-style-type:none;
}

ul#nav li {
display:inline-block;
float:left; /*for IE really*/
min-width:100px; /*set to longest text: so when it rescales the link text dosnt hide*/
}

ul#nav li a {
display:block;
width:100%;
height:25px;
outline:none;
}

• Item 1
• Item 1
• Item 1
• Item 1

Something like that….

Edit: oh looks like you are there anyway :D

[Author]

Posts