Grow your CSS skills. Land your dream job.

Tricky % menu

  • # March 5, 2009 at 10:23 am

    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
    # March 5, 2009 at 10:37 am

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

    # March 5, 2009 at 10:45 am
    "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
    # March 5, 2009 at 11:21 am

    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…

    # March 11, 2009 at 5:39 am
    "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
    # March 16, 2009 at 6:44 am
    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;
    }

    Something like that….

    Edit: oh looks like you are there anyway :D

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".