SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Paragraph/bullet point problems

    Hey Guys

    I'm in the process of designing a website using 'Build your website the right way'.

    What I wanted to do was list some bullet points, using <ul> and <li> etc. However when I did so I thought the bullet point paragraphs were too close together so added <p> to the <li>bullet points so that my paragraphed bullet points now read: <p><li>content</li></p>

    This achieved what I wanted it to, i.e. bullet point paragraphs that were better spaced down the page, but when I uploaded my page to the w3c validator it stated that <p> and <li> could not be used together:

    "The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed)."

    Is this right? If so, if I'm listing bullet points, but cannot paragraph them using <p> how can I achieve the same effect? (i.e. better spacing of them down the page?)

    Cheers guys.

    jamesg

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi james,

    There are a couple of simple options:

    1) increase the line height of the <li>s

    Code:
    li {line-height: 2em;}
    (really only useful if each bullet point is just one line tall, though).

    2) Add top and bottom margins to the <li>s

    Code:
    li {margin: 1.5em 0;}
    This is the best option to use. Adjust the margins to suit. You can use pixels, of course, but I prefer ems.

  3. #3
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,248
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    alternatively (instead of adjusting the spacing with css) you can go with your original idea but just code it properly

    instead of <p><li>content</li></p> which is invalid, use <li><p>content</p></li>

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  4. #4
    SitePoint Member
    Join Date
    May 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot guys for the quick responses. I'll try them out later in the week revalidate and come back to you.

    Just out of interest so I can hopefully avoid similar mistakes in the future, what is 'wrong' with putting <p><li>content</li></p> for validation purposes!?

    Is it just that <li> cannot be preceded by anything else?

    jamesg

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jamesg1234 View Post
    what is 'wrong' with putting <p><li>content</li></p> for validation purposes!?

    Is it just that <li> cannot be preceded by anything else?
    Well, yes, <li> can only be preceded by <ul>. Just how the rules were set. I don't really see the value of using a <p> inside an <li> to create space, as it still just comes down to a CSS issue of margin/padding on the <p> anyway, so why not just place the margin/padding on the <li>?

  6. #6
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,248
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ralph.m View Post
    ... as it still just comes down to a CSS issue of margin/padding on the <p> anyway, so why not just place the margin/padding on the <li>?
    likely because you don't actually have to declare any css values for the P to have decent spacing -- it's built into the browser defaults
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by r937 View Post
    likely because you don't actually have to declare any css values for the P to have decent spacing -- it's built into the browser defaults
    The chances of that being just the right spacing is a bit hit and miss, though, and not necessarily consistent cross-browser. And chances are that a reset or other author settings have already blown those defaults out of the water.

  8. #8
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,248
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The chances of that being just the right spacing is a bit hit and miss, though, and not necessarily consistent cross-browser. And chances are that a reset or other author settings have already blown those defaults out of the water.
    that's funny

    out-of-the-box P spacing has been "just right" -- without any css tweaking -- in all versions of html and all browsers that it has been my pleasure to work with since netscape 1 in 1995

    and author css resets are nowhere near as common as you think

    so there

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by r937 View Post
    out-of-the-box P spacing has been "just right" -- without any css tweaking -- in all versions of html and all browsers that it has been my pleasure to work with since netscape 1 in 1995
    You obviously don't have to bend to the will of graphic designers who insist on having everything their own way.

    Well, at least I can argue that, by adding in those <p>s, you are recommending the use of markup for presentational purposes. And despite how small an amount of extra markup that is, the CSS police are still gonna gitcha!

  10. #10
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,248
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    of course, we've had this discussion before (whether Ps are okay inside LIs)

    let's just say that if the list items are sentences—even one-word sentences—then semantically, the Ps are fine, and the css police can go cry in their milk

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by r937 View Post
    the css police can go cry in their milk
    Blast, wouldn't you know, I've run out! (No cereal in the morning. )


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •