Grow your CSS skills. Land your dream job.

Get rid of ol?

  • # January 13, 2013 at 11:43 pm

    Hi everybody. I’ve been struggling with this for a while now as I’m new and learning. I have a problem in which I am trying to make the background of an item change to the color red and extend the whole width of the page 100%. So far I have been unable to do this with the ordered list for the numbers because of the grid structure I have in place. I have pretty much come to the conclusion I should ditch the ol and just create a hard coded numbered list for each item so the color can extend the whole width.

    Am I missing something here?

    http://codepen.io/wragen22/pen/Fjesr

    # January 14, 2013 at 5:37 am

    What is it you’re trying to accomplish with using an ordered list?

    What I can see directly is that you’ve mixed up a few tags (the end tag of the spans always needs to come before the end of the paragraph), and that you’ve also mixed up the elements a fair bit. If you’re using a list, it cannot contain other elements as direct children than li-elements. However, a li-element can contain others such as paragraphs, divs and headers.

    # January 14, 2013 at 6:54 am

    body, ol {
    padding: 0;
    margin: 0;
    }

    # January 14, 2013 at 12:23 pm

    @wofcry911 … of course it’s as simple as that. :-/ @Melindrea Yes…agreed it’s very messy. Mainly for the purpose of trying to get the ol to work across muliple divs… but also because, well I’m new at this. haha

    # January 14, 2013 at 4:12 pm

    You could also try using [counter-increments](http://css-tricks.com/almanac/properties/c/counter-increment/), as I just mentioned in the [other post](http://css-tricks.com/forums/discussion/comment/88516/#Comment_88516).

    # January 15, 2013 at 4:56 am

    If you want it to be an ordered list of grids, wrap the divs with <li>.

    Basically something along these lines:
    <ol>
    <li>(bunch of divs/etc, one full block)</li>
    <li>(the second block)</li>
    </ol>

    Mottie’s point about counter-increments is also quite good, if that is all you want out of it being an ordered list.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".