Website Review and Suggestions

**jason_bristol** · 09:39 PM

Hello all.
I only have the index page so far. All the text is dummy text and the same for the images. It's just going to be a site about my city. I'm only doing it to learn CSS more and to learn the fundimentals of building a comercial site and what things are best to be added. and what does and does not work.
This is my first attempt at creating a CSS page without tables. I think it would be classed as a liquid design.
I was wondering what people thought. If you know css could anyone tell if my css structure is ok and any tips to alter the css.
Also does anyone have any good ideas on what to add to such a site.

here is a list of things I will probably add.
History of the city
Images
Maps
Nightclub section
Info about different areas
Quiz
forum
local football news
local news
local dialet dictionary

site - CLICK HERE

the stylesheet page CLICK HERE

thanks

**Kirtan** · 09-28-2006, 10:07 PM

Looks good but too dark. Please make either content grey bg to a light color or content text to light color. Total bg is dark, content bg is dark and also content text is black. It seems something is missing. You can also add a CSS validator link to w3 org

**LadynRed** · 09-29-2006, 03:49 PM

A CSS validator 'badge' ?? Why ?? It's nonsense.

It looks nice, although I have to agree, for a town history the gray is rather dark and dreary.

The Flash menu is nice, but terrible for accessibility. If you're going to make your nav Flash, make sure you provide a TEXT ONLY alternative menu. Search engines spiders can't read Flash ! You also should NOT use the <embed> tag to include active content like Flash. This will cause IE users headaches, they won't see your Flash, which is worse because it's your menu. They will be required to click twice before your Flash menu ever comes up !
Replace the embed with any one of these methods:
http://www.karlcore.com/articles/article.php?id=2

CSS -wise :
Common mistake of beginners - using position:absolute on everything, or position:anything on everything. Not necessary for either and all that absolute positioning will cause you headaches. If you want to create a fluid layout, learn to use Floats, percents and em's. Let the normal document flow work for you and position only when it's necessary.

You have re-used the ID 'navlist' on several lists. ID's MUST be UNIQUE, you cannot re-use them. If you want to re-use a style, use a CLASS.

If you're going to use the XHTML DOCTYPE, then you must follow the rules for that doctype - ALL tags must be closed; all images must have an ALT attribute, even if it's alt="". No presentational markup like 'align=center' either, and no deprected tags like <font>.

You've got <li class="stylex" all over the place. Save yourself a LOT of work and define the style on the <LI> in your CSS and leave off the class in your html. You may have to use descendent selectors to achieve your results.

You have <span>s like <span class="nameoflist">List four</span>. The purpose of CSS is to NOT do stuff like this. Define a style for the heading text, give each list an ID, then you can target the list heading in your CSS file and dump the spans.

Don't use PT or PX for font sizing. This prevents IE users from re-sizing the text if they find your font size to be too small. Use % or em for text sizing.

**colbyt** · 09:24 PM

I have to agree with another poster or two in that the site is too dark. You can keep the header portion as it is but I feel the side menus and main body portions need to lighten by several shades.

Is there some reason why you have limited you main content div to the smaller width? I usually view at 800x600, others may run higher. I should say that I viewed in IE6 so that may have affected your layouts.

Lady knows her stuff. She is a great CSS person to listen to. A little extreme now and then.

but then what is life without some passion.

Also I hope you will come back we all mean well.

**LadynRed** · 09-29-2006, 08:06 PM

Quote:

Lady knows her stuff. She is a great CSS person to listen to. A little extreme now and then.

but then what is life without some passion.

Moi ?? Extreme ?

**ivenms** · 09-30-2006, 03:51 AM

Amazing thing. Good work. You can also embed the flash on CSS, i think.

**smartcoyote** · 09-30-2006, 04:33 AM

It's a good idea mate, i am doing the same to learn more about php and to have my search engine.

**crush123** · 09-30-2006, 02:29 PM

reading a lot of text in bold in dark background is not userfriendly.
think of some light colors instead.
design is good
leave some padding around images.
is it useful to use wide spaced text for time, date, whether?

**hypnoticvibe** · 10:26 PM

I pretty much entirely agree with LadynRed but I have a different philosophy on a couple points:

Quote:

Originally Posted by LadynRed

Don't use PT or PX for font sizing. This prevents IE users from re-sizing the text if they find your font size to be too small. Use % or em for text sizing.

I use px for font and I can resize it. W3C does say to use em though.

I wouldn't make a website non-flash unless you're going for SEO. I agree with Google when they tell you that websites should be built for humans, not search engines.

Using absolute values for the page gives the designer more control over the page. There are several other problems usinng mainly relative values creates (visually) between different monitor resolutions. For forums and mainly text based pages I can agree on that. Keeping the width 760px or below is my recommendation. An 800x600 resolution should not lead to an assumption of 800px width. Opera has a sidebar by default. There are several sidebar extensions for FF. The scrollbar will appear when the height exceeds the screen. These all take a toll on width.

