Re: Multi-column layout with CSS
- From: dorayme <doraymeRidThis@xxxxxxxxxxxxxxx>
- Date: Tue, 22 Sep 2009 08:22:51 +1000
In article <5p8eb5ht9p7o2ifga4ts193ughshgp7ph3@xxxxxxx>,
David Segall <david@xxxxxxxxxxxxxxx> wrote:
dorayme <doraymeRidThis@xxxxxxxxxxxxxxx> wrote:
The main thing to be aware of is something very simple really. If a user
can make his text bigger or smaller independent of the pixel-sized
element box it is "in", then it cannot be guaranteed to stay inside that
box. One way the webpage maker can guarantee that text does always stay
in element boxes is to either
1. not specify the box in pixels,
Of course your statement is correct but I don't think that it is
necessarily wrong to specify a box in pixels.
I agree and was not meaning to imply otherwise. Indeed, it is sometimes
quite sensible to have a navigation col fixed. The downside of fixed is
that text can break out. The downside of em is that more screen space
than is strictly needed is taken up when text is big. It can also be
said that fixed width that has a built in buffer for text size
enlargement (e.g. 200px for links that are short and snappy, "About us")
is wasting space at small text sizes! It is all a matter of judgement in
the particular circumstances.
Now this needs to be understood right. If an author makes the words in
the links in the left navigation column reasonable short ones, he can be
more confident that none of them will break out except at *highly*
unlikely text sizes, they will wrap instead. And they may or may not
look good when wrapped. This is where the judgement comes in. If the
design and details don't lend to wrapping, then em is the way to go.
For example, the height
of the heading of <http://films.profectus.com.au> is specified in
pixels. I think it ensures that the heading makes sense over the range
of browser windows that I am targeting. I don't think that this is
possible using a different unit with the constraints I have explained
below.
Sure, I see it as sensible to have your #headerRight {...; height:
160px; ...} but here you have a rock solid argument, you need it to show
the nice background image! I don't quite see the justification for your
#headerLeft {...; height: 160px; ...} but I have not looked deeply.
[I was distracted by the material and started to muse about what would
have to have been the case for a film like I've loved you for so long"
which totally mesmerized me, to get 5 stars. I would happily give it
these! Thank you for attributing 4 stars on my behalf to Poppy, that is
about right! <g>
I have a criterion for judgement that I do not think is quite universal
among critics and it is a hard one to apply after only one viewing: how
well does the film stand up to repeated viewings? I doubt I could
actually watch Poppy more than a few times. I seemed to have no trouble
watching Witness over 25 times, or Big Country over 15 times or
Unforgiven more than I can count...]
[snip]
3. specify it in em units. em units are the language of font size. So,
if you specify a box as 20em wide, there is little chance that "Never
give a sucker an even break" won't fit in.
True, but it means that you must also use the browser to resize your
images. There is currently a convention that favours a fixed image
size because it loads faster. Do you think that the "average user" now
has the bandwidth needed to resize the images without a perceptible
delay.
I was mainly thinking of text. Not sure what you are referring to in
respect to images, bandwidth etc?
Sounds trite but I think one should only specify widths and heights when
needed! It is much less needed than might be thought.
--
dorayme
.
- References:
- Multi-column layout with CSS
- From: Dave Boland
- Re: Multi-column layout with CSS
- From: dorayme
- Re: Multi-column layout with CSS
- From: Dave Boland
- Re: Multi-column layout with CSS
- From: dorayme
- Re: Multi-column layout with CSS
- From: David Segall
- Multi-column layout with CSS
- Prev by Date: Re: Multi-column layout with CSS
- Next by Date: Re: .NET Question.
- Previous by thread: Re: Multi-column layout with CSS
- Next by thread: HTML Corrector Tools
- Index(es):
Relevant Pages
|