Help with lists

I left the example markup pretty much as you had it. That's why I said this:

The {overflow: hidden | auto | scroll} causes a new block formatting context, which will enclose its float children. Other properties that trigger a new block formatting context are {display: table | inline-table | table-cell | inline-block} and {float: right | left}.

Look again at my example for the second page you posted. See also Enclosing float elements.

cheers,

gary

 

I've tried reading that article before but for some reason I have trouble wrapping my brain around it.

Guess I'll just read til the light goes on.

 

ok gary i have another question you might know the answer to. i want to make the title to each item of the list an h1 or give it a div style and have the rest of the text be normal size, but when i do that, it throws it to underneath the image again.

 

Again, look at the first code I gave you. In that example, I used a heading and a paragraph with each image. The wrapper was a list item. If you don't want to, or can't use the list structure, lose the ol, and replace the li with a div.

You absolutely should not use the h1*. Use an appropriate heading level, i.e. one below that section's heading level. In my example, the top image/heading was an h1 and each item below was h2.

gary

* The specs don't prevent a misuse of headings, but there should be one, and only one, top level heading on each page. That H1 may have any number of H2s, and only H2s, immediately subordinate to it. For each H2, there may be any number of H3s, and only H3s, in the level below it, and so on.

 

yea, the problem is that wordpress decides i want to end the paragraph with the picture when i try to add an h2 inside, so it ends up after the picture and throws off my layout again. i tried a plugin that would disable wordpress's autoformatting, but it didnt seem to work.

 

What happens if you write it as a list?

 

more of the same thing. basically every time i try to nest something inside whatever div, p, li, etc im using, something decides that i want it to end up underneath the picture.

 

OK, then. You're forced to get ugly. Make the numeral and fighter's name bold and larger. Stay with text, without a heading tag or another p tag. Use a br, if needed.

Were it me, I'd drop that ranking list into a copy template (to allow for comments, etc.) and treat the entry as a static page.

cheers,

gary

 

So I found a way to make it all work. I bolded the list items and then used css to make bolded paragraph text bigger. Thanks for all your assistance.