#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    125
    Rep Power
    28

    Horizontal ul - kickstarter-like stats


    Hi,

    I'm trying to get a horizontal UL to show the project stats(funded,pledged,days to go) just like the Kickstarter.com home page. However, I can't seem to get it right. The parent div of the ul is a fixed width. One tricky thing is getting the text in each li to be on two lines.
    Can anyone provide some hints?

    Markup:
    Code:
    <div class="parent-div">
      An image will go here</br>
      Some Text will go here.
    
      <ul id="stats">
        <li>$10000 PLEDGED</li>
        <li>56% FUNDED</li>
        <li>4 months TO GO</li>
      </ul>
    
    </div>
    CSS:
    Code:
    .parent-div {
      width: 220px;
      height: 300px;
      border: 0.1em solid #000;
    }
    
    #stats {
    margin: 0;
    padding: 0;
    
    }
    
    #stats li {
      text-align: center;
      display: inline;
      list-style-type: none;
    }
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    716
    Rep Power
    442
    If you want the first line to be on its own line, it's best to wrap it in its own tag (say a <div> or <span>). You could just look at how Kickstarter does it:

    Code:
    <ul class="project-stats">
    <li class="first funded">
    <strong>8%</strong>
    funded
    </li>
    <li class="pledged">
    <strong>$405</strong>
    pledged
    </li>
    <li style="display: none;" class="last successful">
    <strong>Funded</strong>
    <div class="deadline">
    </div>
    </li>
    <li data-end_time="2012-12-28T18:04:17Z" class="last ksr_page_timer">
    <strong>
    <div class="num">24</div>
    </strong>
    <div data-word="left" class="span text">days to go</div>
    </li>
    </ul>
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    300
    Rep Power
    9
    What do you mean by 'One tricky thing is getting the text in each li to be on two lines.'?

    I thought you wanted them inline?

    Did you want it to look like:

    $10000 56%
    PLEDGED FUNDED

    etc?

    Regards,

    LC.

IMN logo majestic logo threadwatch logo seochat tools logo