Ordered List

[shapper]

Hello,

I have the following:

<ol id ="ol">
<li id="li1">item1</li>
<li id="li2">item2</li>
<ol>

Is it possible to display the List Items on the horizontal, i.e., side
by side instead of one List Item per line?
And can I make li1 Width = 20% and li2 Width = 80%?

How can I do this using CSS?

Thanks,
Miguel

[scripts.contact]

On Jun 3, 2:49 pm, shapper <[e-mail]:

Is it possible to display the List Items on the horizontal, i.e., side
by side instead of one List Item per line?

use a UL and
display:inline-block;
or
float:left
on LIs

And can I make li1 Width = 20% and li2 Width = 80%?

#li1{width:20%}
#li2{width:80%} ??

[dorayme]

In article
<11********************@a26g2000pre.googlegroups.c om>,
"scripts.contact" <sc*************@gmail.comwrote:

On Jun 3, 2:49 pm, shapper <[e-mail]:

Is it possible to display the List Items on the horizontal, i.e., side
by side instead of one List Item per line?

use a UL and
display:inline-block;
or
float:left
on LIs

Perhaps you might give an example using these alternatives you
mention.

--
dorayme

[scripts.contact]

On Jun 3, 7:56 pm, dorayme <[e-mail]:

Is it possible to display the List Items on the horizontal, i.e., side
by side instead of one List Item per line?

use a UL and
display:inline-block;
or
float:left
on LIs

Perhaps you might give an example using these alternatives you
mention.

-HTML-

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

-STYLE-

li {display:inline-block;border:1px dotted gray}

[Jonathan N. Little]

dorayme wrote:

In article
<11********************@a26g2000pre.googlegroups.c om>,
"scripts.contact" <sc*************@gmail.comwrote:

>On Jun 3, 2:49 pm, shapper <[e-mail]:

>>Is it possible to display the List Items on the horizontal, i.e., side
by side instead of one List Item per line?

use a UL and
display:inline-block;
or
float:left
on LIs

Perhaps you might give an example using these alternatives you
mention.

LI { display: inline; }

--
Take care,

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

[Jukka K. Korpela]

Scripsit scripts.contact:

>Perhaps you might give an example using these alternatives you
mention.

- -

li {display:inline-block;border:1px dotted gray}

Perhaps next time you will actually test your proposed solution before
posting it, _at least_ on the dominant browser.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Ben C]

On 2007-06-03, shapper <md*****@gmail.comwrote:

Hello,

I have the following:

<ol id ="ol">
<li id="li1">item1</li>
<li id="li2">item2</li>
<ol>

Is it possible to display the List Items on the horizontal, i.e., side
by side instead of one List Item per line?

Setting display: inline on the list items will do that.

And can I make li1 Width = 20% and li2 Width = 80%?

But you can't set width on inlines, so make them float: left instead. If
they have any borders, padding or margin you'll need to make the total
add up to a bit less than 100%.

Inline-block would be ideal, but isn't supported by Firefox.

[scripts.contact]

On Jun 3, 10:24 pm, "Jonathan N. Little" <[e-mail]>
wrote:

On Jun 3, 2:49 pm, shapper <[e-mail]:
Is it possible to display the List Items on the horizontal, i.e., side
by side instead of one List Item per line?
use a UL and
display:inline-block;
or
float:left
on LIs

Perhaps you might give an example using these alternatives you
mention.

LI { display: inline; }

but then you cant set width .

[dorayme]

In article
<11**********************@r19g2000prf.googlegroups .com>,
"scripts.contact" <sc*************@gmail.comwrote:

On Jun 3, 7:56 pm, dorayme <[e-mail]:

Is it possible to display the List Items on the horizontal, i.e., side
by side instead of one List Item per line?

use a UL and
display:inline-block;
or
float:left
on LIs

Perhaps you might give an example using these alternatives you
mention.

-HTML-

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

-STYLE-

li {display:inline-block;border:1px dotted gray}

This is not an ordered list. I asked because while the ul one is
quite straightforward, the <olone is just that more tricky to
get right, no? To get the numbers in too remember... and to look
reasonable.

--
dorayme

[shapper]

On Jun 4, 10:40 am, dorayme <[e-mail]:

In article
<[e-mail] .com>,

"scripts.contact" <[e-mail]:

On Jun 3, 7:56 pm, dorayme <[e-mail]:

Is it possible to display the List Items on the horizontal, i.e., side
by side instead of one List Item per line?

use a UL and
display:inline-block;
or
float:left
on LIs

Perhaps you might give an example using these alternatives you
mention.

-HTML-

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

-STYLE-

li {display:inline-block;border:1px dotted gray}

