Circle around number in ordered list.
newbie
Posted: Thu, 2008-06-26 20:51
I would like to be able to have white numbers in a black circle for my ordered list, like so:
I've tried using:
<style>
ol li { color:white; background-image:url('/contest/img/trailerContestNumberBG.gif'); background-repeat:no-repeat; background-position:-10px;}
ol li span {color:black}
</style>
<ol>
<li><span>a</span>
<li><span>b</span>
<li><span>c</span>
<li><span>d</span>
</ol>
Doesn't work for me.
Enthusiast
Posts: 326
Joined: 2008-02-04
Location: Netherlands
Edit, redo
Posted: Thu, 2008-06-26 21:21
You haven't closed your li's...
<ol>
<li><span>Blah blah list item one</span></li>
<li><span>Yakkitty schmakkitty blah blah list item two</span></li>
<li><span>Third list item's a charm</span></li>
</ol>
ol has margins and padding already set to zero right? Cause I forget which, but like IE uses I think margin while FF uses padding, or maybe it's the other way around, I forget, so it'll look goofy in one browser or the other if you didn't set things to zero first (setting them on the body doesn't seem to get to the lists).
li {
list-style: none; (you can also stick this on the ol instead, but whatever)
color: #fff; (white)
background: url(funkyblackcircle.gif) left center no-repeat;
padding-left: like, 10px or something;
}
li span {
color: #000; (black)
}
*edit, I rewrote this, cause I misunderstood you-- read too fast : (
The above may still not work as coders have little control over the numbers etc of an ordered list. So, an easier way might be
<ul>
<li><span>1</span>Blah blah list item one</li>
<li><span>2</span>Yakkitty schmakkitty blah blah list item two</li>
<li><span>3</span>Third list item's a charm</li>
</ul>
Give the background image and white colour to span. Set right-padding on span, and no padding on li. Set black colour to li. This forces you to write the numbers in the HTML, so you don't get the benefits of ordered lists, but might give you more control.
I'm no expert, but I can fake one on teh Interwebz
newbie
Posts: 1
Joined: 2008-07-23
Circle around number in ordered list.
Posted: Wed, 2008-07-23 04:36
Ordered and unordered lists are rendered in an identical manner except that visual user agents number ordered list items.
______________________________________________
Mac
Wide Circles
newbie
Posts: 1
Joined: 2008-07-28
I think that should be work.
Posted: Mon, 2008-07-28 06:12
I think that should be work. Please try again.
_______________________________________________________
Angel
http://community.widecircles.com
newbie
Posts: 1
Joined: 2008-07-29
I have watched, everything
Posted: Tue, 2008-07-29 08:12
I have watched, everything is right, I am also confused why you are not able to do this, I have tried with your method and I am able to do.
____________________________________________
Allen
Wide Circles
newbie
Posts: 1
Joined: 2008-08-11
Location: phoenix
Save Rain Water.
Posted: Mon, 2008-08-11 09:51
In practice the costs, resources and the construction methods tend to limit the tanks to smaller capacities than would otherwise be justified by roof areas or likely needs of consumers. For this reason elaborate calculations aimed at matching tank capacity to roof area is usually unnecessary. However a simplified calculation based on the following factors can give a rough idea of the potential for rainwater collection.
________
jackspar.
WideCircles