|
Tailslide -> RE: Please review my website (4/1/2008 4:06:35)
|
As Caz says there's a few errors in the code that will be simple enough to fix but overall it's a very good start. You're using good markup techniques (e.g. divs for layout rather than tables) which will make your life simpler in the long run.
I don't know how picky you want us to get - but since you seem to be going down the right road as far as the general principles are concerned I'll be pickier than I might otherwise be - hopefully it'll be more helpful.
So in no particular order - things I'd fix if I were you:
1. You've commented out the H1 tag for the heading - not a good idea as Search Engines love this tag. If you want a graphical main heading then look into Image Replacement Techniques - there are a few around, some better than others. This one is pretty good and simple to understand: http://wellstyled.com/css-replace-text-by-image.html
2. You must ensure that your informational images have alt attributes. If the image is just for pretty it really should be in the stylesheet not the markup - but if you have to have a non-informational image in the markup then give it a blank alt attribute like this: alt="". If the image is informational (like your images on the right) then they absolutely need a useful alt text - something that replaces the purpose of the image so in the case of image links something like alt="visit our shop" or whatever.
3. Avoid setting your font size in PXs as it means that people using IE6 and older can't make the font size bigger if they need to. People on more modern browsers can scale the font up and down. I tend to find the best font sizing method is to put font-size:100% on the body rule and then font-size: 76% on the main containing div rule.
4. In connection with the above comment - generally avoid setting heights on elements. You can't control how big they'll actually be on the page - people might increase the size of the text and it will break the page if you've set a height (not in IE which as usual ignores the rules with this and just expands stuff as necessary).
5. As well as hover rules for links, also have focus and active rules for people using keyboards to navigate and for IE users (IE uses the active rule instead of the focus rule - incorrectly!). So you might have a rule like this: a:focus, a:hover, a:active {color:black;} (and they must be in that order too!
6. Download Firefox and the plugin Firefox Web developer toolbar. Very useful stuff. Have a look at your page with CSS switched off and then with Images switched off. You'll notice that with images off it becomes harder to read. Easily fixed - give your sidebar headings a background colour so that without the background image - you at least can read the text. Your image links will have alt text appearing once you fix that.
7. Very picky this one - Try in future to think whether you actually need a div before you add it in. It may not always be necessary to stick divs everywhere. For instance - with some of those left hand boxes you've got 5 nested divs when frankly one would do. I'd have:
<div class="leftbox">
<h2>Sidebar Heading</h2>
<ul class="sidebarlist">
<li> etc </li>
</ul>
</div>
It just helps keep the page smaller in size and makes it easier to fix. The thing with CSS is the cascade effect and inheritence. The more divs and ids you have in there - the more complex that inheritance becomes.
|
|
|
|
