473,228 Members | 1,671 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,228 software developers and data experts.

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

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
6 35488
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
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
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

"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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Tyler | last post by:
When I am making an unordered list (using bullets), is there a way to make the bullets small pictures that I can choose. <ul type=??> <li></li> </ul>
1
by: Johannes Theile | last post by:
Hi, is it possible to show the bullets in a list (ul), although it is possitioned as an inline element? Greetings, Johannes
2
by: Wiz | last post by:
Greetings the group! I see from a few previous postings that I am not the only person having a problem with hidden list item bullets. This question applies to both IE 6, current version, and...
3
by: Jordan Peterson | last post by:
When using {list-style: none} to hide the bullets in a <ul>, the bullets disappear but they are still accounted-for when positioning text. Specifically, I have: <div style='text-align:...
33
by: Jim Cobban | last post by:
I cannot get Netscape 4.79 to properly display the ordered list in the following fragment. <P>Get a specific portion of the date. Depending upon the value of index: <ol start=0> <li>complete...
3
by: dingbat | last post by:
A relatively common piece of CSS is to style a list to be displayed in-line: li { display: inline; } However this also removes any bullets from the <li>s, as they're no longer "list items". ...
210
by: Christoph Zwerschke | last post by:
This is probably a FAQ, but I dare to ask it nevertheless since I haven't found a satisfying answer yet: Why isn't there an "ordered dictionary" class at least in the standard list? Time and again...
8
by: Fuzzyman | last post by:
Sorry for this hurried message - I've done a new implementation of out ordered dict. This comes out of the discussion on this newsgroup (see blog entry for link to archive of discussion). See...
2
by: Max58kl | last post by:
Hi I am trying to create a bulletted list that has a colored background. The follow css code successfully applies the background color to the list items, but for some reason does not apply the...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
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: 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
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
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:
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...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

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.