I think the best reference for CSS is CSS Zen Garden.

Here's an extra link that provides several examples for how you can embed your Flash valid.

**classeium.com** · 10-01-2006, 05:19 AM

If CSS was a religion, LadynRed would be a extremist.

**LadynRed** · 10-01-2006, 01:27 PM

Quote:

If CSS was a religion, LadynRed would be a extremist.

Not hardly !
I guess you haven't read much from any of the following web gurus - and standards proponents:
Ericy Meyer
Molly Holschlag
Tantek Celik
Jeff Zeldman
Andy Budd
Zoe Gillenwater
Dave Shea (css zen garden)
or even The Web Standards Project...
and so many, many, many leaders in the web world who promote the use of CSS for layout (not tables), semantic and proper markup, usability and accessibility.
I'm just a member of the 'religion', hardly a leader and most definitely NOT an extremist. People here might see it that way because so many are still entrenched in old tables-based sites and old HTML. It's time to move on people.

**colbyt** · 10-01-2006, 02:32 PM

Quote:

Originally Posted by classeium.com

If CSS was a religion, LadynRed would be a extremist.

You mean it isn't a religion?

I sure thought it was.

**menerweb** · 10-02-2006, 10:25 AM

Quote:

Originally Posted by classeium.com

If CSS was a religion, LadynRed would be a extremist.

I join LadynRed, she's right.

She says the truth. But, unfortunately, someone does not want to hear and implicate the truth! Because it is hard to implicate truths sometimes...

**cpsitesaver.com** · 10-02-2006, 01:18 PM

Wow. That review was hard but I am sure folks have a learned a lot from it.

I hope I can learn CSS as easy as LadynRed has explained it.

Where do we start LadynRed?

**LadynRed** · 10-02-2006, 03:55 PM

For the complete noob.. not even HTML knowledge:
http://www.sitepoint.com/books/html1/

If you have basic HTML knowledge but you design with tables:
http://www.sitepoint.com/books/css2/

Those 2 books are extremely good.

On the web, there are tons of resources, W3C Schools would be a good start.
Western Civ offers a self-paced basic course in HTML and CSS:
http://www.westciv.com/courses/free/index.html

Tuts on Selectors: http://css.maxdesign.com.au/selectutorial/index.htm
Tuts on Floats: http://css.maxdesign.com.au/floatutorial/
Tut on Lists: http://css.maxdesign.com.au/listutorial/index.htm

Killing browswer bugs:
http://www.positioniseverything.net/index.php

For help from the gurus : css-discuss.org list

**jason_bristol** · 10-02-2006, 06:40 PM

Ladies and gentlemen. I think we have digressed somewhat. :-). NOW GET BACK TO TALKING ABOUT MY BRILLIANT WEB-SITE! edit- Web-page.

-----------

Thanks for the comments so far everyone. I will be changing the colour, And I will comb my code regarding issues mentioned by LadynRed in the next few days.

------------
Regarding the last comment by LadynRed. I also recommend the css.maxdesign.com.au web-site. I found this really helpful.

**classeium.com** · 10-02-2006, 10:25 PM

I think you need to cool down 'LadynRed', it was joke. Its web deisgn, not death! Css will come with time, i started last year, i was only 12 with css, now im 14, never purchased a book, just looked at source files and tutorials, its a simple, easy to use, acessable language! Your good with css, and i thank you, for otherwise I would have never changed!

**carterdea** · 10-03-2006, 12:07 AM

Lady's completely right. Not even too extreme. Once you delve into CSS more, you will understand what she means.

I just thought I'd add this:

http://jigsaw.w3.org/css-validator/v...cansurf.com%2F

Just a thought, lots of warnings.

It looks good, but it looks like a template was used.

**jason_bristol** · 10-07-2006, 10:13 AM

Thanks for every one's comments. A big thanks to LadynRed for going through my css.

I have made several changes.

1. Different colour scheme. brighter and different colours used.
2. Made lots of little changes to the three columns and flash header.

CSS/HTML changes.
1. I have made a change to the embedded flash. This should now work correctly in IE. I have no means of checking this as I only have a mac. If someone has a new version of IE can they please tell me if the flash now works properly.

2. I tried to lose some of the absolute positioning and go more with floating. It worked most of the time but sometimes I had to settle with absolute positioning.

3. I added the alts to all the images and took out the align=center function in the HTML.

4. I changed the repeated IDs to classes.

5. I got rid of about half the spans and managed to replace them with some much more efficient.

again thanks

the improved site - Click here

**bizops** · 10-11-2006, 03:14 AM

The sound that is played when you hover over menu buttons = BAD in my books. You don't really need it and it would annoy some people (like me)