A css problem, please help

I am having a stats section center in the main section of my layout and under each statsistic name I want the actual statistic to be displayed but I don’t know how to make it show right under.

Example:
"Total Orders
1,456 "

My code:

CSS:

.stats ul {
	margin: 20px 0 5px 0; 
    padding: 5px; 
	list-style-type: none;
	text-align: center;
	list-style-position:inside;
}

.stats ul li {
	display: inline;
	font-size: 16px;
	margin: 35px 50px 35px 50px;
	padding: 5px;
}

HTML:

<div class="stats">
	<ul>
		<li>Total Orders</li>
		<li>Possible Orders</li>
		<li>Other Orders</li>
		<li>Income Gain</li>
	</ul>
</div>

How would I be able to position text under each LI element?

Thank you in advance!

Hi,

You can nest a span within the LI to style the stats count.

Set the LI as an inline-block so it shrikwraps to the span.
Then set the span as display:block; so it drops down to it’s own line, the inline-block on the LI will keep the span constrained.

It looks like you can loose that wrapping div also and just style the UL with the stats class.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test Page</title>
<style type="text/css">

ul.stats {
    margin: 20px 0 5px 0;
    padding: 5px;
    list-style: none;
    text-align: center;
}
ul.stats li {
    display: inline-block;
    margin: 35px 50px;
    padding: 5px;
}
ul.stats li span {
    display:block;
    background:#EEF;
}
</style>

</head>
<body>
    <ul class="stats">
        <li>Total Orders <span>1,456</span></li>
        <li>Possible Orders <span>200</span></li>
        <li>Other Orders <span>57</span></li>
        <li>Income Gain <span>40%</span></li>
    </ul>
</body>
</html>

Thank you so much! It worked perfectly, I really need to sharpen up my display skills lol

If I make ask one more question, if I wanted an image like an icon be to the left side of each LI would I use another span within the same <li> or outside of it?

Thank you!

One thing you could do is remove the left margin on each LI and make it left padding instead. Then set the icon as a background image on the LI. If those icons are just decorations, that’s what I’d do. However, it means you need to give each LI a special class so that you can target it via CSS.


ul.stats li {
    display: inline-block;
    margin: 35px 50px 35px 0;
    padding: 5px 5px 5px 40px;
}

If, instead, you want images in the HTML, then you can just stick it into the LI like so:

<li><img src="icon.png"> Total Orders <span>1,456</span></li>

and remove the LI left margin but not replace it with LI left padding. You could perhaps float the image left and give it a right margin of 10px or similar.

just an additional note,

if I wanted an image like an icon be to the left side of each LI would I use another span within the same <li> or outside of it?

You cant have ANYTHING outside the LI, it’s not valid code.

Alternate to the suggested method above ( which is possibly the simplest and BEST way to do it) you could do

ul.stats li:before {display: inline-block;}
ul.stats li.total:before {content:url(total-incom.jpg);}
ul.stats li.possible:before {content:url(total-incom.jpg);}
and so forth…

you would need to use filters to support IE<8 but it can be done as well.