Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Get rid of ol?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #41985
    wragen22
    Member

    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

    #121017
    Melindrea
    Participant

    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.

    #121019
    wolfcry911
    Participant

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

    #121046
    wragen22
    Member

    @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

    #120988
    Mottie
    Member

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

    #120930
    Melindrea
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.