5

I am creating a little widget for a page that lists steps in reverse order. I plan on doing this with an ol and setting the value attribute on the individual li tags to force the numbering of the ol to be reversed. So far so good.

However, I have a design conundrum that I'm not sure can be solved with css.

With this mark up, is it possible to center the text but keep the labels left-aligned?

<ol>
    <li value="5">item 5</li>
    <li value="4">item 4</li>
    <li value="3">item 3</li>
    <li value="2">item 2</li>
    <li value="1">item 1</li>
</ol>

Here is an image to illustrate the text treatment I am after.

Reversed OL with centered text but left-aligned labels

It would be a shame if I had to shove extra spans in my markup for something that OLs do automatically.

DingoEatingFuzz
  • 623
  • 3
  • 11

4 Answers4

10

You can reverse counters, then you can align the counters separately from the text.

not IE7 though, but with the values it'll default (IE hacks built in get back the defaults)

CSS:

ol {
    padding: 0;
    margin: 0;
    list-style-type: decimal !ie7;
    margin-left: 20px !ie7;
    counter-reset:item 6; /* one higher than you need */
    width: 250px;
    border: 1px solid #000;
}
ol > li {
    counter-increment:item -1;
    text-align: center;
}
ol > li:before {
    content:counter(item) ". ";
    float: left;
    width: 30px; background: #eee;
}

HTML

<ol>
    <li value="5">item 5</li>
    <li value="4">item 4</li>
    <li value="3">item 3</li>
    <li value="2">item 2</li>
    <li value="1">item 1</li>
</ol>
pixeline
  • 17,669
  • 12
  • 84
  • 109
clairesuzy
  • 27,296
  • 8
  • 54
  • 52
  • 1
    That is super awesome! I wasn't aware of counter(item) for the content attribute so I disregarded :before before I should have. Thanks for this. – DingoEatingFuzz Mar 24 '11 at 22:56
  • @DingoEatingFuzz, you're welcome - yea it's pretty cool what's on our doorstep now, but finding everything is the problem ;) – clairesuzy Mar 25 '11 at 22:15
1

You're going to need that extra element - the numbers in the list are considered part of the text for layout purposes like this. Adding an inner span set to display: inline-block should do the trick.

On a design note, it's worth pointing out that multiple lines of center-aligned text are very hard to scan, as the starting point (left edge) of the text is in a different place from line to line. Would a consistent, if large, text-indent suit you just as well? It would definitely be more readable.

And FWIW, did you know that HTML5 includes the 'reversed' attribute on OL's? You'll still need your value attributes for older browsers, of course.

Ben Hull
  • 7,524
  • 3
  • 36
  • 56
  • I am aware of the reversed attribute (as of today) but when I tested it out in firebug (with FF4) it didn't work, so I'm holding out. As for using text-indent, my fear is that there may be a case where there will be too much text in the item so the indent won't work. Indent or centered, I'm putting myself on shaky ground. Odds are I will eventually have to redesign it to allow for multi-line labels. Thanks for the advice! – DingoEatingFuzz Mar 24 '11 at 21:18
  • Wow - I thought FF4 would have supported it for sure. Good to know - thanks! – Ben Hull Mar 24 '11 at 21:43
0
li{ list-style:none; text-align:center; }
li:before{ content:attr(value); float:left; }
n1kkou
  • 3,096
  • 2
  • 21
  • 32
0

I'm not sure if this is what you mean by shoving extra spans, but this works:

li {text-align:center; margin-bottom:4px;}
#list {display:block;width:300px;background:#ddd;text-align:center;}
<ol>
    <li><div id="list">This is item four</div></li>
    <li><div id="list">This is item three</div></li>
    <li><div id="list">This is item two</div></li>
    <li><div id="list">This is item one</div></li>
</ol>
Mariusz Pawelski
  • 25,983
  • 11
  • 67
  • 80
pac
  • 164
  • 2
  • 2
  • 9
  • This is exactly what I meant by shoving extra spans (except you used divs). Also, tag ids are supposed to be unique. Thanks though. – DingoEatingFuzz Mar 24 '11 at 21:29