css and <ul> inside a <p> paragraph

Discussion in 'HTML' started by Joe Butler, Sep 23, 2007.

  1. Joe Butler

    Joe Butler Guest

    I have a basic, Title, series of paragraphs, Title, Series of paragraphs,
    etc. etc. structure to a page.

    Title 1
    para stuff

    more para stuff

    Title 2
    para stuff

    list item 1 (want these to inheret the left margin, and probably other
    styles from the para)
    list item 2

    para stuff


    If the paragraphs belonging to a particular title are simply text, then I
    can break up the paragraphs with <br><br> to give me a blank line between
    the paragraphs. And, most importantly, if I change the style of the
    paragraph in the css file each paragraph on the screen takes on the correct
    visual appearance - e.g. the left margin moves all paragraphs over. Now, if
    I need to put a list between two of the paragrapsh, the list is not 'inside'
    the paragraph - I guess you could say it does not inherit the sytle of the
    paragraph that it is being displayed in. Then, when the list ends, I have
    to re-state that we are using the paragraph style, otherwise the following
    paragraphs don't have the correct style (mainly the margin indent).

    So, the question is, what is the correct way to deal with this so that I can
    say, here are a set of things that are all inside this paragraph style, and
    things like lists will add their own defined left margins to whatever the
    containing paragraph style is?


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    <p class="article-title">This is the title</p>
    <p class="article">
    this is the article text.

    <ul>
    <li>list item 1.</li>
    <li>list item 2.</li>
    <li>etc.</li>
    </ul>

    <p class="article">
    another paragraph.
    Joe Butler, Sep 23, 2007
    #1
    1. Advertising

  2. Joe Butler wrote:

    > I have a basic, Title, series of paragraphs, Title, Series of
    > paragraphs, etc. etc. structure to a page.

    <snip>
    > If the paragraphs belonging to a particular title are simply text,
    > then I can break up the paragraphs with <br><br> to give me a blank
    > line between the paragraphs.


    If you want a bottom margin after a paragraph, use CSS:
    p { margin-bottom: 2em; }
    instead of <br>'s, which *might* be used within a paragraph (rarely),
    but most commonly within a postal address block, for example.

    > Now, if I need to put a list between two of the paragrapsh, the list
    > is not 'inside' the paragraph - I guess you could say it does not
    > inherit the sytle of the paragraph that it is being displayed in.


    Paragraphs ( <p> ) cannot contain other block-level elements, such as
    the <ul> you mention. Starting a <ul> closes the <p>.

    > Then, when the list ends, I have to re-state that we are using the
    > paragraph style, otherwise the following paragraphs don't have the
    > correct style (mainly the margin indent).


    An URL to your page would help.

    > So, the question is, what is the correct way to deal with this so that I can
    > say, here are a set of things that are all inside this paragraph style, and
    > things like lists will add their own defined left margins to whatever the
    > containing paragraph style is?
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    > "http://www.w3.org/TR/html4/loose.dtd">


    New documents should be Strict, not Transitional.

    > <p class="article-title">This is the title</p>

    This should probably be an <h1> or maybe an <h2>, if you already have an
    <h1> on the page.

    > <p class="article">
    > this is the article text.


    You forgot the closing </p>. However, most browsers will implicitly
    close it for you.

    > <ul> <-- this is not within the above <p>
    > <li>list item 1.</li>
    > <li>list item 2.</li>
    > <li>etc.</li>
    > </ul>
    >
    > <p class="article">
    > another paragraph.


    Let's see the URL to a test case, instead of partial code fragments.

    --
    -bts
    -Motorcycles defy gravity; cars just suck
    Beauregard T. Shagnasty, Sep 23, 2007
    #2
    1. Advertising

  3. Joe Butler

    Joe Butler Guest

    OK, thanks for that.

    This is the testing area so far...
    http://www.hertfordshire-it-support.co.uk/test-lfl/

    Any comments welcome on what I've done so far. Note that the site is not
    finished in terms of the look or the colours and the banner image is taken
    from the original site. I, personlly, don't like it since it has the
    appearance of a yellowed 200 year old newspaper, but if the customer wants
    to use it, then the colours of the site will be modified to reflect the
    banner. I'm interested if people have coments about that - positive or
    negative.

    I always used to close off paragraphs, but noticed that the w3 validator is
    showing valid markup even when they are left open and then saw something
    that implied only xhtml required <p> to close, so I assumed it was ok. I'm
    doing these pages by hand, and closing off paras is just another detail that
    is nice not to deal with.

    I hadn't realised about the transitional/strict thing. I'll look into it.

    The thing about the <br> tag is it seems cleaner in the overal code
    structure -
    i.e. not needing to repeat <p class="mycontent"> at each visual para
    linebreak. But I guess, if that's the right way to do things, then I'll
    modify the html. Perhaps another way would be to contain the paragraphs and
    any lists inside a <div class="article-content"> with it's own defined
    paragraph left margin. The reason this is importantant is simply that if
    the article title style changes so that it is not contained in grey
    rectangle, then the left margin may disapear, so I would then want the
    entire article content to have no margin so that it lined up with the new
    article title style.


    "Beauregard T. Shagnasty" <> wrote in message
    news:I%vJi.588652$...
    > Joe Butler wrote:
    >
    >> I have a basic, Title, series of paragraphs, Title, Series of
    >> paragraphs, etc. etc. structure to a page.

    > <snip>
    >> If the paragraphs belonging to a particular title are simply text,
    >> then I can break up the paragraphs with <br><br> to give me a blank
    >> line between the paragraphs.

    >
    > If you want a bottom margin after a paragraph, use CSS:
    > p { margin-bottom: 2em; }
    > instead of <br>'s, which *might* be used within a paragraph (rarely),
    > but most commonly within a postal address block, for example.
    >
    >> Now, if I need to put a list between two of the paragrapsh, the list
    >> is not 'inside' the paragraph - I guess you could say it does not
    >> inherit the sytle of the paragraph that it is being displayed in.

    >
    > Paragraphs ( <p> ) cannot contain other block-level elements, such as
    > the <ul> you mention. Starting a <ul> closes the <p>.
    >
    >> Then, when the list ends, I have to re-state that we are using the
    >> paragraph style, otherwise the following paragraphs don't have the
    >> correct style (mainly the margin indent).

    >
    > An URL to your page would help.
    >
    >> So, the question is, what is the correct way to deal with this so that I
    >> can
    >> say, here are a set of things that are all inside this paragraph style,
    >> and
    >> things like lists will add their own defined left margins to whatever the
    >> containing paragraph style is?
    >>
    >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    >> "http://www.w3.org/TR/html4/loose.dtd">

    >
    > New documents should be Strict, not Transitional.
    >
    >> <p class="article-title">This is the title</p>

    > This should probably be an <h1> or maybe an <h2>, if you already have an
    > <h1> on the page.
    >
    >> <p class="article">
    >> this is the article text.

    >
    > You forgot the closing </p>. However, most browsers will implicitly
    > close it for you.
    >
    >> <ul> <-- this is not within the above <p>
    >> <li>list item 1.</li>
    >> <li>list item 2.</li>
    >> <li>etc.</li>
    >> </ul>
    >>
    >> <p class="article">
    >> another paragraph.

    >
    > Let's see the URL to a test case, instead of partial code fragments.
    >
    > --
    > -bts
    > -Motorcycles defy gravity; cars just suck
    Joe Butler, Sep 23, 2007
    #3
  4. Joe Butler wrote:

    > OK, thanks for that.
    >
    > This is the testing area so far...
    > http://www.hertfordshire-it-support.co.uk/test-lfl/
    >
    > Any comments welcome on what I've done so far.


    You have HTML comment marks in your CSS file. (<!-- and -->)

    > I always used to close off paragraphs, but noticed that the w3
    > validator is showing valid markup even when they are left open and
    > then saw something that implied only xhtml required <p> to close, so
    > I assumed it was ok.


    There are some CSS errors:
    <http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.hertfordshire-it-support.co.uk%2Ftest-lfl%2F>

    > I'm doing these pages by hand, and closing off paras is just another
    > detail that is nice not to deal with.


    ...or: using them indicates to the coder "this paragraph is over." Kind
    of like adding an "End Function" line in programming code.

    > I hadn't realised about the transitional/strict thing. I'll look into
    > it.


    Ok. Transitional is for 'transitioning' legacy pages.

    > The thing about the <br> tag is it seems cleaner in the overal code
    > structure - i.e. not needing to repeat <p class="mycontent"> at each
    > visual para linebreak. But I guess, if that's the right way to do
    > things, then I'll modify the html.


    If you were to use multiple <br>'s, some browsers collapse them to one.

    ..mycontent p { [styles] }

    <div class="mycontent">
    <p> ... </p>
    <p> ... </p>
    <p> ... </p>
    </div>

    Your test page doesn't fit in my browser window, and presents a
    horizontal scrollbar. That's annoying. <g>

    What is the reason for the tables? Google up: CSS 3 column template
    and this: http://allmyfaqs.net/faq.pl?AnySizeDesign

    --
    -bts
    -Motorcycles defy gravity; cars just suck
    Beauregard T. Shagnasty, Sep 23, 2007
    #4
  5. Joe Butler wrote:
    > OK, thanks for that.
    >
    > This is the testing area so far...
    > http://www.hertfordshire-it-support.co.uk/test-lfl/
    >


    Some questions:

    (1) What are these "Z" properties in your stylesheet? Zbackground-color:
    .... if you are temporarily disabling something then use comments characters

    /* disabled-property: value; */

    (2) clear: top?

    More like: none | left | right | both | inherit

    (3) <p class="article-title">Aims of Lambeth Family Link</p> ?

    "Aims of Lambeth Family Link" is not really a paragraph, wold not a
    secondary level heading be more appropriate?

    <h2>Aims of Lambeth Family Link</h2>



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Sep 23, 2007
    #5
  6. Joe Butler

    Joe Butler Guest

    I guess the html comments were left in the css file from when the styles
    were used inline and it was apparently a way of not breaking browsers that
    didn't understand css. I'll remove them if they are not correct. Just
    checked: the Firefox developer's toolbar thing shows a nice green tick for
    the CSS validation, but when you click the tick, the actual validation is
    showing the results you warned about. I presume this is some sort of bug in
    the toolbar.

    OK. The Z errors are just a quick way of commenting out a style. I didn't
    notice the errors when I validated. Not sure why. I'd use a dash or other
    symbol, but IE ignores the dash and uses the style. The clear:top is just
    cos I am an idiot.

    So, the </p> is more of a programmer thing. Find it easier to not use them
    as the paragraph end is implicit in the hand-coded html file. If it were a
    cms, then I would agree. Since xhtml requires them, I should get used to
    it, though.

    I've tested on IE6, IE7, FF1, FF2 (all Windows versions) and not noticed
    breaks collapsing, but point taken. Although, my feeling is that anyone
    using the least common browsers has to expect certain issues - it is a
    choice they have made and must accept that thing are not always going to
    work for them.

    The div thing you pointed out, is probably the cleaner way to do what I
    want. Encapsulate the paragraphs in a single div.

    mycontent p { [styles] }

    <div class="mycontent">
    <p> ... </p>
    <p> ... </p>
    <p> ... </p>
    </div>

    The page was 'designed' to accomodate the original wide banner graphic. It
    should fit in a maximised 1024 wide screen, but agreed, it's a problem for
    800 wide screens. I'll think about it, but am not sure at the moment how
    keen the customer is on keeping the site banner - it was mentioned in
    passing by them that they didn't want to lose it.

    The tables is 'transitional'. I've been removing them and replacing with
    divs. Although, the all-encompasing wrapping table was to stop the
    right-hand column from repositioning underneath the left and middle columns
    when the viewport was narrow. It was a quick fix. I'm sure I can achieve
    the same with divs, but wanted to get the site live as soon as possible for
    them.


    "Beauregard T. Shagnasty" <> wrote in message
    news:9gxJi.588916$...
    > Joe Butler wrote:
    >
    >> OK, thanks for that.
    >>
    >> This is the testing area so far...
    >> http://www.hertfordshire-it-support.co.uk/test-lfl/
    >>
    >> Any comments welcome on what I've done so far.

    >
    > You have HTML comment marks in your CSS file. (<!-- and -->)
    >
    >> I always used to close off paragraphs, but noticed that the w3
    >> validator is showing valid markup even when they are left open and
    >> then saw something that implied only xhtml required <p> to close, so
    >> I assumed it was ok.

    >
    > There are some CSS errors:
    > <http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.hertfordshire-it-support.co.uk%2Ftest-lfl%2F>
    >
    >> I'm doing these pages by hand, and closing off paras is just another
    >> detail that is nice not to deal with.

    >
    > ..or: using them indicates to the coder "this paragraph is over." Kind
    > of like adding an "End Function" line in programming code.
    >
    >> I hadn't realised about the transitional/strict thing. I'll look into
    >> it.

    >
    > Ok. Transitional is for 'transitioning' legacy pages.
    >
    >> The thing about the <br> tag is it seems cleaner in the overal code
    >> structure - i.e. not needing to repeat <p class="mycontent"> at each
    >> visual para linebreak. But I guess, if that's the right way to do
    >> things, then I'll modify the html.

    >
    > If you were to use multiple <br>'s, some browsers collapse them to one.
    >
    > .mycontent p { [styles] }
    >
    > <div class="mycontent">
    > <p> ... </p>
    > <p> ... </p>
    > <p> ... </p>
    > </div>
    >
    > Your test page doesn't fit in my browser window, and presents a
    > horizontal scrollbar. That's annoying. <g>
    >
    > What is the reason for the tables? Google up: CSS 3 column template
    > and this: http://allmyfaqs.net/faq.pl?AnySizeDesign
    >
    > --
    > -bts
    > -Motorcycles defy gravity; cars just suck
    Joe Butler, Sep 23, 2007
    #6
  7. Joe Butler

    Joe Butler Guest

    Yes, the Z was a cheap way of commenting out temporarily. Oh, god, I hate
    the c-style comments. Why could we not have the single-line c++ comment //.

    Another peeve of mine is why we can't have pc (for percent, as well as the %
    style) - so much easier to type in.

    Anyway, you are right: clear:top - just bruteforcing to make somethign work
    that didn't quite do what I wanted, so was experimenting without
    checking....

    I'll look at the h tags. You are probably right.

    thanks.

    "Jonathan N. Little" <> wrote in message
    news:95fb4$46f6a406$40cba7c6$...
    > Joe Butler wrote:
    >> OK, thanks for that.
    >>
    >> This is the testing area so far...
    >> http://www.hertfordshire-it-support.co.uk/test-lfl/
    >>

    >
    > Some questions:
    >
    > (1) What are these "Z" properties in your stylesheet? Zbackground-color:
    > ... if you are temporarily disabling something then use comments
    > characters
    >
    > /* disabled-property: value; */
    >
    > (2) clear: top?
    >
    > More like: none | left | right | both | inherit
    >
    > (3) <p class="article-title">Aims of Lambeth Family Link</p> ?
    >
    > "Aims of Lambeth Family Link" is not really a paragraph, wold not a
    > secondary level heading be more appropriate?
    >
    > <h2>Aims of Lambeth Family Link</h2>
    >
    >
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIO
    > http://www.LittleWorksStudio.com
    Joe Butler, Sep 23, 2007
    #7
  8. Joe Butler

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Sun, 23 Sep 2007 18:11:24
    GMT Joe Butler scribed:

    > Yes, the Z was a cheap way of commenting out temporarily. Oh, god, I
    > hate the c-style comments. Why could we not have the single-line c++
    > comment //.


    Hehe, yeah, I do the same thing. -And agree with the // issue.

    Your page banner is just too long for reasonable use. It could, however,
    be cropped at the left.

    Didn't check your css, but the page doesn't look too fluid. If you want to
    sacrifice fluidity, it should fit _easily_ into an 800px browser window.
    Having a horz scrollbar appear in 1024px-wide windows is just going to make
    people think it's an amateur effort and an amateur operation, and few will
    stick around for longer than it takes to hit the back button.

    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
    Neredbojias, Sep 23, 2007
    #8
  9. Joe Butler

    Bergamot Guest

    Joe Butler wrote:
    > http://www.hertfordshire-it-support.co.uk/test-lfl/
    >
    > The thing about the <br> tag is it seems cleaner in the overal code
    > structure


    It would be even cleaner if you used correct markup for the different
    page elements. Take the Activities page, for example. It's coded:

    <div class="site-container">
    <p class="article-title">Saturday Club</p>
    <p class="article">
    The Club runs for three hours on the second Saturday of each month...

    That article-title class should be marked up as a heading, not a
    paragraph. Use the right mark up for the context, and you can get rid of
    a lot of superfluous class selectors. That 2nd <p> shouldn't need a
    class selector at all.

    <div class="site-container">
    <h2>Saturday Club</h2>
    <p>
    The Club runs for three hours on the second Saturday of each month...

    And in your stylesheet:
    h2 { same rules currently assigned to .article-title }
    ..site-container p { same rules currently assigned to .article }

    Of course, h2 assumes you have an h1 preceding it somewhere. I suggest
    the banner graphic for lack of something better. You might expand on
    that alt text while you're at it.

    Those lists in the right column of that page should also be multi-level
    lists. You can style the nested list so the margins are where you have
    them now (margin-left:0;padding-left:0), and the bullet marker doesn't
    show (list-style:none). That would be more semantically correct and
    degrade better in virtually every browsing situation. Likewise, the
    navigation should also be list mark up, which you can style however you
    like. See
    http://css.maxdesign.com.au/listamatic/

    BTW, please don't top post.
    http://web.presby.edu/~nnqadmin/nnq/nquote.html

    --
    Berg
    Bergamot, Sep 23, 2007
    #9
  10. Joe Butler wrote:

    > I guess the html comments were left in the css file from when the
    > styles were used inline and it was apparently a way of not breaking
    > browsers that didn't understand css. I'll remove them if they are
    > not correct.


    They haven't been needed since .. what? .. after version 3 of
    IE/Netscape?

    > OK. The Z errors are just a quick way of commenting out a style.


    /* This is a CSS comment */

    > So, the </p> is more of a programmer thing. Find it easier to not use
    > them as the paragraph end is implicit in the hand-coded html file.
    > If it were a cms, then I would agree. Since xhtml requires them, I
    > should get used to it, though.


    Attaboy!

    > I've tested on IE6, IE7, FF1, FF2 (all Windows versions) and not
    > noticed breaks collapsing, but point taken. Although, my feeling is
    > that anyone using the least common browsers has to expect certain
    > issues - it is a choice they have made and must accept that thing are
    > not always going to work for them.


    Don't forget 'least common browsers' may include PDAs, mobile phones,
    and all sorts of new devices coming down the pike.

    You may get a reasonable approximation by using Opera and pressing
    Shift-F11.

    <snip rest>

    --
    -bts
    -Motorcycles defy gravity; cars just suck
    Beauregard T. Shagnasty, Sep 23, 2007
    #10
  11. Joe Butler

    Bergamot Guest

    Beauregard T. Shagnasty wrote:
    > Joe Butler wrote:
    >
    >> I guess the html comments were left in the css

    >
    > They haven't been needed since .. what? .. after version 3 of
    > IE/Netscape?


    Wasn't it Netscape 2.something that needed them, and they fixed the
    problem soon after it was discovered?

    Cargo cult at its finest. :)

    --
    Berg
    Bergamot, Sep 23, 2007
    #11
  12. OT (was css and <ul> inside a <p> paragraph)

    While the city slept, Joe Butler
    () feverishly typed...

    [...]

    As a complete aside... looking at the banner on your site, who is the guy
    with the pony tail and the sideburns?? I have a feeling he may be my
    long-lost brother! ;-)

    Cheers,
    Nige

    --
    Nigel Moss http://www.nigenet.org.uk
    Mail address will bounce. | Take the DOG. out!
    "Your mother ate my dog!", "Not all of him!"
    nice.guy.nige, Sep 24, 2007
    #12
  13. Joe Butler

    Joe Butler Guest

    Re: OT (was css and <ul> inside a <p> paragraph)

    I have no idea. Try emailing the address on the front page. And as a
    complete aside, it's not me, either, to anyone that knows me.


    "nice.guy.nige" <> wrote in message
    news:46f6f82e$0$47137$...
    > While the city slept, Joe Butler
    > () feverishly typed...
    >
    > [...]
    >
    > As a complete aside... looking at the banner on your site, who is the guy
    > with the pony tail and the sideburns?? I have a feeling he may be my
    > long-lost brother! ;-)
    >
    > Cheers,
    > Nige
    >
    > --
    > Nigel Moss http://www.nigenet.org.uk
    > Mail address will bounce. | Take the DOG. out!
    > "Your mother ate my dog!", "Not all of him!"
    >
    >
    Joe Butler, Sep 24, 2007
    #13
  14. Joe Butler

    Joe Butler Guest

    Thanks for all the comments so far.

    I've implemented almost everything mentioned so far. Things not
    implemented, simply due to needing to get something out, rather than being
    perfect first time.

    There are also some newsletter pages that will probably be incorporated into
    the main style of the site rather than left as they are. Just waiting for
    customer comments.

    Also, modified the banner on the home page. I think it's better in some
    respects - a bit brighter, but maybe a bit naff with the starburst....

    BTW, not tested in IE7 or FF2 yet.
    Joe Butler, Sep 24, 2007
    #14
  15. Joe Butler

    Andy Dingley Guest

    On 23 Sep, 16:20, "Joe Butler" <ffffh.no.s...@hotmail-spammers-
    paradise.com> wrote:
    > I have a basic, Title, series of paragraphs, Title, Series of paragraphs,
    > etc. etc. structure to a page.


    Find some _good_ tutorials and study the following topics:

    * HTML nesting rules for "block" and "inline" elements (you can put a
    <ul> inside a <div>, but not inside a <p>)
    This is all specified by the HTML specs and DTD, but the W3C original
    documents aren't an approachable read for starters.

    * HTML parser error recovery behaviour if you break these rules. You
    can't put a <ul> inside a <p>, so "<p><ul>" will be parsed as "<p></
    p><ul>" rather than the "<p><ul></p>" you might have expected.

    * The correct use of <br>, as a purely inline element. It's for
    putting linebreaks _inside_ a paragraph (typesetting poetry) not for
    indicating the breaks _between_ paragraphs (the <p> does that itself).
    As you can't "break something that's already broken", then "<br><br>"
    is nonsensical and shouldn't be used. Although it probably does have
    an effect you like (once, on one browser) it's not predictable as to
    how other browsers might correctly render it. It's quite rare to need
    to use <br> at all (correctly!).

    * The use of CSS margins, and the "collapsing" behaviour of vertical
    margins. If you want to control the spacing between paragraphs, then
    use simple HTML markup for one paragraph, then use CSS to adapt the
    rendering as needed. http://brainjar.com/css/positioning/ is a good
    read.
    Andy Dingley, Sep 24, 2007
    #15
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Anno Siegel

    Re: read a paragraph via scrit?

    Anno Siegel, Apr 1, 2004, in forum: Perl
    Replies:
    0
    Views:
    449
    Anno Siegel
    Apr 1, 2004
  2. Jim Heavey

    Paragraph Name

    Jim Heavey, Dec 3, 2003, in forum: ASP .Net
    Replies:
    2
    Views:
    458
    Jim Heavey
    Dec 4, 2003
  3. Replies:
    18
    Views:
    600
    Michael Winter
    Oct 27, 2006
  4. dorayme
    Replies:
    112
    Views:
    2,716
    dorayme
    Mar 30, 2009
  5. Dave
    Replies:
    2
    Views:
    127
Loading...

Share This Page