7 replies [Last post]
billybrickles
Offline
Regular
London
Last seen: 13 years 8 weeks ago
London
Joined: 2009-01-18
Posts: 26
Points: 0

Hi,

http://www.sdavies.info/

This is the index and template of a site I have been working on. The links in the left hand coloumn are not working yet, everything else should be. I have validated the HTML and CSS and they look fine.
I am alos shooting for a WACAG rating of AA or AAA.

There are a couple of tiny annoying things in IE6 but I am soo fed up of spending hours fixing lame bugs on IE that i am going to leave them, if you are using IE 6, I FEEL sorry for you

Thanks,

here is the link

http://www.sdavies.info/

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 32 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

If your code validates at

If your code validates at the W3C validator it is by definition "correct", so the answer must be "yes".

On the other hand if you ask if it is "good" it may well not be, but I'll leave that for others to judge.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

billybrickles
Offline
Regular
London
Last seen: 13 years 8 weeks ago
London
Joined: 2009-01-18
Posts: 26
Points: 0

any comments would be helpfull

Thanks,

this is my first foray into commercial web design and I have basically taught myself from the ground up. I am just interested to know if I am doing things in a standard manner or maybe all my CSS is out of wack completeley. It works so thats not a bad thing but so did previous attempts with everything positioned absolutly, so obviously there are levels of 'good CSS'.

Cheers

bb

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 32 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

The most imporant you can do

The most imporant you can do to generate good CSS is to start with good html code. That generally means semantic html code, which means using html to mark up the meaning or structure of the page and ignoring presentation entirely in your html.

With valid and semantic html writing good CSS becomes easy,

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 48 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Well, following up on what

Well, following up on what Ed's said, the HTML looks a bit big for its britches. You've wrapped every image, header and list/menu in a div. Most if not all of them could have taken care of themselves.

I'm not a fan of text-enlarging widgets. But I can understand why you would have them (even though it helps keep people enslaved by ignorance, blissfully unaware that they spent time loading a script to do what their browsers already do by default, often with as little work as CTRL++)...

Tip: anywhere you have more than one in a row, you're doing something wrong. BR has a place, yes. But if you're using it more than once like this: then you're using it to do CSS's job (spacing).

In the CSS I noticed a few things:

You have some places where you've really increased the code:
#acs a {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;

}

Why not
#acs a {
border: 0;
}

Without a style, you're either going to have no border at all, or you'll default to "solid" depending on the browser (or am I thinking of colour? Border doesn't work completely exactly the same in every browser).

You can also group your similar declarations, like :hover and :focus...
#whatever:focus, #whatever:hover {
color: #fff;
}

instead of two separate declarations.

Take advantage of 4-sided css shorthands. Cleaner code is generally easier to debug later on.

You set heights on everything. Now, I can understand heights on things made up of images, or holding background images or whatever, but esp with those text-enlarging widgets.. did you test in FF and Safari with actual text-enlarge? Setting set heights on blocks often breaks layouts when people who DO know how to use their browsers use them to enlarge text. For boxes with images in them, at least set a min-height (and then height in IE6 which works the same way... use the * html way to do it, not the !important way).

It's obvious that you are thinking accessibility here. I like that your skip links are viewable-- skip links are nice for sighted keyboarders too! Although if you ever get a boss who doesn't like the way they look, here's a nice trick:
position them absolutely off to the side and have them appear onscreen (in a sensible place like near the top of the page) on :focus, which will cover both the screen reader users AND the Lynx or sighted keyboarders! I first saw it on Mike's page (which is one of only two that were certified "passed" WCAG2.0!).

(this is that site if you would like to take a look... it's pretty cool! http://lflegal.com/ )

I'm no expert, but I fake one on teh Internets

billybrickles
Offline
Regular
London
Last seen: 13 years 8 weeks ago
London
Joined: 2009-01-18
Posts: 26
Points: 0

Hi

Thanks so much for your comments

I am only 6 months into using CSS and HTML for that matter, this is my first "paid" job!!

I started using tables in dreamweaver and have gotten to here by trial and error. I am trying to code as much as I can by hand but i still rely on dreamweaver sometimes and I think thats why I often declare things like

border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;

Dreamweaver will put them all in there!!!

Regarding too many divs. Say for instance in the header, could i just have the elements floated by themselves ( for instance, can i put padding etc on elements

    for example??

Cheers again

BB

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 3 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

yes, you can add floats and

yes, you can add floats and margins and padding and whatever, to all elements without the use of divs. so... instead of having a div named #header, you should just use

purewebdesigner
purewebdesigner's picture
Offline
Enthusiast
Washington DC
Last seen: 3 years 44 weeks ago
Washington DC
Timezone: GMT-5
Joined: 2007-04-22
Posts: 234
Points: 95

Great job on the WACAG

Great job on the WACAG rating! Also, sadly you have to still build for IE6 users too.

Best to you,
puredezigner

CSSExpression EngineHTMLWordpressCoffee

Personal Website: curtisscott.com
Follow Me on Twitter: twitter.com/curtisscott_com