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
@lanacaralee, it’s the border on the `li`’s, [here's the fork](http://cdpn.io/DqEIg “”)..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
Viewing 9 posts - 1 through 9 (of 9 total)
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".