Christian Montoya wrote, and as usual, stripped attribution (which I
restored):
> Scott Hamm wrote:
> > If em is the best method to set up CSS
> for layout, it's not
Or is, depending on the design requirements.
> > then how can I add up the width to remain fluid like %?
> You can't. EM width layouts are fixed width. They have been dubbed
> "elastic" because they resize whenever the text is resized, meaning
> that they "zoom in and out" depending on the user's text size.
Exactly, which makes it adapt to the user's OS and browser
configuration, which makes it fluid.
> This isn't very practical on its own, since enlarging the text means
> the layout could get wider than the viewport. The best way to serve an
> EM layout is to give it a max-width. For example, if my layout is:
But the em layout doesn't need to be entirely in ems, and so doesn't
necessarily need any explicit constraint. When you set a width in em,
the em width is a constraint, and probably the only one required. Ems
are great for setting widths of text content, allowing them to be the
designer's design width (in characters instead of pixels or some % of
unknown real width) regardless what physical size the result happens to
be on some user's system.
> #container { width:30em; max-width:100%; }
> Then the width will be 30em, and resize with the text, and will not
> flow past the edges of the viewport... which is great.
Or not, depending on the design and the viewport size and the text size
that's determining how wide an em is.
> Of course, you then have to serve Javascript/Expressions to IE to make
> sure that the 100% works. There are many ways to do this, if you are
> interested.
See, now you've complicated the design process trying to establish some
artificial width when em can do the job fluidly on its own. Maybe the
design might allow the content to force a horizontal scroll when the
font-size is really large, but then that's probably just not going to
happen very often, as when the resolution is high, the viewport size in
px is correspondingly high, leaving everything fitting just fine
proportionally - if the design is competently done. IOW, very large font
sizes are generally accompanied by more px of horizonatal space for them
to fit, minimizing likelihood of scroll.
> Right now I think the site is fine at a % width layout. % layouts are
% for a menu list width is just not using the right styling tool for the
job.
> the most accessible, and since the site is not text-heavy, the long
> line lengths are okay. Elastic EM width layouts are "fun" and "cool,"
And practical and usable and accessible.
> but considering that few users ever resize their text (as in nobody),
That's pure hogwash, a myth designers continue to regurgitate in order
to justify their impositions on users. All people who use computers are
not stupid, not even most. Users can and do change their defaults, and
they do use zoom and minimum font size, which are major selling points
of modern browsers like Firefox. Users also complain that zoom "doesn't
stick", that they change it to be big enough to compensate for the
zillion web sites that rudely impose non-default sizes, and then on
restart, it's back where it started too small. Web browser developers
wouldn't keep hearing this same complaint repeated if no one was using
these browser defenses to make things big enough to see.
> most visitors would never even notice the difference. At least with a
> % layout it will fit nicely to their screen without any extra work on
> your part.
Scott asked the ems width question here probably because in private
email I showed him these:
http://mrmazda.no-ip.com/SS/scotth2.jpg
http://mrmazda.no-ip.com/SS/scotth3.gif
and suggested that #menulist on
http://www.deafaviator.org/fbcom/index.php sized horizontally in ems
instead of at 17% would eliminate the two design weaknesses apparent in
those screenshots, two narrow #menulist in the lowres shot, and too wide
#menulist in the highres shot.
--
"I can do all things through Him who gives me strength."
Philippians 4:13 NIV
Team OS/2 ** Reg. Linux User #211409
Felix Miata *** http://members.ij.net/mrmazda/auth/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
