I have searched back through the last few months to see if this exact sub-topic has been raised, and can’t find any mention, so here goes.
I have a site in which I want to use 12 navigation menus across the full width of the page. Some have submenus, some do not. To get all these into the page, by trial and error I found that the maximum width of the main menus has to be 5.05 ems. I also bodged a solution to some menus being one line deep, and some being two lines deep by using soft returns on the single lines.
The problem now is that I have got a very wide left hand indent on all my main menus, and the longest words like “Memorials” and “Dambuster” only just fit and look very ugly. Is there anything I can do to reduce the indent?
(Incidentally, I’m puzzled as to why ems are used as the unit of width. It doesn’t flummox fifty-something old print hands who still have a metal typescale in their drawer, like me, but I wonder how many others know what an em is? I assume that in web design it is 12px – am I right?)
(Incidentally, I’m puzzled as to why ems are used as the unit of width. It doesn’t flummox fifty-something old print hands who still have a metal typescale in their drawer, like me, but I wonder how many others know what an em is? I assume that in web design it is 12px – am I right?)
I also find it strange that Freeway uses ems here, while they aren’t correctly supported in the rest of the program.
Ems in browsers define font sizes relative to parent items: for an item placed directly on a page and seen in a normal browser, an em will be equal to 16px, the default text size setting…
There’s a table of conversions between points, pixels, ems and % at http://www.reeddesign.co.uk/test/points-pixels.html (this table assumes that the browser has been left at the default text size setting).
I also find it strange that Freeway uses ems here, while they aren’t correctly supported in the rest of the program.
Ems in browsers define font sizes relative to parent items: for an item placed directly on a page and seen in a normal browser, an em will be equal to 16px, the default text size setting…
Michael –
thanks for your reply. So you’re saying that an em in 10px font size is not 10px wide, nor is it 12px wide (corresponding to the print pica em) but is in fact 16px wide! That sort of corresponds with the maths on my site, since 12 boxes of 5.05 ems wide make a total of 970px and they therefore fit fairly neatly into the HTML box which is 995px wide.
However, this doesn’t solve my indent problem, which I think may well be insurmountable. I feel that the best solution may be to reduce the number of items at the top level of navigation. 12 is probably too many!
Charles
I feel that the best solution may be to reduce the number of items at the top level of navigation. 12 is probably too many! Charles
A good rule of thumb is 5 options plus or minus 2. That fits neatly into some of the many models of human comprehension. When offered more choices than that, your brain has a physical/chemical/software problem holding those options in “active storage” so they can be compared.