7 replies [Last post]
livingegg
Offline
Regular
Last seen: 16 years 7 weeks ago
Joined: 2006-06-20
Posts: 12
Points: 0

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:)

http://www.intouchproductions.org

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

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.

Verschwindende wrote:
  • CSS doesn't make pies

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 4 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

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!

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

livingegg
Offline
Regular
Last seen: 16 years 7 weeks ago
Joined: 2006-06-20
Posts: 12
Points: 0

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.

livingegg
Offline
Regular
Last seen: 16 years 7 weeks ago
Joined: 2006-06-20
Posts: 12
Points: 0

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?

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

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

Ed Seedhouse

Posting Guidelines

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

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

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 Wink

But you're right partially; for example, a map, that would definitely need to be an embedded <img> Laughing out loud

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 Tongue

Verschwindende wrote:
  • CSS doesn't make pies

livingegg
Offline
Regular
Last seen: 16 years 7 weeks ago
Joined: 2006-06-20
Posts: 12
Points: 0

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.