multi-column lists

[Lewis]

The last time I did multi-column lists I did it programmatically in PHP
(something like this, though this is pretty old code)

<ul>
<?php

$counter="1";
while ($counter < $amount/2 ) {
echo "<li>$list[$counter]</li>";
}
$counter=$counter+1;
?>
</ul>
</div>
<div class="list">
<?php

echo '<ul class="2" start="'.$counter.'">' ;
while ($counter < $amount ) {
echo "<li>$list[$counter]</li>";
}
$counter=$counter+1;
?>
</ul>

I'm wondering if there isn't an easier pure CSS way to handle this. I've
looked at some other multi-column list, but they are all table crap and
still two separate lists

<tr>
<td>
<ol>
[stuff]
</ol>
</td>
<td>
<ol>
<li value-"12">
[stuff]
</ol>
</td>
</tr>

 

[dorayme]

The last time I did multi-column lists I did it programmatically in PHP
(something like this, though this is pretty old code)

<ul> ....
....
echo ...

I'm wondering if there isn't an easier pure CSS way to handle this. I've
looked at some other multi-column list, but they are all table crap and
still two separate lists

For an unordered list where the order has no meaning, you can
arrange (style) a list so that the items *can* appear in two
columns if there is room, one if there is not, and the meaning of
*one* list preserved.

<http://dorayme.netweaver.com.au/unorderedList_twoCols.html>

 

[Jukka K. Korpela]

For an unordered list where the order has no meaning, you can
arrange (style) a list so that the items *can* appear in two
columns if there is room, one if there is not, and the meaning of
*one* list preserved.

In an "unordered" list (bulleted list), the order usually has a meaning.

But if it is OK that the items appear rowwise so that the 2nd item is the
first item in the second colum, the 3rd item the second item in the first
column etc., then simple floating works - you can just set float: left and
some suitable width for the <li> elements. Demo:
http://www.cs.tut.fi/~jkorpela/test/multicol2.html

For genuine multicolumns, where the items run first through the first
column, then continue in the second, you would need the columns property.
It's poorly supported: even Firefox recognizes it only under a proprietary
property name. Demo:
http://www.cs.tut.fi/~jkorpela/test/multicol.html

 

[dorayme]

In an "unordered" list (bulleted list), the order usually has a meaning.

If it usually has a meaning, does it not follow that the website
maker should usually have used an ordered list instead?

 

[dorayme]

But if it is OK that the items appear rowwise so that the 2nd item is the
first item in the second colum, the 3rd item the second item in the first
column etc., then simple floating works - you can just set float: left and
some suitable width for the <li> elements. Demo:
http://www.cs.tut.fi/~jkorpela/test/multicol2.html

Forgot to mention in my last reply. Nice and simple css in above
url but all hell seems to break loose on user text size upping,
the lists overlapping each other, bullets everywhere. In my

<http://dorayme.netweaver.com.au/unorderedList_twoCols.html>

text-size increases do not have this effect, but the css is more
trouble (and contrived) to write out. I avoided the bullets,
perhaps a little cowardly! <g>

But I should look at how to get the default html bullets, without
resorting to images or characters that look like bullets. How
about:

<http://dorayme.netweaver.com.au/unorderdListWithBullets_twoColApp
earance.html>

 

[richard]

In an "unordered" list (bulleted list), the order usually has a meaning.

But if it is OK that the items appear rowwise so that the 2nd item is the
first item in the second colum, the 3rd item the second item in the first
column etc., then simple floating works - you can just set float: left and
some suitable width for the <li> elements. Demo:
http://www.cs.tut.fi/~jkorpela/test/multicol2.html

For genuine multicolumns, where the items run first through the first
column, then continue in the second, you would need the columns property.
It's poorly supported: even Firefox recognizes it only under a proprietary
property name. Demo:
http://www.cs.tut.fi/~jkorpela/test/multicol.html

You forgot the </li> which is required.
while IE may accept column-count, it is not supported by w3.
http://www.w3.org/TR/CSS2/propidx.html


<ul>
<li>item A
<li>item B
<li>item C
<li>item D
<li>item E
<li>item F
<li>item G<div style="clear:left";></div>
<li>item H
<li>item I
<li>item J
<li>item K
<li>item L
<li>item M
<li>item N
</ul>

 

[Beauregard T. Shagnasty]

You forgot the </li> which is required.

This document was successfully checked as HTML5!
Result: Passed, 3 warning(s) [and not about </li>]

"The document located at
<http://www.cs.tut.fi/~jkorpela/test/multicol.html> was successfully
checked as HTML5. "

 

[richard]

You forgot the </li> which is required.

This document was successfully checked as HTML5!
Result: Passed, 3 warning(s) [and not about </li>]

"The document located at
<http://www.cs.tut.fi/~jkorpela/test/multicol.html> was successfully
checked as HTML5. "

which goes to prove that the validator needs to be improved upon.
It will accept undocumuented unapproved tags but will have holy fits for
not including an "Alt" attribute?
Or whines and cries about stuff in the url after a ?.

 

[dorayme]

For an unordered list where the order has no meaning, you can
arrange (style) a list so that the items *can* appear in two
columns if there is room, one if there is not, and the meaning of
*one* list preserved.

<http://dorayme.netweaver.com.au/unorderedList_twoCols.html>

And, come to think of it, you *can* do an ordered list too. But
in quite a managed way, rather too managed imo! Here is an
absolute position way to have *one* ordered list, just out of
interest:

<http://dorayme.netweaver.com.au/orderedTwoColList.html>

 

[Lewis]

For an unordered list where the order has no meaning, you can
arrange (style) a list so that the items *can* appear in two
columns if there is room, one if there is not, and the meaning of
*one* list preserved.

<http://dorayme.netweaver.com.au/unorderedList_twoCols.html>

OK, that is interesting. How about for an ordered list:

1 item 4 item
2 item 5 item
3 item 6 item

 

[Lewis]

If it usually has a meaning, does it not follow that the website
maker should usually have used an ordered list instead?

Just because the oder has meaning doesn't mean it has to be enumerated.

 

[Lewis]

In an "unordered" list (bulleted list), the order usually has a meaning.

But if it is OK that the items appear rowwise so that the 2nd item is the
first item in the second colum, the 3rd item the second item in the first
column etc., then simple floating works - you can just set float: left and
some suitable width for the <li> elements. Demo:
http://www.cs.tut.fi/~jkorpela/test/multicol2.html

For genuine multicolumns, where the items run first through the first
column, then continue in the second, you would need the columns property.
It's poorly supported: even Firefox recognizes it only under a proprietary
property name. Demo:
http://www.cs.tut.fi/~jkorpela/test/multicol.html

[/QUOTE]

You forgot the </li> which is required.

while IE may accept column-count, it is not supported by w3.

column-count works in Firefox and Webkit and is part of CSS3

http://www.w3.org/TR/CSS2/propidx.html

It is not part of CSS2.

<http://www.w3.org/TR/css3-multicol/>

This will suite my purposes, but is not viable for IE (spit!)

ol {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
}

 

[Lewis]

Jukka K. Korpela wrote:
http://www.cs.tut.fi/~jkorpela/test/multicol.html

You forgot the </li> which is required.

This document was successfully checked as HTML5!
Result: Passed, 3 warning(s) [and not about </li>]

"The document located at
<http://www.cs.tut.fi/~jkorpela/test/multicol.html> was successfully
checked as HTML5. "

[/QUOTE]

which goes to prove that the validator needs to be improved upon.

I think it goes to prove you've no idea what you are talking about.

<http://www.w3.org/TR/html-markup/li.html>

An li element’s end tag may be omitted if the li element is
immediately followed by another li element or if there is no more
content in the parent element.

 

[Gus Richter]

You forgot the</li> which is required.

Actually, the closing tag is optional in HTML (mandatory only in XHTML).
The Demo in question

while IE may accept column-count, it is not supported by w3.
http://www.w3.org/TR/CSS2/propidx.html

W3C does indeed support multi-columns (CR) in CSS3. Which browsers
support it is another question.

 

[dorayme]

Just because the oder has meaning doesn't mean it has to be enumerated.

Quite right. But the point of an ordered list is not for the
stylistic convenience of authors.

Displaying numbers (to use common parlance) and being ordered are
two separate issues. Browsers display these numbers by default.
You can choose to alter default behaviour, whether by having
letters or Roman numbers or whatever or no list-style-type at
all. The element goes on being ordered and it is a common
understanding that the the order is in the direction of the
vertical starting at the top.

In the case of a two col arrangement, as a stylistic adventure,
it would be pretty advisable to keep the numbers to help the user
understand it is an ordered list. A user either gets the idea of
the importance of the order from the context:

light the fuse
run as far away as you can from the fuse

or is helped to by the ordering indicators set by default or
author choice.

The website maker, however, should use an ol for this, whether or
not he or she displays the order with indicators. So, the point
is that whether there are indicators or not, the *meaning* of an
ordered list element remains independent of the indicators.

The presence of numbers, on the other hand, and this is
complicated issue in some ways, is not always an indicator of
order. An unordered list can also display markers (like numerals,
letters) that identify them, but this does not make them
*ordered* - except in a different sense.

A few years back, or so it seems, some of us discussed this
matter in some detail. There are many posts about it. I think Ben
C and I tossed the matter about a lot. Not sure if they can be
found. Depends on the interest I guess. I suppose I might have a
different view, perhaps too idealistic or too pure a view of the
difference between an ol and an ul. <g>

 

