LI images on right side of text?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

LI images on right side of text?

Post by alex.barylski »

Normally bullets (or images) are left of the label text...is it possible to reverse that order? I have some right aligned bullets which have images to the right and I'd like to use the CSS for LI but need the images to the right of labels???

Possible?
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

Not sure, but I'm sure if you looked into list-style you'd find whether it is supported or not.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

did that...cound't see anything...but figured I'd ask anyways :)
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

I'm pretty sure it's possible through some CSS "trickery." The browser won't really see the bullets on the right, but you can make it look that way to the user using background settings and padding I would imagine.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

Agreed, turn off the bullets and use a background image of a bullet on the right, use right padding of the width of the image + 5px or so...

Code: Select all

ul {
  list-style:none;
  margin:0;
  padding:0;
}

ul li {
  text-align:right;
  background: #FFF url(bullet.gif) no-repeat right center;
  line-height: 1em;
  height: 1em;
  padding-right: 20px;
}
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

Nice, thanks again nickvd ;)
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

maybe you can switch the reading order to RTL for the list?
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

nickvd offered the perfect solution...worked like a charm :)

Cleaned up some ugly markup and everything looks smooth like a baby bum :P

Thanks guys :)
Post Reply