Cool CSS On New Client Site

**HHI Golf Guy** · 08-23-2005, 07:53 AM

I just finished a web design for a new client. You can see the new site by following this Hilton Head real estate link.

The site uses some very cool CSS including z-index techniques. Take a look at the logo box and menu box down the left hand side. Do you see the shadows for these boxes? The boxes and shadows are not images, they are CSS elements.

I have 4 unique layers on these pages. The shadow is actually an offset box on a layer just below the menu box layer. The shadow also uses the CSS opacity element so that you can also see throught to the layer below the shadow.

Pretty neat, huh? The real trick was getting it to render properly with Internet Explorer. It was easy to get the desired look in Firefox, but I needed to develop a (new?) hack to get it to work in IE. In fact, there are a bunch of CSS hacks to get the site to render the same in IE, Firefox, Mozilla, and Opera.

CSS is way cool!

**Corey Bryant** · 08-23-2005, 10:02 AM

CSS is great, that's for sure. One thing that everyone should always keep in mind is to use the correct DOCTYPE.

Some examples:
XHTML Transitional DTD

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML Transitional DTD

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

to ensure proper reading by each browser.

BrowserCam is a pretty nice tool for developers who need to see their site on different browsers / OSs

**gemini** · 08-23-2005, 05:40 PM

That is very cool HHI GG! I've tried opacity tool some time ago and found it as a pretty magic thing. Congrats, really nice disign! A few little things I felt like were left out - the picture of your client is hanging in the air - I would play with it and see if I can have a little bigger pictures and connect it to the line where the ocean ends (below). Also the pictures of the animals at the bottom - see if they would look better with borders, - in most cases they do.

Great layout!

**HHI Golf Guy** · 08-23-2005, 06:55 PM

Originally Posted by gemini

That is very cool HHI GG! I've tried opacity tool some time ago and found it as a pretty magic thing. Congrats, really nice disign! A few little things I felt like were left out - the picture of your client is hanging in the air - I would play with it and see if I can have a little bigger pictures and connect it to the line where the ocean ends (below). Also the pictures of the animals at the bottom - see if they would look better with borders, - in most cases they do.

Great layout!

Thanks. There are a few things that I originally had that were different including some that you mentioned and what I consider a better sunset picture with more oranges and reds. But sometimes you have to defer to the client.

**gemini** · 08-24-2005, 06:48 AM

Gotcha

That happens all the time - the worst part when they want the ability to create their own pages and be able to change current things as easy as WYSIWYG goes

lol

**HHI Golf Guy** · 08-24-2005, 07:35 AM

Originally Posted by gemini

Gotcha

That happens all the time - the worst part when they want the ability to create their own pages and be able to change current things as easy as WYSIWYG goes

lol

I have a solution for that. I set up a directory for them to post pages to and then set the robots.txt so that directory is not spidered. They get what they want and I do not have to worry about any potential SEO issues.

**gemini** · 08-24-2005, 07:24 PM

This is good, but you can not avoid HTML and visual mess which reflects on your image if you have your signature somewhere on the side indicating that it is your work (like in the example you presented).

**HHI Golf Guy** · 08-24-2005, 08:10 PM

Originally Posted by gemini

This is good, but you can not avoid HTML and visual mess which reflects on your image if you have your signature somewhere on the side indicating that it is your work (like in the example you presented).

Agreed, but I don't worry too much about that. It's easy to bury their link somewhere

The other solution - and one that I have for a new client - is to set them up with a free blog page on blogger or somewhere else. I can format it so that the look of the blog ties in to the web site and they can post away.

**gemini** · 08-24-2005, 08:12 PM

I just noticed you're using XML closing slashes in the tags at the same time no DOCTYPE identified (I think was mentioned already); from here - I wasn't able to validate HTML neither CSS.

This is not really my concern since I don't have my own HTML validated, but I know it is much easire to do that from the start than redoing it later if tending to perfection

BTW, I liked your submission rules/requirements and would like to ask your permission to use some ideas - I have my rules in the direcory too, but my english is comparely poor and I know I need some adjustments + additional good ideas always great help. Here is what I've got so far, but would like to add more http://www.ibsteam.net/wsnlinks/submission_rules.html

**HHI Golf Guy** · 08-24-2005, 08:55 PM

What page are you looking at when you see no doctype? I use a combination of XHTML strict and transitional as well as HTML 4. With only a few exceptions, my pages validate on W3C.

I will admit that I ran my templates and most of the final pages through the W3C validator, but not all of them. I usually wrap around and touch up later - especially if my client has an urgent need to get their site up ASAP.

Why different doctypes? Sometimes it's easier to use other formats on complex forms pages.

I have so many hacks in my CSS that I haven't even thought of validating the file

Sure - go ahead and use any of the rules that you like. The more people that get strict on links, the better all of our exchanges will be. Be forwarned, though - people still try and sneak one by.