[dorayme]

OK, that is interesting. How about for an ordered list:

See a later post of mine for context but I can give url:

<http://dorayme.netweaver.com.au/orderedTwoColList.html>

 

[Adrienne Boswell]

Jukka K. Korpela wrote:
http://www.cs.tut.fi/~jkorpela/test/multicol.html

You forgot the </li> which is required.

This document was successfully checked as HTML5!
Result: Passed, 3 warning(s) [and not about </li>]

"The document located at
<http://www.cs.tut.fi/~jkorpela/test/multicol.html> was successfully
checked as HTML5. "

which goes to prove that the validator needs to be improved upon.
It will accept undocumuented unapproved tags

Show me ONE undocumented unapproved element or attribute which the
validator at http://validator.w3.org accepts.

but will have holy fits for

not including an "Alt" attribute?

The alt attribute is alternative content when an image is not rendered
and for accessibility. That is why it is a required attribute.

Or whines and cries about stuff in the url after a ?.

The validator does not know or care about what's going on server side, it
just sees an unescaped entity reference and warns you about it. If I
were to write a querystring ?some=1&copy=2 a browser could interpret it
as ?some=1@=2 while escaping the ampersand fixes it, some=1&amp;copy=2.

See http://www.htmlhelp.com/tools/validator/problems.html#amp for more
examples.

 

[Beauregard T. Shagnasty]

Jukka K. Korpela wrote:
http://www.cs.tut.fi/~jkorpela/test/multicol.html

You forgot the </li> which is required.

This document was successfully checked as HTML5!
Result: Passed, 3 warning(s) [and not about </li>]

"The document located at
<http://www.cs.tut.fi/~jkorpela/test/multicol.html> was successfully
checked as HTML5. "

which goes to prove that the validator needs to be improved upon.

which goes to prove that you still haven't learned anything about
DOCTYPEs and the differences between HTML and XHTML.

It will accept undocumuented [sic] unapproved tags

No, it will not. See here for an undocumented "tag":
http://tekrider.net/usenet/multicol.html

but will have holy fits for not including an "Alt" attribute?

Image alt attributes are required.

Or whines and cries about stuff in the url after a ?.

"Stuff?" Such as an ampersand? &amp; No whining or crying.

 

[Captain Paralytic]

richard the sto0pid wrote:
Jukka K. Korpela wrote:
http://www.cs.tut.fi/~jkorpela/test/multicol.html
You forgot the </li> which is required.
This document was successfully checked as HTML5!
Result:   Passed, 3 warning(s)    [and not about </li>]
"The document located at
<http://www.cs.tut.fi/~jkorpela/test/multicol.html> was successfully
checked as HTML5. "

which goes to prove that the validator needs to be improved upon.

which goes to prove that you still haven't learned anything about
DOCTYPEs and the differences between HTML and XHTML.

It will accept undocumuented [sic] unapproved tags

No, it will not. See here for an undocumented "tag":http://tekrider.net/usenet/multicol.html

but will have holy fits for not including an "Alt" attribute?

Image alt attributes are required.

Or whines and cries about stuff in the url after a ?.

"Stuff?"  Such as an ampersand?   &amp;   No whining or crying.

When will you learn. The manuals are never right, only richard is.

 

[Lewis]

The last time I did multi-column lists I did it programmatically in PHP
(something like this, though this is pretty old code)

This is what I ended up with, which works in FF3.$CURRENT and Chrome and
Safari. It's an internal page on my Mac, so I didn't bother to check it
in IE.

<<<EOF
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Big Read</title>
<style type="text/css">
.list
{
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
column-gap: 2em;
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
margin: 0 2em;
min-width: 65em;
max-width: 85em;
}

.page
{
padding: 0.5em 0 0.5em 0;
}

li
{
background-color: #DFF;
padding: 0 0.1em;
color: black;
}

li>i { color: #ff3366; }

.author
{
margin: -1.3em 0 0.1em 0;
padding-bottom: .5em;
text-align: right;
font-size: 80%;
font-weight: bold;
display: block;
}
</style>
</head>
<body>

<div class="page">
<div class="list">
<ol>
<li><i>The Lord of the Rings</i><span class="author">J. R. R. Tolkien</span></li>
<li><i>Good Omens</i><span class="author">Neil Gaiman and Terry Pratchett</span></li>
<li><i>Wuthering Heights</i><span class="author">Emily Brontë</span></li>
<li><i>Night Watch</i><span class="author">Terry Pratchett</span></li>
<!-- ... -->
</ol>
</div>
</div>
</body>
</html>
EOF

The CSS validator throws up on the -moz and -webkit declarations, of
course, but other than that it works and looks like I want.