1

I have an ordered list that I am trying to mark up the HTML can be seen below:

<ol class="main tags">
    <li class="main">Gump...</li>
    <li>We ar...</li>
    <li>We a...</li>
</ol>

The CSS looks like this:

ol.tags {
    list-style: decimal  none outside;    
}

ol.tags li {
    background: transparent url(../images/tag.jpg) no-repeat;
    height: 80px;
    margin: 0px 0px 0px 0px;
    padding: 16px 0px 0px 60px;
}

And the result looks like this:

http://gumpshen.com/images/temp/Gumpshen_OL.png

I want to have the numbers appear cenetered inside the white "tabs", can anyone help please?

1
  • I'm assuming "tag.jpg" is your white square box?
    – livingtech
    Aug 30, 2010 at 15:56

4 Answers 4

2

Hey Burt, what Sortiris is pointing out is where your order list has a kind of running repeating background see an good explanation here : http://codeasily.com/css/style-ordered-list

I have tried to do what you are talking about but I fear it may not be possible, without custom numbers or markers.

You are on the right track however but I would make the ol list style inside, then you still have to figure out a way to push the order list number away from the list content.

It looks like you will want to add your own counter to your list.

1
  • I didn't really get that from his post but thanks for clearing it up. Check out how I solved it below, not fussed on extra markup but didn't know any other way of doing this.
    – Burt
    Aug 30, 2010 at 21:20
1

you can use the

background: transparent url(../images/tag.jpg) no-repeat; for ol.tags, not for ol.tags li

1
  • 1
    it would help if you give us a live example on jsbin.com
    – Sotiris
    Aug 30, 2010 at 16:29
1

One option might be to make your white square image larger, so it's as tall as the height you want your li's to be. Then make it the background of the ol instead of the li, and make it repeat in the y-direction.

Another option would be to switch the ol to have a style of inside as mentioned before, and then stick a span inside your li with some padding-left to position it where you want.

Edit: by making the white square image larger, I mean adding transparent "padding", or something that matches the background of the page. So the image has larger dimensions, but the white area remains the same.

0

Sorted it here is what I done:

First I added a span tag around the content:

<ol class="main tags">
    <li class="main"><span>Gumpshen was founded by Brendan Rice who has over 10 years experience in web development.</span></li>
    <li><span>We are web design & development studio who are passionate about what we do.</span></li>
    <li><span>We are based in Belfast, Northern Ireland and but don't let that put you off if you are not from Northern Ireland we would still love to help.</span></li>
</ol>

The I was moved the decimals to inside as suggested by joelt (thanks Joe) and was finally able to shift stuff around using minus margins on the span tags:

ol.tags {
    list-style: decimal  none inside;

}

ol.tags li {
    background: transparent url(../images/tag.jpg) no-repeat;    
    height: 80px;
    margin: 0px 0px 0px 0px;
    padding: 26px 0px 0px 20px;
}

ol.tags li span {    
    margin: -24px 0px 0px 50px;
    display: block;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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