rendering lists in two columns

[Timo Nentwig]

Hi!

Is it possible to render

<ol>
<li>one</li>
<li>two</li>
...
</ol>

in two columns using only CSS?

Regards
Timo

[Neal]

On Sat, 08 May 2004 20:20:12 +0200, Timo Nentwig <tc*@spamgourmet.org>
wrote:

Hi!

Is it possible to render

<ol>
<li>one</li>
<li>two</li>
...
</ol>

in two columns using only CSS?

Regards
Timo

Not really. You'd have to split into two positioned lists and use a
deprecated attribute for <li> to restart the numbering properly on the
second list to accomplish this.

[Lauri Raittila]

In article Neal wrote:

On Sat, 08 May 2004 20:20:12 +0200, Timo Nentwig <tc*@spamgourmet.org>
wrote:

Hi!

Is it possible to render

<ol>
<li>one</li>
<li>two</li>
...
</ol>

in two columns using only CSS?

Regards
Timo

Not really.

Yes, exept whan having numbers going left to right first, then down.
Unfortunately that does not suit well on ordered list, as people tend to
read list down, and then look other column.
You'd have to split into two positioned lists and use a
deprecated attribute for <li> to restart the numbering properly on the
second list to accomplish this.

Not necessarily, but that is most sencible way. Anyway, whitout any extra
HTML:
http://www.student.oulu.fi/~laurirai...st/ol2col.html
Works on Opera 7.5b1, should work Opera 6+ and mozilla and anything that
supports more than one "+" selectors.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

[Timo Nentwig]

Lauri Raittila wrote:

http://www.student.oulu.fi/~laurirai...st/ol2col.html

COOL! Thanks!

[Timo Nentwig]

Lauri Raittila wrote:

http://www.student.oulu.fi/~laurirai...st/ol2col.html
Works on Opera 7.5b1, should work Opera 6+ and mozilla and anything that
supports more than one "+" selectors.

Can you explain the + selector. Why does the first "li" apply to all
li's and "li + li + ..." apply to the the first n li's only? And would I
select the n-th li?

[Timo Nentwig]

Timo Nentwig wrote:

Lauri Raittila wrote:

http://www.student.oulu.fi/~laurirai...st/ol2col.html

COOL! Thanks!

Hmm, but what about line wrapping? You start the right column at 50% but
it will overlay the left column if the window is too tight or the string
too long respectively.

[Lauri Raittila]

In article Timo Nentwig wrote:

Lauri Raittila wrote:

http://www.student.oulu.fi/~laurirai...st/ol2col.html
Works on Opera 7.5b1, should work Opera 6+ and mozilla and anything that
supports more than one "+" selectors.
Can you explain the + selector. Why does the first "li" apply to all

Thats normal selector.

+ is adjecent selector. li + li selects li element just after li element.
li + li + li selects last one from 3 li elements.
li's and "li + li + ..." apply to the the first n li's only?
No, it aplies to all li elements that have same amount of li elements
before it as there is before in selector.
And would I select the n-th li?

Yes, this method look nice on example page with few items. But if you
have dozens, or if there is many lists with different number of items, it
comes clumsy. And if you don't know the number of items (for example in
userstylesheets), you can't use this method

CSS3 will most likely have n-th-child and odd and even selectors, which
may help some.


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

[Timo Nentwig]

Lauri Raittila wrote:

http://www.student.oulu.fi/~laurirai...st/ol2col.html

Hmm, but this does only work as long as there are not multi-line li's.
the top:-6em "solution" is quite a hack :-(

[Lauri Raittila]

In article Timo Nentwig wrote:

Lauri Raittila wrote:

http://www.student.oulu.fi/~laurirai...st/ol2col.html

Hmm, but this does only work as long as there are not multi-line li's.
the top:-6em "solution" is quite a hack :-(

True, forgot to meantion that. This is not real solution, just some CSS
play.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

[Christoph Paeper]

*Timo Nentwig* <tc*@spamgourmet.org>:

Is it possible to render <ol>
in two columns using only CSS?

Somehow, <http://webdesign.crissov.de/temp/multicol-lists.html>.

--
"Not all chemicals are bad. Without chemicals such as hydrogen and oxygen,
for example, there would be no way to make water, a vital ingredient in beer."
Dave Barry

[Timo Nentwig]

Christoph Paeper wrote:

Somehow, <http://webdesign.crissov.de/temp/multicol-lists.html>.

Look like a good solution!

The only drawback I could find so far is that the count of columns is
actually specified by the width. So setting width:100%; will lead to n
columns.

[Timo Nentwig]

Timo Nentwig wrote:

Christoph Paeper wrote:

Somehow, <http://webdesign.crissov.de/temp/multicol-lists.html>.

The only drawback I could find so far is that the count of columns is

My fault.

But it sorts

1 2
3 4

not

1 3
2 4

:-\

[Lauri Raittila]

In article Timo Nentwig wrote:

Christoph Paeper wrote:

Somehow, <http://webdesign.crissov.de/temp/multicol-lists.html>.
Look like a good solution!

Yes, and obvious.
The only drawback I could find so far is that the count of columns is
actually specified by the width.
IMHO, that is not problem, in fact I think that is very good. Problem is
that numbering in ordered list goes pretty randomly. See especially "Zwei
Spalten mit Nummern".

1 2
3 4
5
6 7
8

Does somebody read list in that order? If you use ol, you are after
ordered list, and that is not really ordered. If you are not after
ordered list, you should use ul.

So, I would say that this is good for unordered lists, but not really for
ordered lists. Especially good if you use em unit for widths, so that
there is not fixed number of cols, but it depends on window width, and
list items are optimal lenght.
So setting width:100%; will lead to n
columns.

I really can't understand what you mean at all. Width:100% on li will
lead to one column., On ol it doesn't mean anything.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

[Timo Nentwig]

Lauri Raittila wrote:

1 2
3 4
5
6 7
8

I was also wondering about this one. It seems to have to do something
with the li's content length and/or the window size. But in the end I
was not able to find out exactly....

[Lauri Raittila]

Timo Nentwig wrote:

Lauri Raittila wrote:

1 2
3 4
5
6 7
8

I was also wondering about this one. It seems to have to do something
with the li's content length and/or the window size. But in the end I
was not able to find out exactly....

Well, to me it is clear as a daylight. Try learn some basics of floats,
you might understand what is happening.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

[Timo Nentwig]

Lauri Raittila wrote:

Timo Nentwig wrote:

Lauri Raittila wrote:

1 2
3 4
5
6 7
8

Well, to me it is clear as a daylight. Try learn some basics of floats,
you might understand what is happening.

If I understood float correctly this would only happen if 3 has more
lines than 2, right? Well, is there a way to select only odd (i.e. every
second) li? Then we chould set clear: left.

[Steve Pugh]

Timo Nentwig <tc*@spamgourmet.org> wrote:

Lauri Raittila wrote:

Lauri Raittila wrote:

1 2
3 4
5
6 7
8
Well, to me it is clear as a daylight. Try learn some basics of floats,
you might understand what is happening.

If I understood float correctly this would only happen if 3 has more
lines than 2, right?

ITYM if 3 has more lines than 4.
Well, is there a way to select only odd (i.e. every
second) li? Then we chould set clear: left.

In CSS3 we could use li:nth-child(odd) {clear: none;}

But until that's well supported the easiest thing is to add a class to
every other li.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>