This is not an ordered list. I asked because while the ul one is
quite straightforward, the <olone is just that more tricky to
get right, no? To get the numbers in too remember... and to look
reasonable.

--
dorayme

Hi,

I just found this web site:
http://css.maxdesign.com.au/listamatic/

Really nice.

Thanks,
Miguel

[Bergamot]

shapper wrote:

>
<ol id ="ol">
<li id="li1">item1</li>
<li id="li2">item2</li>
<ol>

Is it possible to display the List Items on the horizontal

FYI, whatever method is used to make an ordered list horizontal, the
list marker (i.e. the number) won't be part of it.

--
Berg

[dorayme]

In article <5c*************@mid.individual.net>,
Bergamot <be******@visi.comwrote:

shapper wrote:

<ol id ="ol">
<li id="li1">item1</li>
<li id="li2">item2</li>
<ol>

Is it possible to display the List Items on the horizontal

FYI, whatever method is used to make an ordered list horizontal, the
list marker (i.e. the number) won't be part of it.

At least if it has to be pretty and this can't be polished up
(but it is _a_ horiz ordered list with numbers and supplied by
the <ol>):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1">

<title>ol and numbers horiz</title>

<style type="text/css">
* {margin:0; padding:0;}

ol {padding-left: 50px;}

li {

float:left;
margin-top: .2em;
margin-right: 1.3em;
padding-right: .4em;
padding-left: 0px;
border-right: 2px solid #666;
}

li.last {border-right: 0;}
</style>

</head>

<body>

<ol>
<li>Mask</li>
<li>Gun</li>
<li>Bank</li>
<li>Police</li>
<li>Court</li>
<li class="last">Jail</li>
</ol>

</body>
</html>

--
dorayme

[dorayme]

In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:

In article <5c*************@mid.individual.net>,
Bergamot <be******@visi.comwrote:

shapper wrote:

>
Is it possible to display the List Items on the horizontal

FYI, whatever method is used to make an ordered list horizontal, the
list marker (i.e. the number) won't be part of it.

or nicer, really:

<style type="text/css">
* {margin:0; padding:0;}
ol {padding-left: 50px;}
li {
float:left;
margin-top: .2em;
margin-right: 2.3em;
padding-right: .4em;
}
</style>
</head>
<body>
<ol>
<li>Mask;</li>
<li>Gun;</li>
<li>Bank;</li>
<li>Police;</li>
<li>Court;</li>
<li>Jail</li>
</ol>
</body>
</html>

--
dorayme

[Bergamot]

dorayme wrote:

>
(but it is _a_ horiz ordered list with numbers and supplied by
the <ol>):

Try it in IE and see what happens.

--
Berg

[Jonathan N. Little]

Bergamot wrote:

dorayme wrote:

>(but it is _a_ horiz ordered list with numbers and supplied by
the <ol>):

Try it in IE and see what happens.

File that under "Wow this works great!*"
* except in MSIE

You have to admit that flipping * gets tiresome! Then you have to take a
simple and elegant solution a muck it with an IE-workaround.

--
Take care,

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

[Ben C]

On 2007-06-04, dorayme <do************@optusnet.com.auwrote:

In article
<11**********************@r19g2000prf.googlegroup s.com>,
"scripts.contact" <sc*************@gmail.comwrote:

>On Jun 3, 7:56 pm, dorayme <[e-mail]:

Is it possible to display the List Items on the horizontal, i.e., side
by side instead of one List Item per line?

use a UL and
display:inline-block;
or
float:left
on LIs

Perhaps you might give an example using these alternatives you
mention.

-HTML-

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

-STYLE-

li {display:inline-block;border:1px dotted gray}

This is not an ordered list. I asked because while the ul one is
quite straightforward, the <olone is just that more tricky to
get right, no? To get the numbers in too remember... and to look
reasonable.

If you change the display on li to anything other than display:
list-item, the list item markers (bullets for an <olnumbers of some
kind for a <ul>) should disappear.

If you float the list items but leave them as display: list-item, you
should keep the markers (according to CSS 2.1 9.7) although neither
Opera nor Konqueror do.

Firefox does but it doesn't put them in a particularly helpful place.

So yes a horizontal <olis not easy to do. Neither is a horizontal <ul>
if you still want the bullets.

[dorayme]

In article <5c*************@mid.individual.net>,
Bergamot <be******@visi.comwrote:

dorayme wrote:

(but it is _a_ horiz ordered list with numbers and supplied by
the <ol>):

Try it in IE and see what happens.

I take your word for it.

--
dorayme

[dorayme]

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

On 2007-06-04, dorayme

This is not an ordered list. I asked because while the ul one is
quite straightforward, the <olone is just that more tricky to
get right, no? To get the numbers in too remember... and to look
reasonable.

