Jose wrote :
Ok, so out of the list of resources I pick:
Interestingly, it's taken from here.
My (netscape 7.2) browser is set to about 400 pixels wide. Not very
generous, but not very stingy on a laptop where I'm also working on
something else at the same time (why don't webmasters realize this??)
Creating a web page which will be scalable for visual media and for
small screen devices (media="mobile") is still quite difficult, rare on
the web. I'd say you need a special stylesheet for such webpage.
The search window is on top of the title "alt.html", blocking it. (at
least it has priority). There is a blue top and a black bottom
(background) to the header, which is broken up, putting the list of
"recommended resources" and such (blue links) mostly on top of the black
background. On the left is the primary content. It goes as follows:
Very
Simple,
tables
are
for
structuring
tabular
data
.... and so on for about sixteen screens. One word per line, the rest
of the window (on the right) is white space. I can widen the window
some, and get (sometimes) two or three words per line, but I have to
allocate 600 pixels of width first. By the time I allocate 1200 pixels
of width I get reasonable column width, but easily a third of the
remainder is blank space on the right. At least it's not blank space on
the left. But even at 1200 pixels, if I increase the font size (thank
you for allowing the font size to be increased!) I'm back to a five or
six word column, and the entire right half of my window wasted (below
the recommended resources list).
You describe what you see here when you resize the viewport (or do
something) of your NS 7.2. I am not by your side looking at your screen,
you know. So it's not obvious being able to follow what you say.
Addendum: I re-read the whole thing again and I think I understand what
you're saying. What if the page was intended for visual browsers with a
minimum of 800x600 or 640x480 scr. res.? (ie. body {min-width: 620px;})
And not for devices with Small Screen Resolution (SSR)?
This is not a good reccomendation of CSS.
What I would have done (with tables) is put in a table with two columns,
100% width. The right column would contain the reomended resources. The
left column would contain the first two paragraphs of "why I should
sometimes use tables even though CSS is the in thing". It would end
with "continued below", and would be continued below the table, allowing
the full width of the browser to be used for the rest of the long article.
You want *_blocks_* (block-level elements) to line-wrap, not just inline
elements.
Using a column of the browser for something that doesn't extend down to
forever is poor form.
Well, I disagree. At least, my and your opinion would be debattable.
Filling up a viewport all the time is one reason (among others) why
people do not like/visit back some webpages.
The fix is for browsers to support something like
"flow"
Browsers (modern ones; 2001 and later) all do support normal flow of the
root element and line-wrapping, you know. What some do not understand is
that absolutely positioned elements (including fixed positioned
elements) are taken out from normal flow, therefore can not wrap like in
normal flow. Floats do not line-wrap by definition; you can use floats
to create a CSS 2 or 3 column webpage. Floats could be a better solution
in some cases but then MSIE 6 has many implementation bugs. inline-block
elements, run-in blocks, etc. could also possibilities but browser
support is close to nil.
but since the webmaster has no control over the user's browsers,
workarounds will always be needed.
I disagree. It would take me a lot of time, explanations to explain
myself here.
I think what's important for now is to make good bug reports (along with
good reduced testcases) to browser manufacturers and then hope/wait they
will understand and fix those bugs.
Tables make a good workaround in
some cases, and should -not- be deprecated. They should not be used
indiscrimenently, but they have their place, so long as the web is
imperfect.
Jose
I tried to understand to the best of my ability your post and couldn't
figure out some parts of your post.
Nevertheless I can say that all of the available CSS templates are not
done the same way. There are many types of CSS templates.
Some CSS templates use negative margins, some use floats, some use
position: absolute, some use a bit of all. You can even find some that
rely on javascript to position page elements... which is definitely not
recommendable.
Some templates are based on fixed, rigid columns, therefore not scalable
when the browser viewport is resized. Some templates are fluid, scalable
when the browser viewport is resized. Some are not scalable when the
font-size is increased: in such cases, the width of blocks increase and
eventually create an overflow of the document box. So, right here, you
have 2 ways (2 types of page scalability) to make a CSS template
scalable, fluid and both may not work well together. Etc..
Some CSS templates have both elements: 1 fluid column and 1 rigid column
(just like that page
http://www.html-faq.com/csspositioning/?csslayout
you visited). Floats, abs. pos. and negative margins still have not been
implemented in all modern browsers (MSIE 6, Firefox 1.5, Opera 8.5+,
Safari 2.x, etc.) the same way or according to web standards: so there
are still problems to be worked around.
Gérard
