How do I set bullets on right side of ordered list?

[Stephen Miller]

Hi,

How can I configure an ordered list so that the bullet is placed on
the right hand side of the list item. ie:

list item 1 *
list item 2 *
list item 3 *

Thanks,

Stephen

[Lauri Raittila]

In article Stephen Miller wrote:

Hi,

How can I configure an ordered list so that the bullet is placed on
the right hand side of the list item. ie:
CSS2:
li {display:block; list-style:none;}
:after {display:marker ;content:"*";}
(no, it doesn't work. maybe it will in 10 years)
list item 1 *
list item 2 *
list item 3 *

You need use some workaround. I can't think any whiout extra markup.
Please tell some more about what you want, and what is your content. And
why you want those bullets on right.

Your generic example has three list items that has same lenght. What you
want to happen when that is not the case? Is your list supposed to be
aligned to some side? etc. Best would be otherwise ready page with real
content.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Stan Brown]

In article <MP************ ************@ne ws.cis.dfn.de> in
comp.infosystem s.www.authoring.stylesheets, "Lauri Raittila" wrote:

You need use some workaround. I can't think any whiout extra markup.

I wonder what happens in Hebrew text, or other right-to-left
scripts?

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Jukka K. Korpela]

Stan Brown <th************ @fastmail.fm> wrote:

I wonder what happens in Hebrew text, or other right-to-left
scripts?

You don't need Hebrew for this. You can use the dir attribute in HTML:

<ul dir="rtl">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

Note that this will appear on the right side of the available area.

The text in the list items, if written in Latin letters, will still run
from left to right, since it has inherent directionality and the dir
attribute shall not override that. Well, I'm not so sure of what
browsers actually do (they are known to take the dir attribute as
overriding inherent directionality in some cases), and since this is
presentational only, I would try to use CSS instead:

ul { direction: rtl; }
li { direction: ltr; }

The bad news is that on IE 6, this creates a presentation that has _no_
bullets. A strange bug. Using just the first rule creates the same
effect as the HTML attribute.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Harlan Messinger]

"Jukka K. Korpela" <jk******@cs.tu t.fi> wrote in message
news:Xn******** *************** ******@193.229. 0.31...

Stan Brown <th************ @fastmail.fm> wrote:

I wonder what happens in Hebrew text, or other right-to-left
scripts?
You don't need Hebrew for this. You can use the dir attribute in HTML:

<ul dir="rtl">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

Note that this will appear on the right side of the available area.

The text in the list items, if written in Latin letters, will still run
from left to right, since it has inherent directionality and the dir
attribute shall not override that. Well, I'm not so sure of what
browsers actually do (they are known to take the dir attribute as
overriding inherent directionality in some cases), and since this is
presentational only, I would try to use CSS instead:

ul { direction: rtl; }
li { direction: ltr; }

The bad news is that on IE 6, this creates a presentation that has _no_
bullets. A strange bug. Using just the first rule creates the same
effect as the HTML attribute.

I did find a couple of permutations of styles on UL and LI that caused the
bullets to disappear. The following code works in IE6 and Firebird, with the
bullets on the right, and with the text left-aligned--but also
left-indented. I tried to get rid of the indentation but couldn't figure out
how.

<style>
li { direction: rtl; text-align: left; }
</style>

<p>Hello</p>
<ul>
<li>One</li>
<li>Two</li>
</ul>

[Roy Reed]

Stephen Miller wrote:

Hi,

How can I configure an ordered list so that the bullet is placed on
the right hand side of the list item. ie:

list item 1 *
list item 2 *
list item 3 *

Thanks,

Stephen

You can do it with an unordered list using a background image as the bullet:

ul li {
background: url(images/bullet.gif) no-repeat right;
text-align: right;
margin-right: 0;
padding-right: 1.5em;
list-style: none;
}

Why do you want a list with a number and a bullet?

--
Must fly

Roy

www.reeddesign.co.uk

[Stephen Miller]

Thanks Jukka, That's just what I needed :)

"Jukka K. Korpela" <jk******@cs.tu t.fi> wrote in message news:<Xn******* *************** *******@193.229 .0.31>...

Stan Brown <th************ @fastmail.fm> wrote:

I wonder what happens in Hebrew text, or other right-to-left
scripts?

You don't need Hebrew for this. You can use the dir attribute in HTML:

<ul dir="rtl">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

Note that this will appear on the right side of the available area.

The text in the list items, if written in Latin letters, will still run
from left to right, since it has inherent directionality and the dir
attribute shall not override that. Well, I'm not so sure of what
browsers actually do (they are known to take the dir attribute as
overriding inherent directionality in some cases), and since this is
presentational only, I would try to use CSS instead:

ul { direction: rtl; }
li { direction: ltr; }

The bad news is that on IE 6, this creates a presentation that has _no_
bullets. A strange bug. Using just the first rule creates the same
effect as the HTML attribute.