So yes a horizontal <olis not easy to do. Neither is a horizontal <ul>
if you still want the bullets.

Yes, I am sure you are right. I was thinking that it would be
unlikely for someone to be wanting the bullets in a horiz list.
But a little more liklihood wanting numbers for the ol one. I
assume that mostly people choose ol rather than ul for more than
some pure html semantic reason, they want the numbers!

They are a devil to code for with numbers and "border" separators
even in the browsers that show the numbers. When I messed about
with them, I found it simpler to forget about separators, beyond
perhaps a ";" after the text in each <li></li>.

I suppose I better fire up my Winbox and see what old Bergamot is
saying about IE. (I use him shamelessly to learn things, he does
not realise it, which is how I like it. But ssshhhh!)

--
dorayme

[Ben C]

On 2007-06-05, dorayme <do************@optusnet.com.auwrote:

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

>On 2007-06-04, dorayme

This is not an ordered list. I asked because while the ul one is
quite straightforward, the <olone is just that more tricky to
get right, no? To get the numbers in too remember... and to look
reasonable.

So yes a horizontal <olis not easy to do. Neither is a horizontal <ul>
if you still want the bullets.

Yes, I am sure you are right. I was thinking that it would be
unlikely for someone to be wanting the bullets in a horiz list.
But a little more liklihood wanting numbers for the ol one. I
assume that mostly people choose ol rather than ul for more than
some pure html semantic reason, they want the numbers!

Exactly. People quite often use display: inline on floated list-items to
lose the bullets. list-style: none (or something similar to that) is
also good but might not work in IE.

They are a devil to code for with numbers and "border" separators
even in the browsers that show the numbers. When I messed about
with them, I found it simpler to forget about separators, beyond
perhaps a ";" after the text in each <li></li>.

The spec doesn't define precisely where "outside" positioned list item
markers go so if you want to change the layout of the list much from the
normal vertical style it's probably better to do the numbers yourself
(in spans or something) and then you have more control over them.

[dorayme]

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

On 2007-06-05, dorayme <do************@optusnet.com.auwrote:

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

On 2007-06-04, dorayme

They are a devil to code for with numbers and "border" separators
even in the browsers that show the numbers. When I messed about
with them, I found it simpler to forget about separators, beyond
perhaps a ";" after the text in each <li></li>.

The spec doesn't define precisely where "outside" positioned list item
markers go so if you want to change the layout of the list much from the
normal vertical style it's probably better to do the numbers yourself
(in spans or something) and then you have more control over them.

Yes. Or in a table for a very short ordered list (where wrapping
is unlikely to be an issue).

I once argued that an ordered list was in some sense equivalent
to a 2 col table, the left col containing the order and the right
the corresponding content, row by row, thus being tabular in its
heart of hearts. But any idea of presenting an ordered list in a
horizontal manner makes me think that a one row table would not
be an obviously helpful substitute. Because the logical
relationships between the cells with numbers and the cells with
corresponding content would be in pairs that are just a bit
harder to describe or be evident - "count in pairs from the first
cell", the voice reader pauses at the end of the pairs...

--
dorayme

[Ben C]

On 2007-06-06, dorayme <do************@optusnet.com.auwrote:

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

>On 2007-06-05, dorayme <do************@optusnet.com.auwrote:

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

On 2007-06-04, dorayme

They are a devil to code for with numbers and "border" separators
even in the browsers that show the numbers. When I messed about
with them, I found it simpler to forget about separators, beyond
perhaps a ";" after the text in each <li></li>.

The spec doesn't define precisely where "outside" positioned list item
markers go so if you want to change the layout of the list much from the
normal vertical style it's probably better to do the numbers yourself
(in spans or something) and then you have more control over them.

Yes. Or in a table for a very short ordered list (where wrapping
is unlikely to be an issue).

I once argued that an ordered list was in some sense equivalent
to a 2 col table, the left col containing the order and the right
the corresponding content, row by row, thus being tabular in its
heart of hearts. But any idea of presenting an ordered list in a
horizontal manner makes me think that a one row table would not
be an obviously helpful substitute. Because the logical
relationships between the cells with numbers and the cells with
corresponding content would be in pairs that are just a bit
harder to describe or be evident - "count in pairs from the first
cell", the voice reader pauses at the end of the pairs...

You could nest the tables so each pair was in its own table. Better
though would just be to use inside list item markers, e.g.

li
{
list-style-position: inside;
float: left;
margin-right: 1em;
border: 1px dashed gray;
}

It perhaps should be pointed out that float: left will put the items in
the wrong order if direction is set to rtl. Table cells however will go
right to left depending on the value of direction (or the HTML dir
atttribute).