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
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.
@lanacaralee, it's the border on the li's, here's the fork..I gave the li's a box-sizing: border-box (incorporates padding and border into the width of the element); then took off the width for first and last child, and made them all 11.11% width.
@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:
@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!
@lanacaralee, I'm sorry I must have misunderstood your comment last night, if you add the box-sizing: border-box; to the li's there's no need to remove the right border, as the 1px border is included in the 11.11% width of the li's..the only thing that doesn't look aesthetically pleasing would be the white border that #globalNav will have at the end when you zoom out since 11.11% * 9 = 99.99%
You could remedy this by making the li's 11%, then make either the first or last li 12% so it will equal 100%, or, alternatively, give the #globalNav the same background color as the li's so it blends seemlessly
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
You could set a min-width.
Tried that but it didn't work. By the way, I meant to say zooming in/out - not resizing the window!
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.
@lanacaralee, it's the border on the
li's, here's the fork..I gave theli's a box-sizing: border-box (incorporates padding and border into the width of the element); then took off the width for first and last child, and made them all 11.11% width.@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:
@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!
@lanacaralee, normally, I'll add
so everything takes on the border-box..you'll have to add the vendor prefix's though.
Will that fix your problem? I didn't notice a right border in the
#globalNav@lanacaralee, I'm sorry I must have misunderstood your comment last night, if you add the box-sizing: border-box; to the li's there's no need to remove the right border, as the 1px border is included in the 11.11% width of the li's..the only thing that doesn't look aesthetically pleasing would be the white border that #globalNav will have at the end when you zoom out since 11.11% * 9 = 99.99%
You could remedy this by making the li's 11%, then make either the first or last li 12% so it will equal 100%, or, alternatively, give the
#globalNavthe same background color as the li's so it blends seemlessly