Forums

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

Robskiwarrior

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

Frantiq

"Robskiwarrior" said:
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.

Robskiwarrior

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" said:
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.

Robskiwarrior


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;
}


<ul id=\"nav\">
   <li><a href=\"#\">Item 1</a></li>
   <li><a href=\"#\">Item 1</a></li>
   <li><a href=\"#\">Item 1</a></li>
   <li><a href=\"#\">Item 1</a></li>
</ul>

Something like that....

Edit: oh looks like you are there anyway :D

treehouse : what would you like to learn today?

Forums

Tricky % menu