current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I need to achieve something like this...

Numbered List

I'm guessing the pictures need to be stored in some form of array in Javascript containing the image links. But I'm not sure if it is achievable in just HTML and CSS.

There is a solution on this question, which uses the ":before" pseudo element, but is there a more cross-browser friendly solution available?

share|improve this question
    
Use an ordered list and style the bullets maybe? –  tymeJV Jul 19 '13 at 13:04
2  
Try this answer: stackoverflow.com/questions/6481581/… –  Tdelang Jul 19 '13 at 13:09
    
very useful link ^^ thankyou! –  Matt Maclennan Jul 19 '13 at 13:22

2 Answers 2

up vote 0 down vote accepted

You could use regular <ol> and add a background-image (red circle) to each of the list items

share|improve this answer
    
that worked! thanks! :) –  Matt Maclennan Jul 19 '13 at 13:20
up vote 0 down vote

Why even use an image: 

 <style type="text/css">
   body {
    background:#333; 
    color:#FFF;
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
   }
   .number-list {
      list-style-type:none;
      margin:0px;
      padding:0px;
   }
   .number-list li {
 width:100%;
 float:left;
 margin-bottom:10px;
 line-height:35px;
 font-size:16px;
   }
   .number-list li .order-number {
      background:#900;
      color:#FFF;
      width:35px;
      height:35px;
      text-align:center;
      line-height:35px; 
      float:left;
      margin-right:15px;
      -webkit-border-radius:35px;
         -moz-border-radius:35px;
          -ms-border-radius:35px;
      -border-radius:35px;
        border-radius:35px;
   }
  </style>
  </head>

  <body>

  <ol class="number-list">
      <li>
          <span class="order-number">1</span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar velit in lectus suscipit elementum luctus in dolor. Fusce eu neque suscipit, egestas nisi et, aliquam est. Pellentesque ac justo a mauris pretium sollicitudin. Maecenas tempus sodales semper.
      </li>
      <li>
          <span class="order-number">2</span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar velit in lectus suscipit elementum luctus in dolor. Fusce eu neque suscipit, egestas nisi et, aliquam est. Pellentesque ac justo a mauris pretium sollicitudin. Maecenas tempus sodales semper.
      </li>
      <li>
          <span class="order-number">3</span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar velit in lectus suscipit elementum luctus in dolor. Fusce eu neque suscipit, egestas nisi et, aliquam est. Pellentesque ac justo a mauris pretium sollicitudin. Maecenas tempus sodales semper.
      </li>
      <li>
          <span class="order-number">4</span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar velit in lectus suscipit elementum luctus in dolor. Fusce eu neque suscipit, egestas nisi et, aliquam est. Pellentesque ac justo a mauris pretium sollicitudin. Maecenas tempus sodales semper.
      </li>
  </ol>

People in IE 8 < can have a square rather than a circle ... seems fitting

share|improve this answer
    
It's an ordered list, if anything it orders an ordered list. –  JohnnyFaldo Jul 19 '13 at 13:47

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.