brynn Posted December 31, 2014 Share Posted December 31, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted December 31, 2014 Share Posted December 31, 2014 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> Link to comment Share on other sites More sharing options...
brynn Posted January 1, 2015 Author Share Posted January 1, 2015 Oh, thank you so much! I'll give that a try. Link to comment Share on other sites More sharing options...
brynn Posted January 1, 2015 Author Share Posted January 1, 2015 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 Link to comment Share on other sites More sharing options...
Ingolme Posted January 1, 2015 Share Posted January 1, 2015 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. Link to comment Share on other sites More sharing options...
brynn Posted January 1, 2015 Author Share Posted January 1, 2015 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted January 1, 2015 Share Posted January 1, 2015 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. Link to comment Share on other sites More sharing options...
brynn Posted January 1, 2015 Author Share Posted January 1, 2015 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!! Link to comment Share on other sites More sharing options...
dsonesuk Posted January 1, 2015 Share Posted January 1, 2015 Some peeples place [sOLVED] at end of topic title Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now