Bit of css help please ( ol li stuff )

Question

So I am doing a custom ol li list, and i really get confused with shortcuts css wise for ol , ul and li stuff.

If i tell you what I want, and provide some sample code could someone help please.

Ok so I am after a numbered list like so...

<ol>
    <li>Dave Jones<span class="searchTotals">189 searches</span></li>
    <li>Debs<span class="searchTotals">34 searches</span></li>
    <li>Tarbutt<span class="searchTotals">211 searches</span></li>
</ol>

What I want to do is NOT repeat the span class within the li element, so perhaps you could help.

Also I wanted to number style each li.

In so far as put a circle around each number..

Here is some css for the numbers.

background: none repeat scroll 0 0 #ec008c;
border-radius: 1em 1em 1em 1em;
color: #FFFFFF;
display: inline-block;
float: right;
font-family: inherit;
font-size: 10px;
font-weight: bold;
line-height: 1em;
margin-left: 0.5em;
padding: 0.35em 0.5em;
text-align: center;
text-decoration: none;

Here is some css for the SPAN class.

float:right;
color:#3399ff;

Trying to get it to look like this:

enter image description here

Which browsers/versions do you need to support? IE7? IE8? – thirtydot Jul 18 '11 at 13:29 — thirtydot, Jul 18 '11 at 13:29

score 0 · Answer 1 · answered Jul 18 '11 at 13:12

0

Use CSS property background for li elements

answered Jul 18 '11 at 13:12

Hnatt

5,767
3
32
43

score 0 · Accepted Answer · answered Jul 18 '11 at 13:15

0

if you are looking to float all the text in the div left without using span tags you can use this: (can't select just part of the text with CSS)

ol li {
   float:left;
   color:#3399ff;
}

If you want to have numbers with circles around them with the li, you're going to have to use images and use the background:url() property.

answered Jul 18 '11 at 13:15

Phil

10,948
17
69
101

Why would I have to use images? – 422 Jul 18 '11 at 13:16
`CSS` currently does not provide a list-style with circles around numbers; maybe later on in `CSS3`, but not now. – Phil Jul 18 '11 at 13:18
1

Yes you have, but with images and not `list-style-type:` http://www.w3schools.com/cssref/playit.asp?filename=playcss_ol_list-style-type&preval=armenian – Phil Jul 18 '11 at 13:38
1

@422: [That](http://stackoverflow.com/questions/5732836/html-css-numbered-list-with-numbers-inside-of-circles/5742176#5742176) will work in all modern browsers (including those you listed). In IE8, it will work but the corners won't be rounded. In IE7, there will be no numbers. – thirtydot Jul 18 '11 at 14:16
Voted your answer Phil, as only fair :) plus tidies my CP up :) – 422 Jul 25 '11 at 02:20

Bit of css help please ( ol li stuff )

2 Answers2