Critique of first web site please

I have designed and written my first web site for the Cub Scout Pack
that I am associated with. I am new at this and have no training so I
have been learning HTML and CSS as I went along in this project. I
would appreciate any comments, criticism or suggestions. There is also
one pesky problem in IE that I have not been able to fix. There is some
text from the last link in the footer that hangs over below this div.
This does not happen in Firefox or Opera. Can anyone suggest how to fix
this?

Some notes:

The picture in the banner is not the final version, I intend to come up
with a resized version with background color the same as the banner
background when time permits (and when I figure out how to do this).

The links are not all active yet. This is a work in progress and I do
not have content for the individual group pages yet.

I do not have full content for the contacts page or the photo pages
yet. I was just trying to get the format and layout straightened out.

The page can be found at http://www.cubpacks.org/nj/cs/160/index.html .


Thank you for any help you can offer.

Adam B wrote on 26/04/2005 :

I have designed and written my first web site for the Cub Scout Pack that I
am associated with. I am new at this and have no training so I have been
learning HTML and CSS as I went along in this project. I would appreciate
any comments, criticism or suggestions.

I like it. simple. easy to read.

You need to make the menus consistant throughout the site though. Some
pages have the order of the menus different. Not sure if they are
submentus, but its a bit confusing.


Once your done with the final version of your site, I am not sure if
you still want to keep the w3 link validation stuff for html/css. For
your targetted audience they may look like advertisements. for another
industry it may be relevant, but i dont think for the scouts.

There is also one pesky problem in IE
that I have not been able to fix. There is some text from the last link in
the footer that hangs over below this div. This does not happen in Firefox or
Opera. Can anyone suggest how to fix this?

Instead of this....

#footer {
float:left;
background:#999966;
width:100%;
text-align:left;
margin: 0px;
}

do this...

#footer {
background:#999966;
width:100%;
text-align:left;
margin: 0px;
clear:both;
}

Some notes:

The picture in the banner is not the final version, I intend to come up with
a resized version with background color the same as the banner background
when time permits (and when I figure out how to do this).

The links are not all active yet. This is a work in progress and I do not
have content for the individual group pages yet.

I do not have full content for the contacts page or the photo pages yet. I
was just trying to get the format and layout straightened out.

Once you have it all looking like you want it, dont have redundant or
incomplete pages. It makes the site boring. Its like packing a small
lolly into a big cardboard box.

--
a beef jerky site http://www.choicebeefjerky.com.au
not a beef jerky site http://mycoolwheels.com/vote.cmks
eat beef jerky

Adam B wrote:

I have designed and written my first web site for the Cub Scout Pack
that I am associated with. I am new at this and have no training so I
have been learning HTML and CSS as I went along in this project.

You've learned well, grasshopper.
1. the black text on dark khaki background is a bit hard to read.
2. the main navigation menu items are changing from page to page which
goes against the Principle of Least Surprise.
A common technique is to have the current page's nav link still in the
list but a different color (say, the :hover colors), or preferably not a
link at all. This also gives a further hint to the visitor where he is on
the site.
List-a-Matic <http://css.maxdesign.com.au/listamatic/> offers lots of
menu styles.
3. Photos: The link to the photos for "2005 Camp Inawendiwin" is not at
all obvious it is a link to photos. There should be a separate menu list
that provides the photo links.
I initially thought there were no photo links at all; I tried the
"2005..." just to see what would happen. Surprise!
4. Calendar: It would look cleaner to use a table to list the events
instead of a <ul> and a slew of &nbsp;'s.

There is also
one pesky problem in IE that I have not been able to fix. There is some
text from the last link in the footer that hangs over below this div.
This does not happen in Firefox or Opera. Can anyone suggest how to fix
this?

Yes, it's a bizarre rendering defect in IE.

It has to do with all the floating you are using for the footer, most
of which is unnecessary. I tried a number of things and this is at least
close to your original (only the changes are shown):

CSS:
#footer { /* float:left; */ position: relative; clear: both; }
..checklink { /* float: left; */ }
..rightlink { position: absolute; right: 1em; top: 0em; }

HTML:
<div id="footer">
<a href="http://validator.w3.org/check?uri=referer">
<img src="index_files/valid-xhtml10.png" alt="Valid XHTML 1.0!"
style="border: 0pt none ; width: 88px; height: 31px;" ></a>
<a href="http://jigsaw.w3.org/css-validator/">
<img style="border: 0pt none ; width: 88px; height: 31px;"
src="index_files/vcss.png" alt="Valid CSS!"></a>
<a class="rightlink" href="mailto:scout.adam (AT) verizon (DOT) net"
title="Let me know what you think">Comments, suggestions
or requests</a>
</div>

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Disco Octopus wrote:

Adam B wrote on 26/04/2005 :

I have designed and written my first web site for the Cub Scout Pack
that I am associated with. I am new at this and have no training so I
have been learning HTML and CSS as I went along in this project. I
would appreciate any comments, criticism or suggestions.


I like it. simple. easy to read.

Thank you. That is what I was aiming for.

You need to make the menus consistant throughout the site though. Some
pages have the order of the menus different. Not sure if they are
submentus, but its a bit confusing.

I will try to correct this. The biggest offender would
probably have been the photo pages, as more pages will be
added for various events.

Once your done with the final version of your site, I am not sure if you
still want to keep the w3 link validation stuff for html/css. For your
targetted audience they may look like advertisements. for another
industry it may be relevant, but i dont think for the scouts.

These are mainly there for ease of checking as pages are
updated. I will be updating information frequently. Perhaps
I should change them to a text link without the graphic so
they are less obtrusive.

There is also one pesky problem in IE that I have not been able to
fix. There is some text from the last link in the footer that hangs
over below this div. This does not happen in Firefox or Opera. Can
anyone suggest how to fix this?


Instead of this....

#footer {
float:left;
background:#999966;
width:100%;
text-align:left;
margin: 0px;
}

do this...

#footer {
background:#999966;
width:100%;
text-align:left;
margin: 0px;
clear:both;
}

Thank you very much. This problem has really been annoying me.

Some notes:

The picture in the banner is not the final version, I intend to
come up with a resized version with background color the same as the
banner background when time permits (and when I figure out how to do
this).

The links are not all active yet. This is a work in progress and I
do not have content for the individual group pages yet.

I do not have full content for the contacts page or the photo
pages yet. I was just trying to get the format and layout straightened
out.



Once you have it all looking like you want it, dont have redundant or
incomplete pages. It makes the site boring. Its like packing a small
lolly into a big cardboard box.

I think we will be removing several of the links. The
leaders of the individual groups do not seem interested in
contributing content as I thought they would. If they do not
need them, these options will be removed from the site
structure.

Jim Moe wrote:

Adam B wrote:

I have designed and written my first web site for the Cub Scout Pack
that I am associated with. I am new at this and have no training so I
have been learning HTML and CSS as I went along in this project.


You've learned well, grasshopper.

Thank you very much. I put in a lot of time studying
techniques used on other sites, as well as tutorials on
sites such as w3schools.com. I found this to be a
fascinating subject.

1. the black text on dark khaki background is a bit hard to read.

I used this in an attempt to keep a consistent color scheme.
I initially tried the Cub Scout blue and gold, but it was
a bit too garish for my taste, so I switched to Boy Scout
colors (grabbed with a Firefox Colorzilla plugin from the
BSA website). I think I will change the notices box
background color to gold (matching the graphic and mouseover
on the links). It will make the text more prominent and also
draw attention to the current important information.

2. the main navigation menu items are changing from page to page which
goes against the Principle of Least Surprise.
A common technique is to have the current page's nav link still in the
list but a different color (say, the :hover colors), or preferably not a
link at all. This also gives a further hint to the visitor where he is
on the site.
List-a-Matic <http://css.maxdesign.com.au/listamatic/> offers lots of
menu styles.

I initially had the links more consistent, but I changed
this after seeing some comments in another newsgroup arguing
against having a reference to the current page. I will
probably change it back, I preferred the original consistent
menus anyway.

3. Photos: The link to the photos for "2005 Camp Inawendiwin" is not at
all obvious it is a link to photos. There should be a separate menu list
that provides the photo links.
I initially thought there were no photo links at all; I tried the
"2005..." just to see what would happen. Surprise!

The link will be fairly obvious to users of the site as they
are familiar with the event referred to. I agree that it
would be even clearer with a separate menu for the photo
pages. I will keep the main menu consistent with the other
pages and add a separate navigation box below it for these
pages, with a heading indicating that the links in that box
are for the picture pages.

4. Calendar: It would look cleaner to use a table to list the events
instead of a <ul> and a slew of &nbsp;'s.

I will try this. It may take me a while. I have not looked
into the use of tables very much yet. Yes, the spaces are
quite annoying. I think HTML should have a space(#) function
to insert a series of nonbreaking spaces instead of
requiring strings of &nbsp;.

There is also one pesky problem in IE that I have not been able to
fix. There is some text from the last link in the footer that hangs
over below this div. This does not happen in Firefox or Opera. Can
anyone suggest how to fix this?

Yes, it's a bizarre rendering defect in IE.
It has to do with all the floating you are using for the footer, most
of which is unnecessary. I tried a number of things and this is at least
close to your original (only the changes are shown):

CSS:
#footer { /* float:left; */ position: relative; clear: both; }
.checklink { /* float: left; */ }
.rightlink { position: absolute; right: 1em; top: 0em; }

HTML:
div id="footer"
a href="http://validator.w3.org/check?uri=referer"
img src="index_files/valid-xhtml10.png" alt="Valid XHTML 1.0!"
style="border: 0pt none ; width: 88px; height: 31px;" ></a
a href="http://jigsaw.w3.org/css-validator/"
img style="border: 0pt none ; width: 88px; height: 31px;"
src="index_files/vcss.png" alt="Valid CSS!"></a
a class="rightlink" href="mailto:scout.adam (AT) verizon (DOT) net"
title="Let me know what you think">Comments, suggestions
or requests</a
/div

Thank you. This problem has been really annoying. I tried a
number of different things but never came across a solution.



Apparently the site is appreciated by the Cub Scouts. They
just asked me if I would set up a site for the Boy Scout
troop that we are associated with. Unfortunately they don't
share the same tastes with me. I have been fending off
suggestions from our Cubmaster about visiting sites where
you can get free Cub Scout graphics. She likes animated gifs
and flashy stuff. As you can see from the layout I came up
with, my tastes run in other directions. I was also aiming
for simplicity, visual consistency and accessibility. I
think I will be using the accessibility argument to avoid
plastering the pages with blinky stuff, but a few additional
graphics will probably be a nice addition once I find some
appropriate ones and figure out how to incorporate them. We
also have no budget for this, and so are on a free server
with limited space. That is one reason why the pictures have
been reduced in size, as much as keeping load times down for
those with dial-up connections.

Adam B wrote:

I will try this. It may take me a while. I have not looked into the use
of tables very much yet. Yes, the spaces are quite annoying. I think
HTML should have a space(#) function to insert a series of nonbreaking
spaces instead of requiring strings of &nbsp;.

&nbsp; isn't meant to be used for layout purposes. There are perfectly
fine alternatives (like CSS) which can be used instead.

--
Ben M.

kchayka wrote:

Adam B wrote:

Disco Octopus wrote:

Once your done with the final version of your site, I am not sure if
you still want to keep the w3 link validation stuff for html/css.

These are mainly there for ease of checking as pages are updated.

FYI, you don't need a link in the page body to initiate validation for
that page. Get the Web Developer extension for Firefox/mozilla. It has
tools to validate any page, among other extremely useful development
aids. I believe Opera 7+ has inbuilt validation, too.

It's a heckuvan extension. I love it.

Yeppers re Opera. MainMmenu|W3-dev". Lots of stuff in there.

URL:http://webdeveloper.mozdev.org/

--
Blinky Linux Registered User 297263
Killing all Usenet posts from Google Groups
Info: http://blinkynet.net/comp/uip5.html

kchayka wrote:

Adam B wrote:
Disco Octopus wrote:

Once your done with the final version of your site, I am not sure if you
still want to keep the w3 link validation stuff for html/css.

These are mainly there for ease of checking as pages are updated.

FYI, you don't need a link in the page body to initiate validation for
that page. Get the Web Developer extension for Firefox/mozilla. It has
tools to validate any page, among other extremely useful development
aids. I believe Opera 7+ has inbuilt validation, too.

URL:http://webdeveloper.mozdev.org/
There is also a html validator based on Tidy

http://extensionroom.mozdev.org/more-info/tidy
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://www.evandervaart.nl/ Under construction

Adam B wrote:

4. Calendar: It would look cleaner to use a table to list the events
instead of a <ul> and a slew of &nbsp;'s.

I will try this. It may take me a while. I have not looked into the use
of tables very much yet. Yes, the spaces are quite annoying. I think
HTML should have a space(#) function to insert a series of nonbreaking
spaces instead of requiring strings of &nbsp;.

The data you are presenting is tabular. So a table is an appropriate

element to use.

[...] She likes animated gifs and
flashy stuff. As you can see from the layout I came up with, my tastes
run in other directions. I was also aiming for simplicity, visual
consistency and accessibility.

Content is the most important part of the site, or should be. Anything

that draws the eye away from that is to be avoided. Most people find
flashy blinky stuff annoying and distracting. Very few find it appealing,
especially after the first 5 seconds.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

kchayka wrote:

Adam B wrote:

Disco Octopus wrote:

Once your done with the final version of your site, I am not sure if you
still want to keep the w3 link validation stuff for html/css.

These are mainly there for ease of checking as pages are updated.


FYI, you don't need a link in the page body to initiate validation for
that page. Get the Web Developer extension for Firefox/mozilla. It has
tools to validate any page, among other extremely useful development
aids. I believe Opera 7+ has inbuilt validation, too.

URL:http://webdeveloper.mozdev.org/

Thank you. I will look into that.