homepage Welcome to WebmasterWorld Guest from 54.163.72.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Can you use images with ordered lists?
<ol> <li> and image use.
scraptoft




msg:3644702
 1:30 pm on May 8, 2008 (gmt 0)

I am using a many ordered lists on my website and I want to know if it's possible to style the bullet. I'd be happy to style the numbers using bold/bordered or with an image.

(I am aware I can use one set image as a bullet but i'd like them be numbered)

Let's just say I wanted the following numbers to be pink with a black border - can it be done?
[1]
[2]
[3]

Cheers.

 

sgietz




msg:3644757
 2:30 pm on May 8, 2008 (gmt 0)

If I understand correctly, you could set the style at the li level and then enclose the actual text of the list item inside of a differently styled span tag.

scraptoft




msg:3644866
 4:06 pm on May 8, 2008 (gmt 0)

Sgietz, do you mean have a different <li> style for each item in the list? Isn't there a more efficient way that allows me to control the actual numbers?

If not I guess i'll settle with that, thanks.

sgietz




msg:3645081
 7:18 pm on May 8, 2008 (gmt 0)

You don't need a different style. It would look like this:

<ol class="listclass">
<li><span class="spanclass">List Item</span></li>
<li><span class="spanclass">List Item</span></li>
<li><span class="spanclass">List Item</span></li>
</ol>

The span's purpose is to override the style for the li element. I don't think you can put a border around just the number. The entire list item would have a border. You could use images, but then you will have to set the style for each li element (if you want each bullet to be different).

I'm sure someone here can come up with a better way to do this.

swa66




msg:3646428
 6:06 am on May 10, 2008 (gmt 0)

Take a look at display:marker in CSS2.1
[w3.org...]
I'm unsure if there's support out there in browsers for this.
(considering it's intended to only work in :before and :after, the odds of it working in IE6 are ... ridiculous

Note that CSS3 will obsolete CSS2 markers ...
[w3.org...]

Xapti




msg:3646440
 6:22 am on May 10, 2008 (gmt 0)

Well one option would be to make a vertical line of numbers for the OL...
The easiest way would be to only display the necessary numbers, but setting overflow:hidden to the OL.
There remains a problem though, scaling for font size.
This is a messy and somewhat tedious fix...One would have to make an image for each OL which has a certain number of points (ie. 4 lines OL img, 5 lines OL img, 6 lines OL img, etc.), and then set the img height to equal the height of the OL, so that it stretches to conform to different font sizes. Horizontally can be done as well with something like 1em width. A big problem with this method is that the imgs cannot be backgrounds, as background cannot be stretched in current supported CSS, meaning the image will have to be placed in each OL (as non-semantic markup).

Meh, just brainstorming. But yeah, if you just want a border around the numbers, I think what sgietz said could work, except I think some browsers like IE6 (probably the only one) don't apply styles to the 'bullet'? I don't really know.

[edited by: Xapti at 6:25 am (utc) on May 10, 2008]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved