lists where there are paragraphs under each list item

[brynn]

Hi Friends,

I've been trying to make a list where each list item has a few paragraphs. If I make the code like this:

<ol><li>first item -- and there's some other info here</li><p>first paragraph first item</p><p>second paragraph first item</p><li>second item</li><p>first paragraph second item</p><p>second paragraph second item</p></ol>

When I save that to my page, with the rest of the code, the paragraphs get moved out of the list and are placed either above or below the list. And sometimes, quite far away from it.

 

I've been using the HTML Tutorial for help, but I haven't been able to find an example of this kind of situation, where I need a few paragraphs indented with each list item.

 

I tried moving the closing list tag to the end of the last paragraph, but that didn't work either.

 

Is there any way to do that, so the paragraphs stay with the list item?

 

Thanks for your help

 

Edit

Also note that there are a lot of nested lists, where each list item also has a list. So I could have something mixed up there. But if I know how to do this where the paragraph stays with the list item, I think it should work. If not, maybe I'll have to post more of the code. TA

Edited December 31, 2014 by brynn

[Ingolme]

Nothing can be inside an <ol> element except a <li> element. It's invalid to put <p> elements there.

 

Put them inside the <li> elements instead. Here's a valid structure:

<ol>    <li>        <h3>first item <span> -- and there's some other info here</span></h3>        <p>first paragraph first item</p>        <p>second paragraph first item</p>    </li>    <li>        <h3>second item</h3>        <p>first paragraph second item</p>        <p>second paragraph second item</p>    </li></ol>

[brynn]

Oh, thank you so much!

 

I'll give that a try.

[brynn]

Hhmm...ok, I can't do it exactly like that. Here's an example of what I have:

<ol>    <li>        <span id="Help Members"><strong>Help Members</strong></span> -- and there's some other info here        <p>first paragraph first item</p>        <p>second paragraph first item</p>    </li>    <li>        <span id="Write Tutorials"><strong>Write Tutorials</strong></span> -- and there's some other info here        <p>first paragraph second item</p>        <p>second paragraph second item</p>    </li></ol>

A span id has to go around the title part of the list item, because it allows necessary links to that place on that page. Would that work? It seems to work on my page. But if it could cause other problems, I probably should write it more properly.

 

Thanks again

[Ingolme]

It works, but it's not the best HTML, and the IDs are invalid.

You can put IDs on headings or any other element, it doesn't have to be a span. You probably don't need a strong tag there, if you want bold text then use CSS.

 

IDs cannot have spaces, so change it for underscores, hyphens or dots.

Check your code in the HTML validator.

 

Here's a little better:

<ol>    <li>        <h3 id="Help-Members">Help Members</h3> -- and there's some other info here        <p>first paragraph first item</p>        <p>second paragraph first item</p>    </li>    <li>        <h3 id="Write-Tutorials">Write Tutorials</h3> -- and there's some other info here        <p>first paragraph second item</p>        <p>second paragraph second item</p>    </li></ol>

Remember you can change anything and everything about the appearance using just CSS.

[brynn]

Ok, thank you very much!

 

I understand, but wanted to ask one clarification. When you say the id is invalid, what does that mean? It can be invalid, but the code still works to deliver the page? Maybe I need to learn more about validity?

Edited January 1, 2015 by brynn

[dsonesuk]

Its invalid when you want to apply style or reference it using JavaScript/jquery.Note: even though you can use use dot and colon in id reference DONT, I REALLY MEAN DONT! dot especially will cause confusion in javascript/jquery between dot notation or class selector if used.

[brynn]

Ok, thanks dsonesuk :-)

 

We can call this solved (although doesn't look like you all have any kind of solved flag or mark).

 

Happy New Year 2015!!

[dsonesuk]

Some peeples place [sOLVED] at end of topic title