SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict Procode's Avatar
    Join Date
    Dec 2006
    Location
    New York
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    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:
    Code HTML4Strict:
    <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!

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Procode View Post
    ... I want the actual statistic to be displayed but I don't know how to make it show right under.

    How would I be able to position text under each LI element?
    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.

    Code HTML4Strict:
    <!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>

  3. #3
    SitePoint Addict Procode's Avatar
    Join Date
    Dec 2006
    Location
    New York
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much! It worked perfectly, I really need to sharpen up my display skills lol

  4. #4
    SitePoint Addict Procode's Avatar
    Join Date
    Dec 2006
    Location
    New York
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.

    Code:
    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:

    Code:
    <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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •