...

View Full Version : Styling ordered list numbers/letters?



Graft-Creative
03-08-2005, 11:25 AM
Hi, I've searched and not found anything, so here goes:

How do you style the list item numbers or letters in an ordered list? Like making the numbers bold/different colour/font/size?

Maybe it's a dumb question, I dunno, what I do know - is that I can't think of the answer :o

Any help would be greatly appreciated.

Kind Regards,

Gary

ronaldb66
03-08-2005, 12:49 PM
I'm afraid there's nothing much to do; these list markers are generated content, so I think they adopt the styles specified for the list items themselves.
Generating them yourself I guess would offer more posibilities, but of course IE doesn't support that... :mad:

One way I can think of right now is to use background images; I've seen this done in a very appealing way, but this would mean id'ing every single list item and would require a bundle of images.
You can of course always check the specs (http://www.w3.org/TR/2004/CR-CSS21-20040225/generate.html) for more details; be aware though of browser support issues.

rmedek
03-08-2005, 03:33 PM
Maybe style the list markers with the li, and re-style the text within using span?



li {
properties of the numbers
}

li span {
properties of the text
}

<ol>
<li><span>list item</span></li>
<li><span>list item</span></li>
<ol>


I dunno if it'll work, but it's an idea...

Graft-Creative
03-08-2005, 11:15 PM
Thanks guys. I'm afraid you've confirmed my worst fears about this (not that I'll have nightmares about it).

;)

But it's a shame the only options seem to be some kind of tag fudge

Many thanks,

Gary

Bobbo171
03-08-2005, 11:55 PM
you can check this out...it may be what your looking for
http://www.alistapart.com/articles/taminglists/

tammyhart
04-12-2006, 03:27 PM
Maybe style the list markers with the li, and re-style the text within using span?



li {
properties of the numbers
}

li span {
properties of the text
}

<ol>
<li><span>list item</span></li>
<li><span>list item</span></li>
<ol>


I dunno if it'll work, but it's an idea...

yes! that worked for what I needed, thankyou so much!

orcrist
04-12-2006, 03:42 PM
ah lol, resurection !! :D

i did something like that using :first-letter pseudo element, take a look:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title></title>


<style type="text/css">
#services ul{list-style-type:none;padding:0;margin:0px 10px;}



.list a {text-decoration:none;display:block;letter-spacing:-1px;
color:#000;}
.list a:hover {color:#666;
text-align:center;}
#list1 li :first-letter {color: #ccc;display:block;
font-weight:bold;
margin:0.2em;background-color:#b00;}

#list2 li :first-letter {color: #ccc;display:block;
font-weight:bold;
margin:0.2em;background-color:#b00;}

#list1 {float:left;}
#list2 {float:right;}
</style>
</head>
<body>
<div id="services">
<ul id="list1" class="list">
<li><a href="#">&raquo;&nbsp;Windscreens</a></li>
<li><a href="#">&raquo;&nbsp;Side Glass</a></li>
<li><a href="#">&raquo;&nbsp;Rear Glass</a></li>
<li><a href="#">&raquo;&nbsp;Resealing</a></li>
<li><a href="#">&raquo;&nbsp;Chip &amp; Crack Repairs </a></li>

</ul>
</div>
</body>
</html>

translated: it reduced markup for that span thing, no need for that ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum