Yet Another Web Page by a CSS Newbie

[Kevin J. Cheek]

I've just finished my first web page using style sheets to control the
layout. It's a vanity web page so there's not much in the way of
interesting content, but it does serve as a good place for me to practice
coding web pages. The URL is http://planttel.net/~kevinc but you might
want to see http://planttel.net/~kevinc/mill/ntsnblts.htm first, where I
discuss some of the issues in designing the pages.

The issues, from a newbie's point of view:

Used HTML 4.01 Transitional instead of Strict because IE 6 doesn't like
its min-width workaround in Strict mode. I thought my options were to
redesign the pages for collapsing margins, use Javascript, or insert the
word "Transitional" in the document type. I inserted "Transitional"
and let it ride. Mozilla correctly interprets the standard min-width
statement I also included regardless of Transitional or Strict.

Banner graphics seem larger on the page than I thought and may come
across as shouting. They're also bigger in file size than I'd like, even
though they're 256 color at 72 dpi resolution. I'm thinking of splitting
the graphics in two, saving the eagle in 256 colors and the text in 16
colors or 2 color black and white. I really like the font in the banner
and the only reliable way for others to see it is to present it as a
graphic. Or make the image background the same as the web page and save
it as a jpeg. Or maybe I need to do something else to allow for
collapsing margins.

Used Georgia as a serif font to stay with the 19th Century newspaper
theme. I don't think it makes it too hard to read, but I'm not sure. The
fall-back fonts are Times New Roman and serif. The only places were I
defined font sizes are in the navigation bar and the footer, and here I
expressed it in em so they'd reflect the the user's chosen size.

I'm not too happy with the link colors, but they work well against the
yellow, beige, and white backgrounds. Not sure what else I could do here.

I'm also using a clearing class to make sure wrapping DIV extend to the
bottom of internal DIV. I'm probably using it more than necessary.

A minor issue is the use of headings. W3C recommends starting with h1 and
working downward with each heading. But h1 was bigger than I liked and so
I started with h3 and worked down. Yes, I know I could have specified the
header size through the style sheet, but I didn't see the point. Am I
missing something here?

And that's about all. Any design comments would be most welcome.

Thanks in advance.
-Kevin Cheek

 

[Beauregard T. Shagnasty]

... http://planttel.net/~kevinc

The issues, from a newbie's point of view:

Used HTML 4.01 Transitional instead of Strict because IE 6 doesn't
like its min-width workaround in Strict mode. I thought my options
were to redesign the pages for collapsing margins, use Javascript,
or insert the word "Transitional" in the document type. I inserted
"Transitional" and let it ride. Mozilla correctly interprets the
standard min-width statement I also included regardless of
Transitional or Strict.

There's probably a solution, but I don't have time at the moment.
Though I rarely find a need for min-width. Max-width would be nice.

New pages should be Strict. This is, after all, the 21st century.

....

Used Georgia as a serif font to stay with the 19th Century
newspaper theme. I don't think it makes it too hard to read, but
I'm not sure. The fall-back fonts are Times New Roman and serif.

This: font-family: Georgia, Times New Roman, serif;
Should be: font-family: Georgia, "Times New Roman", serif;

Needs quotes for font names with spaces. (Aside: Times New Roman is
an ugly font. Why not leave it off?)

This is an error:
width: expression(document.body.clientWidth < 770? "770px": "100%");

See:

The only places were I defined font sizes are in the navigation bar
and the footer, and here I expressed it in em so they'd reflect the
the user's chosen size.

Change this: font-size: .75em;
To this: font-size: 75%;
to bypass the IE bug.

I'm not too happy with the link colors, but they work well against
the yellow, beige, and white backgrounds. Not sure what else I
could do here.

I'm also using a clearing class to make sure wrapping DIV extend to
the bottom of internal DIV. I'm probably using it more than
necessary.

A minor issue is the use of headings. W3C recommends starting with
h1 and working downward with each heading. But h1 was bigger than I
liked and so I started with h3 and worked down.

No, that's wrong. <hx> is not about size. <h1> [used once] should
equate to your page's title. <h2> is a sub-heading, <h3> is a
sub-sub-heading, etc. If you don't like the browser default size,
change it in the CSS.

h1 { font-size: 140%; }
h2 { font-size: 125%; } etc.

Yes, I know I could
have specified the header size through the style sheet, but I
didn't see the point. Am I missing something here?

And that's about all. Any design comments would be most welcome.

Try a 1px border around the content area, and add a bit of padding
inside. The text is too close to the yellow border area.

 

[paul]

I think that whole min-width workaround is fine but I'm not a purist, I
use it. Why not allow a narrower width though, just because you don't
want the menu to wrap? If someone bumps up the font zoom, it will wrap
anyways. Currently this needs a maximized window on an 800 wide screen.

 

[Neal]

I've just finished my first web page using style sheets to control the
layout. It's a vanity web page so there's not much in the way of
interesting content, but it does serve as a good place for me to practice
coding web pages. The URL is http://planttel.net/~kevinc but you might
want to see http://planttel.net/~kevinc/mill/ntsnblts.htm first, where I
discuss some of the issues in designing the pages.

Looks like a first-try. Not bad, but you're still learning about the
difference between setting presentation in HTML and in CSS.

<div style="text-align: center;">
<h3>Just Say It</h3>
</div>

That's not good. How about just <h3 style="text-align: center;">Just Say
It</h3> ? And move the style to the stylesheet.

<hr> isn't as nice or as controllable as a div or other block element
border. I'd assign display: none; to it and put a div around the text that
follows, setting a visible solid top border.

<div id="nav">
<a href="index.html">Home</a> |
<a href="grist/grist.htm">Grist
Mill</a> |
....
<a href="mill/about.htm">About
Cheek's Mill</a></div>

This is a list, is it not? It should semantically be marked up as a list.
Then we change it with CSS to look like what you want. See
http://www.alistapart.com/articles/taminglists/ for more info on this.

75% or .75 em is not a readable font size. For the footer, it's not so
bad, but your navigation is far too small to be read without the user
changing from their preferred size. I'd up it considerably, at least to 90
or 95%.

Links are universally recognized by underlines. You have removed that and
replaced it with color. That's an accessibility issue - people with
colorblindness, black-and-white monitors, etc. cannot make out the colors
and therefore can't find the links. Keep the underline in the body text.
The navigation links can afford to lose them, as it's obvious this is a
link section.

The issues, from a newbie's point of view:

Used HTML 4.01 Transitional instead of Strict because IE 6 doesn't like
its min-width workaround in Strict mode. I thought my options were to
redesign the pages for collapsing margins, use Javascript, or insert the
word "Transitional" in the document type. I inserted "Transitional"
and let it ride. Mozilla correctly interprets the standard min-width
statement I also included regardless of Transitional or Strict.

Strict is more appropriate for new documents. As was said earlier, there
exist workarounds for this issue. Alternately, you can allow IE to not
observe min-width, so those users may end up with a too-narrow text block.

In addition, a min-width of 770px means many users will have horizontal
scrollbars forced on them.

Banner graphics seem larger on the page than I thought and may come
across as shouting. They're also bigger in file size than I'd like, even
though they're 256 color at 72 dpi resolution. I'm thinking of splitting
the graphics in two, saving the eagle in 256 colors and the text in 16
colors or 2 color black and white. I really like the font in the banner
and the only reliable way for others to see it is to present it as a
graphic. Or make the image background the same as the web page and save
it as a jpeg. Or maybe I need to do something else to allow for
collapsing margins.

Thought - do the eagle as a background image and the title as actual text
with a left padding or margin to definitely avoid the background.

Used Georgia as a serif font to stay with the 19th Century newspaper
theme. I don't think it makes it too hard to read, but I'm not sure. The
fall-back fonts are Times New Roman and serif. The only places were I
defined font sizes are in the navigation bar and the footer, and here I
expressed it in em so they'd reflect the the user's chosen size.

For many (most) users, serif is TNR. You could leave it out. And use %
instead of em to avoid a resize bug in IE. I've mentioned my concern over
the size already.

I'm not too happy with the link colors, but they work well against the
yellow, beige, and white backgrounds. Not sure what else I could do here.

Underlining. If you have no other better option, use the browser
defaults since the user is used to them.

I'm also using a clearing class to make sure wrapping DIV extend to the
bottom of internal DIV. I'm probably using it more than necessary.

On the page I see, there's nothing floated, so no need for clear.

A minor issue is the use of headings. W3C recommends starting with h1 and
working downward with each heading. But h1 was bigger than I liked and so
I started with h3 and worked down. Yes, I know I could have specified the
header size through the style sheet, but I didn't see the point. Am I
missing something here?

h1 is main heading. h2 is section heading. h3 is subheading. h4 is
sub-subheading, etc.

h1 does not mean 200% bold. It means "main heading." When writing the HTML
markup don't even worry about presentation at all. Mark it up according to
the semantic role of the content. Is it a heading? Paragraph? List? etc.

 

[Travis Newbury]

I've just finished my first web page using style sheets to control the
layout....

It looks like every other web site that shoots for 0 validation errors.
If that is what you are shooting for it looks great. But the site is
pretty dull and boring.

Do yourself a favor, go to http://nd.net.ru and get the color program
they have there. It will help you with your colors.

Next go take a look at a Christian web site that really impresses you.
Then compare it to yours. Notice the differences and try to implement
variations in your site.

Validation is great, but "appeal" helps too.

 

[Neal]

Travis Newbury:

kevinc

It looks like every other web site that shoots for 0 validation errors.
If that is what you are shooting for it looks great.

Except for this:

Next go take a look at a Christian web site that really impresses you.
Then compare it to yours. Notice the differences and try to implement
variations in your site.

Why limit to Christian sites? His site is just as much a blog, an
information site, etc...

Validation is great, but "appeal" helps too.

What's funny is you're the first to even mention HTML validation regarding
this site. So your assumption seems odd.

I knew when writing my last post that the site didn't validate. But its
design is totally unrelated to whether it validates or not. You do
understand that, yes?

Validation and appeal are, in reality, as related as being healthy and
being good-looking. Plenty of people are both, plenty are neither, and
plenty are one but not the other. I think we'd all advise people to be
healthy and to look their best. And some people ruin their health to be
better looking, and some obsess with health too, failing to attend to
their appearance.

But the two are after all totally different things, and trying to be
healthy does not mean your looks have to go down the drain -- just as
trying to develop a valid page does not exclude the possibility it could
have an appealing design.

Generally, your argument seems to me to depend on the mistaken assumption
that quality design is not possible with valid code. In fact, it is quite
possible. I think what we actually observe is that people who are skilled
as designers are not normally either skilled in, or concerned with,
creating valid pages, and that people who are skilled in the details of
valid markup are generally untrained in graphic design. As web design is
still relatively new, in years to come I expect to see this phenomenon
change.

 

[Kevin J. Cheek]

<div style="text-align: center;">
<h3>Just Say It</h3>
</div>

That's not good. How about just <h3 style="text-align: center;">Just Say
It</h3> ? And move the style to the stylesheet.

Agreed. I thought I had all the inline styles taken out. I had created a
class called div.title to make centered titles. I've changed it to just
plain .title {text-align: center;}. But a question: I've gone through my
pages and removed the <div class="title"> in favor of using the title
class in the headers and paragraphs. But isn't more efficient to use <div
class="title"> when I'm centering several lines?

<hr> isn't as nice or as controllable as a div or other block element
border. I'd assign display: none; to it and put a div around the text that
follows, setting a visible solid top border.

Let me think about that one. I understand what you're saying, but all I
really wanted was a dividing line.

<div id="nav">
<a href="index.html">Home</a> |
<a href="grist/grist.htm">Grist
Mill</a> |
...
<a href="mill/about.htm">About
Cheek's Mill</a></div>

This is a list, is it not? It should semantically be marked up as a list.
Then we change it with CSS to look like what you want. See
http://www.alistapart.com/articles/taminglists/ for more info on this.

Thanks for the URL. Not only learned how to make lists appear in-line,
but also that by associating attributes with the id, it's possible to
make it follow through the entire DIV without having to name a class each
time. I've done this with the links for the nav id, and have let the body
text links go with the browser defaults.

I take it that this would also mean that my table of contents style menu
pages should also be lists, as should the collection of links on a few
pages. I've gone back and made these lists, too.

I also have some pages that use footnotes. I've held off making these
into lists, because in my mind footnotes aren't really lists. Is this a
valid assumption?

75% or .75 em is not a readable font size. For the footer, it's not so
bad, but your navigation is far too small to be read without the user
changing from their preferred size. I'd up it considerably, at least to 90
or 95%.
Done.

Links are universally recognized by underlines. You have removed that and
replaced it with color. That's an accessibility issue - people with
colorblindness, black-and-white monitors, etc. cannot make out the colors
and therefore can't find the links. Keep the underline in the body text.
The navigation links can afford to lose them, as it's obvious this is a
link section.
Done.

Thought - do the eagle as a background image and the title as actual text
with a left padding or margin to definitely avoid the background.

Thought about that. The font I picked closely matches an early 1800s
newspaper banner, and it's not a font that would be available on most
machines. I still might go with that idea, though.

For many (most) users, serif is TNR. You could leave it out. And use %
instead of em to avoid a resize bug in IE. I've mentioned my concern over
the size already.
Done.

On the page I see, there's nothing floated, so no need for clear.

Deleted where nothing's floated. I *think* I got them all, anyway.

h1 does not mean 200% bold. It means "main heading." When writing the HTML
markup don't even worry about presentation at all. Mark it up according to
the semantic role of the content. Is it a heading? Paragraph? List? etc.

Thanks for all the help.

- Kevin Cheek

 

[Kevin J. Cheek]

This: font-family: Georgia, Times New Roman, serif;
Should be: font-family: Georgia, "Times New Roman", serif;

Needs quotes for font names with spaces. (Aside: Times New Roman is
an ugly font. Why not leave it off?)

Done. I decided to delete Times New Roman. If a Windows computer doesn't
have Georgia, shouldn't it default to Times New Roman for serif, anyway?

This is an error:
width: expression(document.body.clientWidth < 770? "770px": "100%");

See:
<http://jigsaw.w3.org/css-validator/...http://planttel.net/~kevinc/mill/ntsnblts.htm>

OK, an error because it's an IE specific work-around?

Change this: font-size: .75em;
To this: font-size: 75%;
to bypass the IE bug.
Done.

Oh, you do know. <g> Yes, you're missing that they are semantic
headings, not presentational elements.

Let me see if I understand this correctly. I should use headings along
the pattern of an outline. Such as:

h1 Topic I
h2 Subtopic A
h3 Sub-subtopic 1
h3 Sub-subtopic 2
h2 Subtopic B
h1 Topic II

Is this correct?

And should I ever use bold when I have a title of a document in a web
page, or should I always use h?

Try a 1px border around the content area, and add a bit of padding
inside. The text is too close to the yellow border area.

Done.

And thanks for all the help.
- Kevin Cheek

 

[Kevin J. Cheek]

I think that whole min-width workaround is fine but I'm not a purist, I
use it. Why not allow a narrower width though, just because you don't
want the menu to wrap? If someone bumps up the font zoom, it will wrap
anyways. Currently this needs a maximized window on an 800 wide screen.

Actually I don't mind the menu wrapping; I mind the yellow bar shrinking
to a narrower size than the banner. I might could use 770px x 1px yellow
graphic for a background, though.

Thanks for the advice.
- Kevin cheek

 

[Neal]

Kevin:

I had created a
class called div.title to make centered titles. I've changed it to just
plain .title {text-align: center;}. But a question: I've gone through my
pages and removed the <div class="title"> in favor of using the title
class in the headers and paragraphs. But isn't more efficient to use <div
class="title"> when I'm centering several lines?

1) Choose the right name for the semantics for the element.

2) You can have two classes in one element.

I also have some pages that use footnotes. I've held off making these
into lists, because in my mind footnotes aren't really lists. Is this a
valid assumption?

I'd agree on that. divs make more sense.

 

[Beauregard T. Shagnasty]

Done. I decided to delete Times New Roman. If a Windows computer
doesn't have Georgia, shouldn't it default to Times New Roman for
serif, anyway?

That would depend upon the visitor's personal taste, I expect. I've

OK, an error because it's an IE specific work-around?

Whatever it is, it's not valid CSS... Even if IE likes it, all other
browsers would choke on it.

Let me see if I understand this correctly. I should use headings
along the pattern of an outline. Such as:

h1 Topic I
h2 Subtopic A
h3 Sub-subtopic 1
h3 Sub-subtopic 2
h2 Subtopic B
h1 Topic II

Is this correct?

Yes, except there should only be one <h1> on a page. It would be your

And should I ever use bold when I have a title of a document in a
web page, or should I always use h?

If you consider the "title of a document" as the <title>, and the ..
main heading as the purpose of the document, then yes, use <h1>.

This: <h3 class="title">Just Say It</h3>
would be your <h1>. Since you probably want the style equal across our
site, drop the class and just style the h1, h2, h3.. in the css.

Done.

Looks much nicer, to me. But .. this is odd: In Firefox, the border is
missing on the right side of the content box. It is ok in Opera.

I'd move this to the bottom somewhere.
"Last updated December 12, 2004"

One other thing. See the validator, and look at line 151. Make it go away!

And thanks for all the help. - Kevin Cheek

You're welcome.

 

[paul]

Actually I don't mind the menu wrapping; I mind the yellow bar shrinking
to a narrower size than the banner. I might could use 770px x 1px yellow
graphic for a background, though.

Just use the yellow for the background color of the list in CSS.

 

[Kevin J. Cheek]

Just use the yellow for the background color of the list in CSS.

Will try it. Right now I'm thinking of playing with invisible <hr> for
width control and doing something completely different with the banner,
and see which looks best.

- Kevin Cheek

 

[Kevin J. Cheek]

Yes, except there should only be one <h1> on a page. It would be your
top level heading. Similar to the page's <title>

OK, I think I've got it. Now to code it.

This: <h3 class="title">Just Say It</h3>
would be your <h1>. Since you probably want the style equal across our
site, drop the class and just style the h1, h2, h3.. in the css.

The Merry Christmases could be <h2>'s I suppose. Are they really
paragraphs?

In this case, yes. Although the rule is that paragraphs must consist of
two or more sentences unless it's dialog, it's possible to use single
sentence paragraphs sparingly for effect. It's not a good idea for a
business report or formal writing, but it's allowable in fiction and
writing such as opinion articles.

Looks much nicer, to me. But .. this is odd: In Firefox, the border is
missing on the right side of the content box. It is ok in Opera.

I ran into something similar with Mozilla, but it was a list overlapping
the border of a floating box. Specifying a right-margin of 1px fixed that
one. I'll download Firefox and take a look. I guess this is what I get
for supposing that Mozilla and Firefox would behave identically.

I'd move this to the bottom somewhere.
"Last updated December 12, 2004"
OK

One other thing. See the validator, and look at line 151. Make it go away!

Oh yes. I had already ran it through W3C's validator and saw the same
thing. Opened the document. Line 151 was just beyond the end of the page.
Deleted the spaces, uploaded it, ran the validator again. Same thing.
After several minutes of snipe hunting, I realized that my FTP setting
was "binary." Doh! Uploaded it on ASCII and of course the error went
away. Which tells you how late I stayed up working on this thing.

- Kevin Cheek