At 4/9/2007 03:12 PM, kevin mcmonagle wrote:
Just wondering what the best way set width and height on a
horizontal list menu like this
http://www.nwtc.ie/home.html
so that a user-sizing the fonts wont break the layout but can still
change font size.
The simplistic answer is to set the width of blocks that contain text
in ems so that they expand and contract with font-size.
If your list items are sized in ems but the content column that
contains the menu is fixed in pixels, you're going to fill up the
space and... then what do you want to have happen? There are many
scenarios, and you have to choose one according to your own design
sensibilities.
It helps to view a web page not as a still photograph but as a
movie. Graphic designers are fond of coming up with a single mockup
of a page and thinking their job finished, leaving the rest of the
job to us -- to figure out how the page will morph on resize. The
complete design exercise is to storyboard the whole movie.
A few of your choices are:
- Allow all text blocks on the page to zoom with text size without
restriction -- creating a horizontal scroll bar when content width
exceeds window width.
- Allow the page to zoom but stop it at the window width (easy in
browsers that recognize max-width).
- Use fixed widths and allow text blocks to grow vertically. This
strategy fails when a single unwrappable word exceeds the width of
its container.
- Float list items so that the row of items wraps around when too
large for their container. Many people are disconcerted when nav
menus wrap, at least in part because they're not used to seeing it.
Notice that in all of this I'm not even mentioning height. I almost
always let the browser work out the height as the text expands.
Regards,
Paul
__________________________
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
