CSS menus again

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?

The site is http://www.breakingthedams.com

(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’d be grateful for any help. Thanks in advance.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Charles said

12 navigation menus across the full width of the page

I am not seeing that here: 3/4 width of the blue header in FF 3 and 7/8 in Safari

There has been some recent discussion about getting the menu to fit full width but I cant point you to a specific thread.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David

thanks for your reply. In my version of Safari, men goes across whole page more or less. It’s also OK in Explorer on a PC. Haven’t tried Firefox yet.

The main problem is the left hand indent, which makes the long words look very odd. If you can help on that I’d be grateful.

Charles


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 26 Sep 2008, 12:30 pm, Charles wrote:

(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 ReedDesign - Approximate Conversion from Points to Pixels (this table assumes that the browser has been left at the default text size setting).


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options