css and <ul> inside a <p> paragraph

Joe Butler · Sep 23, 2007

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.

Beauregard T. Shagnasty · Sep 23, 2007

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

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; }

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 said:
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>

if you already have an said:
<p class="article">
this is the article text.

<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.

Joe Butler · Sep 23, 2007

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 · Sep 23, 2007

Joe said:
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. ( said:
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:

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

Jonathan N. Little · Sep 23, 2007

Joe said:
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>

Joe Butler · Sep 23, 2007

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 said:
Joe said:

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.

Click to expand...

You have HTML comment marks in your CSS file. ( said:

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.

Click to expand...

There are some CSS errors:

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

Click to expand...

..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.

Click to expand...

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.

Click to expand...

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

Joe Butler · Sep 23, 2007

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.

Neredbojias · Sep 23, 2007

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.

Bergamot · Sep 23, 2007

Joe said:
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

Beauregard T. Shagnasty · Sep 23, 2007

Joe said:
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>

Bergamot · Sep 23, 2007

Beauregard said:
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.

nice.guy.nige · Sep 24, 2007

While the city slept, Joe Butler
([email protected]) 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

Joe Butler · Sep 24, 2007

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.

Joe Butler · Sep 24, 2007

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.

Andy Dingley · Sep 24, 2007

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.

Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Align img inside nav tabs section	5	Dec 29, 2023
Dropdown menu in a fixed navbar	2	Apr 1, 2024
I need help fixing my website	2	Oct 15, 2023
Need help with code on website (noob)	2	Jul 18, 2022
Not sure why drop-down is not working.	2	Mar 24, 2024
Interfering CSS	1	Feb 9, 2024
Align separate li to right	2	Jun 19, 2024

css and <ul> inside a <p> paragraph

Joe Butler

Beauregard T. Shagnasty

Joe Butler

Beauregard T. Shagnasty

Jonathan N. Little

Joe Butler

Joe Butler

Neredbojias

Bergamot

Beauregard T. Shagnasty

Bergamot

nice.guy.nige

Joe Butler

Joe Butler

Andy Dingley

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads