Beginner questions regarding CSS

[jcsnippets.atspace.com]

Hi everybody,

A few days ago I decided to get my site validated, so I have begun to clean
up the first page to get an impression of what I should and should not do.

To be able to get the site validated, I have to get rid of a lot of old
style layout (tables, etcetera...), but I'd very much like to keep the
original look and feel of the site.

I have literally spent the entire evening working on the title and menu part
of the site - I'm a software developer, not a designer, and my knowledge of
css is increasing, yet very limited at the moment.

So here I am with a few questions: the original site can be seen in the link
below, the new version can be found here:
http://jcsnippets.atspace.com/strictindex.html
and a link to the stylesheet can be found here:
http://jcsnippets.atspace.com/css/strictstyle.css

First of all, I'd like to center the subtitle vertically - even spacing
below and above. The only way I found to accomplish this, is adding p or br
tags above and below, but I really don't think that is an option.

Second, I'd like to spread out the menu over the entire width of the page -
again, I have no idea how to accomplish this.

Every little hint that can push me towards a clean result is welcome!

Thanks in advance,

JayCee
--
http://jcsnippets.atspace.com/
a collection of source code, tips and tricks

[Stan Brown]

Mon, 06 Mar 2006 22:31:50 GMT from jcsnippets.atspace.com
<ad***@jcsnippets.atspace.com>:

First of all, I'd like to center the subtitle vertically - even spacing
below and above. The only way I found to accomplish this, is adding p or br
tags above and below, but I really don't think that is an option.

Style it with padding-top and padding-bottom.

I'm a little concerned about things I see in your source like <p />.
I'm no XHTML expert, but I hope someone who is will comment.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

[Stan McCann]

Stan Brown <th************@fastmail.fm> wrote in
news:MP************************@news.individual.ne t:

Mon, 06 Mar 2006 22:31:50 GMT from jcsnippets.atspace.com
<ad***@jcsnippets.atspace.com>:

First of all, I'd like to center the subtitle vertically - even
spacing below and above. The only way I found to accomplish this,

Style it with padding-top and padding-bottom.

I'm a little concerned about things I see in your source like <p />.
I'm no XHTML expert, but I hope someone who is will comment.

I'm no expert but do know enough that what you show there is definitely
not correct. In HTML, <p> may or may not be closed by </p>, the end
tag being optional. I suspect due to not having to have a closing tag,
someone new to learning XHTML could assume <p> is an empty element and
try to use the closing / as you've shown and is correct for closing an
empty element such as <br />. In XHTML, only <p>text.</p> would be
correct for a paragraph.

--
Stan McCann, "Uncle Pirate" http://stanmccann.us/
Webmaster, NMSU at Alamogordo http://alamo.nmsu.edu/
Now blocking Google Grouper posts and replies.
http://blinkynet.net/comp/uip5.html

[google]

Hello,

First of all, I'd like to center the subtitle vertically - even spacing
below and above. The only way I found to accomplish this, is adding p or br
tags above and below, but I really don't think that is an option.
These styles should help:

padding-top:10px;
pading-bottom:10px;
margin-top:10px;
margin-bottom:10px;
valign:top;

Second, I'd like to spread out the menu over the entire width of the page -
again, I have no idea how to accomplish this.

width:100%;

Let me know if that helps.

Chris S.

Free Web Design Tools
http://www.impliedbydesign.com/free-...e-scripts.html

[jcsnippets.atspace.com]

<go****@impliedbydesign.com> wrote in message
news:11**********************@v46g2000cwv.googlegr oups.com...

Hello,

First of all, I'd like to center the subtitle vertically - even spacing
below and above. The only way I found to accomplish this, is adding p or br tags above and below, but I really don't think that is an option.

These styles should help:

padding-top:10px;
pading-bottom:10px;
margin-top:10px;
margin-bottom:10px;
valign:top;

All I achieve by adding these is resizing the top div - which is not what I
want. Even if I get the text to move down, it looks like it's half inside
the div, half outside.

