Page 1 of 1

LI images on right side of text?

Posted: Fri Mar 16, 2007 7:28 pm
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?

Posted: Fri Mar 16, 2007 8:05 pm
by John Cartwright
Not sure, but I'm sure if you looked into list-style you'd find whether it is supported or not.

Posted: Fri Mar 16, 2007 8:40 pm
by alex.barylski
did that...cound't see anything...but figured I'd ask anyways :)

Posted: Fri Mar 16, 2007 9:20 pm
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.

Posted: Fri Mar 16, 2007 11:16 pm
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;
}

Posted: Fri Mar 16, 2007 11:39 pm
by alex.barylski
Nice, thanks again nickvd ;)

Posted: Sat Mar 17, 2007 12:20 am
by Kieran Huggins
maybe you can switch the reading order to RTL for the list?

Posted: Sat Mar 17, 2007 2:30 am
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 :)