Wed, 2006-06-21 18:28
Hi. I am an "old-school" designer brought up in the world of image-slice-table based sites. I am trying to make the transition into valid xhtml / pure css design. So this is my first site designed in this fashion.
The site validates with the single exception of the embed tag i've had to use for the flash menu - I found a tutorial on 'a list apart' about a method to embed flash using valid code but I've had problems with that method so i'm still working on the flash part. With that exception it validates fine - hopefully i'm not breaking any rules:)
Wed, 2006-06-21 18:33
#1
First Tableless Site
Not bad for a first attempt!
There are some ways you could make it even better and learn more about CSS in the process.
For example, the "announcement" image - read up on IMage Replacement, the headlines would be better suited as a <h3> tag.
Also, have a look at the "Divitis" article in the How To section, it should give you a lot of pointers on how to condense and simplify your HTML.
Wed, 2006-06-21 20:20
#2
First Tableless Site
the four images at the top right corner should have alt="" AND title"" tags
if you turn off the images on your site, it's almost impossible to navigate and read.
The flash is not nesecary, you can get almost the exact same thing with CSS - besides, do you honestly need the exact same navigation at the top and on the left?
The logo looks pixelated on the edge of the white.
In firefox 1.5 the Flash navigation sits about 1-2 pixels higher then IE and it covers the grey line going across above it.
You should look into faux columns and make that black line run all the way down the left side of the page.
The colors and the layouts look good - these are just things that i noticed. Good luck and good job!
Wed, 2006-06-21 21:52
#3
First Tableless Site
RE: Deuce
Accessibility is something I definitely neglected for this site. Can I use the webdev toolbar for firefox to turn off images and check accessibility in general?
I know the flash is not necessary but the client really wanted it. Because the flash does not load in some situations I decided to duplicate the same menu on the top, just in case.
Quote:
You should look into faux columns and make that black line run all the way down the left side of the page.
The biggest problems I had were indeed caused by divs not stretching vertically. When you say "black line" are you referring to the sidebar "stripe" that the flash menu is in? It is actually set to stretch 100% vertical in the container div but it is not doing this. The black rectangle that runs behind the main box should be stretching past the whole thing and then a little more, at least in all the browsers I checked it is working - but I achieved this by a kind of outrageous means: that black stripe is a container div for the main box and then the box is offset inside of it, and there are a few characters in black placed afterwards to get it to stretch a couple lines past.
Also - the pixel "overlap" you saw where the top of the flash menu meets the header is only visible in firefox - in IE it is flush. This happened because IE was creating a mysterious gap, and I offset the div to compensate for this but now it is not correct in firefox!
RE: thepineapplehead
Thanks for the resources, i'll check those out. About the image replacement (eg background images on a div, right?) - I was reading somewhere that it is a bad idea to overuse this, because of accessibility reasons - if the image is a piece of content and not an aspect of the layout then it should be placed using the img tag --- just a thought.
I realized afterwards that I created unecessary css classes where I should have been using H* tags - that is probably something i'll end up changing.
Wed, 2006-06-21 22:06
#4
First Tableless Site
Quote:
Also, have a look at the "Divitis" article in the How To section, it should give you a lot of pointers on how to condense and simplify your HTML.
Reading over your post (and then looking at my code) I realize that I *must* have divitis, even though I don't even know what it is yet. I can't find this article - can you give me a URL please?
Wed, 2006-06-21 22:57
#5
First Tableless Site
livingegg wrote:
I *must* have divitis, even though I don't even know what it is yet. I can't find this article - can you give me a URL please?
Did you see the search box on the index page? Try submitting "divitis" and see what comes up.
<lecture>
To use this site well you really should get familiar with the tools provided.
</lecture>
[-X
Thu, 2006-06-22 08:05
#6
First Tableless Site
Egg,
Quote:
if the image is a piece of content and not an aspect of the layout then it should be placed using the img tag
The image is simply a nicer graphical representation of a heading. If you disable images, you get no titles. If you disable styles, you get a big image.
If you use image replacement, you get text for screen readers AND an image for web browsers 
But you're right partially; for example, a map, that would definitely need to be an embedded <img> 
RE: the divitis article, you don't have a BAD case at all; I was merely pointing it out so you could condense your HTML a lot more. For example, your navigation list has a class and so does each individual <li>. THis is unecessary and explained in the divitis article.
http://www.csscreator.com/css-forum/ftopic19126.html
Third topic in the How To section 
Fri, 2006-06-23 00:04
#7
First Tableless Site
Alright I appreciate that. I had the feeling I was creating a lot of redundancy in my code so studying this article will come in handy - thanks.