I'd like to get the big title in the upper half, and the second text
centered vertically in what's left.

Second, I'd like to spread out the menu over the entire width of the page - again, I have no idea how to accomplish this.

width:100%;

Let me know if that helps.

Alas, width: 100% seems to move the text a bit to the right, but it's not
spreading over the entire width.

Best regards,

JayCee
--
http://jcsnippets.atspace.com/
a collection of source code, tips and tricks

[jcsnippets.atspace.com]

"Stan McCann" <[e-mail]> wrote in message
news:Xn************************@216.234.192.142...

Stan Brown <th************@fastmail.fm> wrote in
news:MP************************@news.individual.ne t:

Mon, 06 Mar 2006 22:31:50 GMT from jcsnippets.atspace.com
<ad***@jcsnippets.atspace.com>:

First of all, I'd like to center the subtitle vertically - even
spacing below and above. The only way I found to accomplish this,

Style it with padding-top and padding-bottom.

I'm a little concerned about things I see in your source like <p />.
I'm no XHTML expert, but I hope someone who is will comment.

I'm no expert but do know enough that what you show there is definitely
not correct. In HTML, <p> may or may not be closed by </p>, the end
tag being optional. I suspect due to not having to have a closing tag,
someone new to learning XHTML could assume <p> is an empty element and
try to use the closing / as you've shown and is correct for closing an
empty element such as <br />. In XHTML, only <p>text.</p> would be
correct for a paragraph.

The <p /> validates as HTML 4.01 strict, but the <hr /> was indeed an error.

Validation already pointed this one out, but thanks anyway!

JayCee
--
http://jcsnippets.atspace.com/
a collection of source code, tips and tricks

[Gérard Talbot]

go****@impliedbydesign.com wrote :

Hello,

[snipped]
These styles should help:

padding-top:10px;
pading-bottom:10px;
margin-top:10px;
margin-bottom:10px;
valign:top;

I assume you meant vertical-align: top and not valign. In any case, you
should not be using 5 css declaration to position the element. There is
such a thing as over-declaring, over-defining and over-constraining when
using CSS.

Gérard
--
remove blah to email me

[Mark Parnell]

Deciding to do something for the good of humanity,
"jcsnippets.atspace.com" <ad***@jcsnippets.atspace.com> declared in
comp.infosystems.www.authoring.stylesheets:

The <p /> validates as HTML 4.01 strict,

It may be valid, but it's still not correct. It actually means the same
as <p></p>> though no major browser will treat it that way.

Anyway an empty paragraph simply doesn't make sense unless you're just
using it for spacing, which you shouldn't be as that's what CSS is for.

--
Mark Parnell

Now implementing http://blinkynet.net/comp/uip5.html

[jcsnippets.atspace.com]

"Mark Parnell" <we*******@clarkecomputers.com.au> wrote in message
news:5f**************@markparnell.com.au...

Deciding to do something for the good of humanity,
"jcsnippets.atspace.com" <ad***@jcsnippets.atspace.com> declared in
comp.infosystems.www.authoring.stylesheets:

The <p /> validates as HTML 4.01 strict,
It may be valid, but it's still not correct. It actually means the same
as <p></p>> though no major browser will treat it that way.

Ok, now I'm totally confused - everyone I spoke to since I started my
website gave me the advice to validate the site. I'm not argueing that it is
correct, but why would this be allowed if it is not correct? I find that
strange (on the part of the validator) to say the least!

Anyway, the situation will resolve itself (read on please).
Anyway an empty paragraph simply doesn't make sense unless you're just
using it for spacing, which you shouldn't be as that's what CSS is for.

Agreed - which was part two of my original question. I'd like to get rid of
these empty paragraphs and put it all in CSS.

Thanks for your help,

JayCee
--
http://jcsnippets.atspace.com/
a collection of source code, tips and tricks

[Mark Parnell]

Deciding to do something for the good of humanity,
"jcsnippets.atspace.com" <ad***@jcsnippets.atspace.com> declared in
comp.infosystems.www.authoring.stylesheets:

Ok, now I'm totally confused - everyone I spoke to since I started my
website gave me the advice to validate the site.
That advice wasn't necessarily bad, but you need to understand what
validation actually is and does before it becomes truly useful.
I'm not argueing that it is
correct, but why would this be allowed if it is not correct?
It is technically *valid* - it conforms to the DTD - but it still isn't
correct. There is a difference.
I find that
strange (on the part of the validator) to say the least!

http://www.cs.tut.fi/~jkorpela/html/validation.html

--
Mark Parnell

Now implementing http://blinkynet.net/comp/uip5.html

[Beauregard T. Shagnasty]

jcsnippets.atspace.com wrote:

"Mark Parnell" <we*******@clarkecomputers.com.au> wrote

Anyway an empty paragraph simply doesn't make sense unless you're
just using it for spacing, which you shouldn't be as that's what CSS
is for.

Agreed - which was part two of my original question. I'd like to get
rid of these empty paragraphs and put it all in CSS.

Drop the empty paragraph and put a margin-bottom of some small amount of
em, on the preceding element.

..makespace { margin-bottom: 1.5em; }

<h2 class="makespace">A heading goes here.</h2>
<div>whatever else follows that you want a bit lower...</div>

--
-bts
-Warning: I brake for lawn deer

[Stan Brown]

Tue, 07 Mar 2006 22:47:49 GMT from jcsnippets.atspace.com
<ad***@jcsnippets.atspace.com>:

Ok, now I'm totally confused - everyone I spoke to since I started my
website gave me the advice to validate the site. I'm not argueing that it is
correct, but why would this be allowed if it is not correct? I find that
strange (on the part of the validator) to say the least!

What they're telling you is that it's syntactically valid, so it has
a meaning, but the meaning is not what you think (and not what you
want).

If you want vertical space, you should use CSS to put a bottom-margin
on the preceding block element or a top-margin on the following one.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

[Stephen Poley]

On Tue, 07 Mar 2006 22:47:49 GMT, "jcsnippets.atspace.com"
<ad***@jcsnippets.atspace.com> wrote:

"Mark Parnell" <we*******@clarkecomputers.com.au> wrote in message
news:5f**************@markparnell.com.au...

Deciding to do something for the good of humanity,
"jcsnippets.atspace.com" <ad***@jcsnippets.atspace.com> declared in
comp.infosystems.www.authoring.stylesheets:

> The <p /> validates as HTML 4.01 strict,

It may be valid, but it's still not correct. It actually means the same
as <p></p>> though no major browser will treat it that way.

Ok, now I'm totally confused - everyone I spoke to since I started my
website gave me the advice to validate the site. I'm not argueing that it is
correct, but why would this be allowed if it is not correct? I find that
strange (on the part of the validator) to say the least!

As that's the very first question that these groups helped me with, many
years ago, maybe I should make an effort.

HTML is officially an implementation of SGML, and the validators
validate according to the SGML rules. The slash is in this case an SGML
shorthand terminating the element, and the '>' is treated as a piece of
textual content.

However the first browsers did not properly implement SGML, so no-one
was able to use this shorthand, and no mainstream browsers (AFAIK) ended
up implementing it. And so very few web authors are aware of it.

Validation is like a spelling-checker: a valuable process (especially
when working in a somewhat unfamiliar language) which will catch a lot
of errors. But if you mistype 'form' instead of 'from', a
spelling-checker will not help you, and nor will a validator in similar
cases.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[jcsnippets.atspace.com]

"Stephen Poley" <sb******************@xs4all.nl> wrote in message
news:sv********************************@4ax.com...
<snipped>

Thanks everyone - I'm beginning to see the light here :)

JayCee
--
http://jcsnippets.atspace.com/
a collection of source code, tips and tricks