css and <ul> inside a <p> paragraph

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

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?


"http://www.w3.org/TR/html4/loose.dtd">

This is the title

this is the article text.

• list item 1.


• list item 2.


• etc.

another paragraph.

Re: css and <ul> inside a <p> paragraph

Joe Butler wrote:

> 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

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
'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 (

) cannot contain other block-level elements, such as
the

you mention. Starting a
closes the

.

> 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?
>
> > "http://www.w3.org/TR/html4/loose.dtd">

New documents should be Strict, not Transitional.

>

This is the title


This should probably be an

or maybe an

, if you already have an


on the page.

>


> this is the article text.

You forgot the closing

. However, most browsers will implicitly
close it for you.

>

<-- this is not within the above


>

• list item 1.

>
• list item 2.

>
• etc.

>


>
>


> another paragraph.

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

--
-bts
-Motorcycles defy gravity; cars just suck

Re: css and <ul> inside a <p> paragraph

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

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
tag is it seems cleaner in the overal code
structure -
i.e. not needing to repeat

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

Re: css and <ul> inside a <p> paragraph

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

> 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

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
tag is it seems cleaner in the overal code
> structure - i.e. not needing to repeat

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
's, some browsers collapse them to one.

..mycontent p { [styles] }

Re: css and <ul> inside a <p> paragraph

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)

Aims of Lambeth Family Link

Aims of Lambeth Family Link

Re: css and <ul> inside a <p> paragraph

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

Re: css and <ul> inside a <p> paragraph

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$10223@NAXS.COM...
> 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)

Aims of Lambeth Family Link

Aims of Lambeth Family Link

Re: css and <ul> inside a <p> paragraph

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.

Re: css and <ul> inside a <p> paragraph

Joe Butler wrote:
> http://www.hertfordshire-it-support.co.uk/test-lfl/
>
> The thing about the
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:

Re: css and <ul> inside a <p> paragraph

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

Re: css and <ul> inside a <p> paragraph

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

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

While the city slept, Joe Butler
(ffffh.no.spam@hotmail-spammers-paradise.com) 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. nigel@DOG.nigenet.org.uk | Take the DOG. out!
"Your mother ate my dog!", "Not all of him!"

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$892e7fe2@authen.yellow.readfreenews.ne t...
> While the city slept, Joe Butler
> (ffffh.no.spam@hotmail-spammers-paradise.com) 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. nigel@DOG.nigenet.org.uk | Take the DOG. out!
> "Your mother ate my dog!", "Not all of him!"
>
>

Re: css and <ul> inside a <p> paragraph

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.

Re: css and <ul> inside a <p> paragraph

On 23 Sep, 16:20, "Joe Butler" 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

inside a
, but not inside a

)
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

inside a

, so "

" will be parsed as "

p>

" rather than the "

" you might have expected.

* The correct use of
, as a purely inline element. It's for
putting linebreaks _inside_ a paragraph (typesetting poetry) not for
indicating the breaks _between_ paragraphs (the

does that itself).
As you can't "break something that's already broken", then "

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