473,231 Members | 1,633 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,231 software developers and data experts.

rendering lists in two columns

Hi!

Is it possible to render

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

in two columns using only CSS?

Regards
Timo
Jul 20 '05 #1
16 9227
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.
Jul 20 '05 #2
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ä
Jul 20 '05 #3
Lauri Raittila wrote:
http://www.student.oulu.fi/~laurirai...st/ol2col.html


COOL! Thanks!
Jul 20 '05 #4
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?
Jul 20 '05 #5
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.
Jul 20 '05 #6
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ä
Jul 20 '05 #7
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 :-(
Jul 20 '05 #8
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ä
Jul 20 '05 #9
*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
Jul 20 '05 #10
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.

Jul 20 '05 #11
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

:-\
Jul 20 '05 #12
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ä
Jul 20 '05 #13
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....
Jul 20 '05 #14
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ä
Jul 20 '05 #15
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.

Jul 20 '05 #16
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/>
Jul 20 '05 #17

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Sue | last post by:
On code-behind page: (attributes set programatically for each of these elements) linkbutton added to tablecell textbox added to tablecell tablecells added to tablerow tablerow added to table...
3
by: Saku | last post by:
Greetings, I'm having problems with correct rendering of an aligned image and list items. The following test page demonstrates the issue: ----------clip---clap---clip---clap---------- <html>...
4
by: __frank__ | last post by:
I have some difficulties to learn lists and its coding in C language. Is there a site that explain this argument in a simple way (with examples of course)? I tried to "google" but results are...
7
by: Kenneth P | last post by:
Hi, I have an asp.net application where I calculate things and show the result in a datagrid object. The grid needs 21 columns to show all information needed for persons to understand the whole...
0
by: Greg Collins [Microsoft MVP] | last post by:
I have written and posted the following articles which will prove useful to some: Display Lists in Columns Horizontally Using One Cell per Column...
12
by: Boris Borcic | last post by:
Hello, I am trying to use UI Automation to drive an MS Windows app (with pywinauto). I need to scrape the app's window contents and use some form of OCR to get at the texts (pywinauto can't...
10
by: Richard Maher | last post by:
Hi, Sorry if this is one of those issues that people feel passionate about and I assure you I'm not trolling but rather seeking guidance on which way to go with the web browser presentation of...
33
by: christophertidy | last post by:
Hi I am new to Python and have recieved this error message when trying to instantiate an object from a class from another file within the same directory and wondered what I have done wrong. I...
8
by: =?Utf-8?B?bWljaGFlbCBzb3JlbnM=?= | last post by:
If I populate a DataGridView with a query supplied at runtime, boolean fields render as a CheckBox instead of just a text rendering of '0' or '1'. That is nice sometimes, but I would like the...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.