We using some positioning tricks to line up the left edge of the logo and the main content area, while still having the header touch the left edge of the page.
The navigation blocks, at the widest width, are 1/8 the width of nav parent. We set them to inline-block so they will accept that width. We end up having to set the width to 12.49% rather than 12.5% because of subpixel rounding errors.
We figure out a way to get the bottom shadow of the navigation going, but are worried a bit about the technique used. We need to reverse the z-index of each of the menu items so that the first elements is “on top” and step down one by one rather than the last one. We use a series of :nth-child selectors to do this.
Isn’t it better to make an “inset” box shadow?
Probably yeah =)
But that makes me a little nervous. Regular box shadows can even have some performance problems (laggy scrolling for example) and at one time, inset shadows were much worse. I think that may be fixed in newer WebKit browsers but still a problem in old ones.
Don’t know if you know these things so I’ll put them out there. You don’t have to open the application Calculator but can just type equations in spotlight – saves me tons of time! Also for your color picker ‘command + option + control + c’ will just do the color picker popup for you, this also in my opinion saves me lots of time.
@arek.bartnik I was literally thinking “Use inset shadows!” during the whole video lol
In the case of your recommendation not to use the
<ul>or tags for navigation, how would you suggest going about enabling drop down menus, in terms of best practice?I am having the same problem with auto reloading. It’s really buggy with css. Had to switch to LIveReload.