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.
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.
@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
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
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.
body, ol { padding: 0; margin: 0; }
@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
You could also try using counter-increments, as I just mentioned in the other post.
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.