Forums

Give help. Get help.

  • # February 9, 2013 at 11:01 pm

    Hi everyone, just started learning HTML/CSS. (My background is database dev.)

    I made a horizontal menu but the last item which contains a button and image will move to the next line when re-sizing the window. I can’t seem to troubleshoot it myself after 2 days. I will be forever grateful to the person who can resolve this for me! :D

    Cheers,
    Lana

    http://cdpn.io/ovIyG

    # February 10, 2013 at 2:57 am

    Tried that but it didn’t work. By the way, I meant to say zooming in/out – not resizing the window!

    # February 10, 2013 at 4:10 am

    The simple fact is that because you are using pixels as widths on everything rather than percentages you will always encounter this problem.

    This is because a declared pixel is not really a screen pixel :http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

    Eventually the way the browser will run out of space trying to cram all the pixels you have declared into a set width and your floated items will drop down.

    Percentage widths will go a long way to resolving this problem…it’s not a complete fix but it will help.

    Finally, in my experience users just don’t zoom that much…if it’s not breaking until you get to 150% then I would say that you are fine.

    # February 11, 2013 at 9:21 pm

    @paulie_d Thanks for the info on percentage widths versus pixels. I suspected as much but wasn’t sure how I could apply that to my coding.

    @ChrisP Thanks so much for the suggestion. I added the box-sizing: border-box and took off the width for the first and last child and made them all 11.11% width. Unfortunately, the last menu item now sits on the second line just underneath the first menu item. Any other ideas? Here’s the revised code:

    # February 11, 2013 at 9:22 pm

    @ChrisP Sorry I copied your code word for word so not necessary to show you the revisions. I did notice that when I got rid of the border-right on the #globalnav li’s it fixed the problem but I need the border for aesthetic purposes. Any other recommendations would be awesome!

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag