Stylesheets - vertical layout - 3 columns (newspaper style)

Author

vertical layout - 3 columns (newspaper style)

Amedee Van Gasse

2007-06-27, 6:16 am

I have html that is structured this way:

<h2>title1</h2>
<ul>
<li>item1.1</li>
<li>item1.2</li>
<li>item1.3</li>
</ul>

<h2>title2</h2>
<ul>
<li>item2.1</li>
<li>item2.2</li>
</ul>

<h2>title3</h2>
<ul>
<li>item3.1</li>
<li>item3.2</li>
<li>item3.3</li>
<li>item3.4</li>
</ul>

Each item is usually well below 40 characters.
There may be up to 20 <h2> items, and each <ul> has between 2 and 10
<li> items.
I'm thinking about changing the <h2> items to a higher level <ul>.
I have no server side scripting available. Browser target is IE6, but
personally I'm aiming for (x)html strict/transitional compliance. (so
no ugly hacks that don't validate, please...)

I would like a vertical layout in 3 columns, wrapping like a
newspaper, automagic and with a more or less even distribution. Each
<h2>+<ul> block should stick together.
It should be possible to add <li> items and even <h2> blocks without
having to say where a new column start.

I found this article: http://alistapart.com/articles/multicolumnlists
but this doesn't solve my problem: every solution discussed there
forces me to tell the html or css where the column "breaks".

Any solutions?

--
Amedee

dorayme

2007-06-27, 6:16 am

In article
<1182936451.863764.53510@w5g2000hsg.googlegroups.com>,
Amedee Van Gasse <Amedee.VanGasse@XXXXXXXXXX> wrote:

> I have html that is structured this way:
>
> <h2>title1</h2>
> <ul>
> <li>item1.1</li>
> <li>item1.2</li>
> <li>item1.3</li>
> </ul>
>
> <h2>title2</h2>
> <ul>
>
> Each item is usually well below 40 characters.
> There may be up to 20 <h2> items, and each <ul> has between 2 and 10
> <li> items.
> I'm thinking about changing the <h2> items to a higher level <ul>.
> I have no server side scripting available. Browser target is IE6, but
> personally I'm aiming for (x)html strict/transitional compliance. (so
> no ugly hacks that don't validate, please...)
>
> I would like a vertical layout in 3 columns, wrapping like a
> newspaper, automagic and with a more or less even distribution. Each
> <h2>+<ul> block should stick together.
> It should be possible to add <li> items and even <h2> blocks without
> having to say where a new column start.
>
> I found this article: http://alistapart.com/articles/multicolumnlists
> but this doesn't solve my problem: every solution discussed there
> forces me to tell the html or css where the column "breaks".
>
> Any solutions?

No html/css solutions to multi columns where the text spills over
the columns.

You mention some lists. Is that it for your page? Are the lists
connected in meaning? Depending on your material, there are
different solutions. But, imo, you can deliver information in
reasonable chunks as floated divs and just let them wrap if the
browser is not wide enough. It's a webby thing to do. Trying to
impose 3 cols while at the same time wanting to maximize users
use of the horizontal to read continuous content increases your
management problems. Perhaps you can work with the possible
rather than with a print idea here.

--
dorayme

Ben C

2007-06-27, 6:16 am

On 2007-06-27, Amedee Van Gasse <Amedee.VanGasse@XXXXXXXXXX> wrote:
> I have html that is structured this way:
>
><h2>title1</h2>
><ul>
> <li>item1.1</li>
> <li>item1.2</li>
> <li>item1.3</li>
></ul>
>
><h2>title2</h2>
><ul>
> <li>item2.1</li>
> <li>item2.2</li>
></ul>
>
><h2>title3</h2>
><ul>
> <li>item3.1</li>
> <li>item3.2</li>
> <li>item3.3</li>
> <li>item3.4</li>
></ul>
>
> Each item is usually well below 40 characters.
> There may be up to 20 <h2> items, and each <ul> has between 2 and 10
><li> items.
> I'm thinking about changing the <h2> items to a higher level <ul>.
> I have no server side scripting available. Browser target is IE6, but
> personally I'm aiming for (x)html strict/transitional compliance. (so
> no ugly hacks that don't validate, please...)
>
> I would like a vertical layout in 3 columns, wrapping like a
> newspaper, automagic and with a more or less even distribution. Each
><h2>+<ul> block should stick together.
> It should be possible to add <li> items and even <h2> blocks without
> having to say where a new column start.
>
> I found this article: http://alistapart.com/articles/multicolumnlists
> but this doesn't solve my problem: every solution discussed there
> forces me to tell the html or css where the column "breaks".
>
> Any solutions?

No solution apart from writing a program to do the newspaper column
layout in JavaScript. CSS doesn't do it.

Andy Dingley

2007-06-27, 6:18 pm

On 27 Jun, 10:27, Amedee Van Gasse <Amedee.VanGa...@XXXXXXXXXX> wrote:

> I would like a vertical layout in 3 columns, wrapping like a
> newspaper, automagic and with a more or less even distribution.

You can't. HTML's flow model just doesn't work that way.

Choices:

* Avoid newspaper columns on the web. Newspapers have good 2-d
scrolling, but poor long-range scrolling. Web pages in most browsers
have good long-range scrolling, but poor 2-d scrolling. A better model
for web usability is a single long column.

* Put each block into a <div> and use float:left on each. This re-
sizes quite well, even though it's not strictly "newspaper column
flow".

* Use XSL:FO (if you're aiming at PDFs). This does support newspaper
columns.

* Pre-process the HTML first and embed hard column breaks as needed.
This requires knowledge (or assumption) of the ratio between the
displayed window size and the height of the text blocks (i.e. the
displayed font height). You can't do this in a fluid manner unless you
do it on the client itself, which is also a possibility with a bit of
JavaScript.

You should probably try a couple of these ideas and compare their
usability for your particular situation.

Jonathan N. Little

2007-06-27, 6:18 pm

Amedee Van Gasse wrote:

<snip description of newspaper columns>

> Any solutions?

Best answer is that newspapers are newspapers and the web is the web,
different media. Nature of the beast, newspapers have columns that run
left to right (mostly) because of its physical nature--it is easier to
open the page wide the length of your arms and scan across then shuffle
down in a long scroll. But on the web vertical scrolling is much easer
than horizontally. Design to suit the media. Save the horizontal
newspaper columns for newspapers

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

David Stone

2007-06-27, 6:18 pm

In article <ebf57$46826e0e$40cba7b8$31264@NAXS.COM>,
"Jonathan N. Little" <lws4art@centralva.net> wrote:

> Amedee Van Gasse wrote:
>
> <snip description of newspaper columns>
>
>
> Best answer is that newspapers are newspapers and the web is the web,
> different media. Nature of the beast, newspapers have columns that run
> left to right (mostly) because of its physical nature--it is easier to
> open the page wide the length of your arms and scan across then shuffle
> down in a long scroll. But on the web vertical scrolling is much easer
> than horizontally. Design to suit the media. Save the horizontal
> newspaper columns for newspapers

Agreed. A number of the scientific journals I read publish their
content electronically as pdf versions of the paper copy, complete
with two-column layout. These are virtually impossible to read
on-line, as either you have to zoom out to see the whole column
(making the text to small to read), or you are continually
scrolling up and down as you go from one column to the next.
A three-column layout for the main content would be a nightmare!

Now, a three-column layout consisting of navigation, content, and
sidebar (ads, links, whatever) is a different matter. There are
numerous layouts for that - you could try the Skidoo Redux or
Skidoo Lean ones:

http://webhost.bridgew.edu/etribou/...s/skidoo_redux/

http://webhost.bridgew.edu/etribou/layouts/skidoo/lean/

dorayme

2007-06-28, 3:17 am

In article <ebf57$46826e0e$40cba7b8$31264@NAXS.COM>,
"Jonathan N. Little" <lws4art@centralva.net> wrote:

> Amedee Van Gasse wrote:
>
> <snip description of newspaper columns>
>
>
> Best answer is that newspapers are newspapers and the web is the web,
> different media. Nature of the beast,

Right. I cannot help wondering sometimes if best of both worlds
is possible in regard to "col-wrap". But I am beginning to think
not.

It is not a simple matter. Suppose one really could mark out an
article, say a long one in such a way that you maximized what
folk could see before any need to scroll at all. Nicely in cols,
left to right, they adjust to how wide or tall the browser window
is along with text size.

The problem would then be what happens when you have finished
reading the last sentence of the rightmost col. You scroll down
and... now it gets complicated from both a reader's perspective
and the technical side of authoring decisions. The assumption
that the reader has read all so far and wants to read on from top
of left as if at "next page" gets tricky if he is literally just
scrolling.

I can imagine technology that allows html page to be columnised
in conjunction with page down quanta jumps and this just happens
for any screen and it being useful. But a very difficult thing to
bring about considering trouble with ordinary scrolling.

What happens if you adjust the browser side for a moment (imagine
how easy to lose your place with all the shifting wrapping across
cols...).

--
dorayme

Amedee Van Gasse

2007-06-28, 6:17 am

On 27 jun, 16:02, "Jonathan N. Little" <lws4...@centralva.net> wrote:
> Amedee Van Gasse wrote:
>
> <snip description of newspaper columns>
>
>
> Best answer is that newspapers are newspapers and the web is the web,
> different media. Nature of the beast, newspapers have columns that run
> left to right (mostly) because of its physical nature--it is easier to
> open the page wide the length of your arms and scan across then shuffle
> down in a long scroll. But on the web vertical scrolling is much easer
> than horizontally. Design to suit the media. Save the horizontal
> newspaper columns for newspapers

Jonathan,

Of course you are right, but being right doesn't pay the bills :)
Anyway, I'll do it with tables. I know it's old skool and not easy to
maintain, but it gets the job done.

Amedee

dorayme

2007-06-28, 6:17 am

In article
<1183015721.741618.300840@n2g2000hse.googlegroups.com>,
Amedee Van Gasse <Amedee.VanGasse@XXXXXXXXXX> wrote:

> On 27 jun, 16:02, "Jonathan N. Little" <lws4...@centralva.net> wrote:
>
> Jonathan,
>
> Of course you are right, but being right doesn't pay the bills :)
> Anyway, I'll do it with tables. I know it's old skool and not easy to
> maintain, but it gets the job done.
>
> Amedee

You can't do it with tables. You can have excellent columns with
tables but no simple way to wrap from column to column.

--
dorayme

Amedee Van Gasse

2007-07-10, 6:16 am

On 28 jun, 10:16, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article
> <1183015721.741618.300...@n2g2000hse.googlegroups.com>,
> Amedee Van Gasse <Amedee.VanGa...@XXXXXXXXXX> wrote:
>
>
>
>
>
>
>
>
>
>
>
>
> You can't do it with tables. You can have excellent columns with
> tables but no simple way to wrap from column to column.

??? First you disagree with me, then you write exactly what I have
done.
ENOFOLLOW...

Wes Groleau

2007-07-10, 10:16 pm

Amedee Van Gasse wrote:
> Of course you are right, but being right doesn't pay the bills :)
> Anyway, I'll do it with tables. I know it's old skool and not easy to
> maintain, but it gets the job done.

I don't understand. You reject the ALA tricks because they make
you end a div and start another between columns, but you accept the
"old school" method of starting and stopping TDs between columns?

Why is the "old school" better? Because it confuses blind people?

--
Wes Groleau

Pat's Polemics = http://Ideas.Lang-Learn.us/barrett