By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,785 Members | 1,079 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,785 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
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.

Jul 20 '05 #2

P: n/a
In article <MP************************@news.cis.dfn.de> in
comp.infosystems.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/
Jul 20 '05 #3

P: n/a
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/
Jul 20 '05 #4

P: n/a

"Jukka K. Korpela" <jk******@cs.tut.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>

Jul 20 '05 #5

P: n/a
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
Jul 20 '05 #6

P: n/a
Thanks Jukka, That's just what I needed :)

"Jukka K. Korpela" <jk******@cs.tut.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.

Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.