PDA

View Full Version : Cool CSS On New Client Site

HHI Golf Guy
08-23-2005, 06: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 (http://www.felicelamarca.com) 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, 09:02 AM
CSS is great, that's for sure. One thing that everyone should always keep in mind is to use the correct DOCTYPE (http://www.w3schools.com/tags/tag_doctype.asp).

Some examples:
XHTML Transitional DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML Transitional DTD
<!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 (http://www.browsercam.com/) is a pretty nice tool for developers who need to see their site on different browsers / OSs
gemini
08-23-2005, 04: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, 05:55 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!

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, 05: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, 06:35 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

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, 06: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, 07:10 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).

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, 07: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, 07: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.
HHI Golf Guy
08-24-2005, 09:18 PM
OK Gemini my friend, you got me motivated to go back and check. I did find a few missing DIV and omit tags, and I needed to change a bunch of XHTML strict to XHTML transitional.

But now I need your help. Take a look at any of the video library pages. What do I need to do to validate those pages?
Corey Bryant
08-25-2005, 03:39 PM
You might check out SMIL When You Play That (http://www.alistapart.com/articles/smil)
gemini
08-25-2005, 08:15 PM
Sorry, couldn't check in any earlier..

I actually tried valiadating the home pages - nothing more and its still not validating XHTML. There are about 14 minor issues that w3c finds.
HHI Golf Guy
08-25-2005, 09:09 PM
Sorry, couldn't check in any earlier..

I actually tried valiadating the home pages - nothing more and its still not validating XHTML. There are about 14 minor issues that w3c finds.

This is strange. When I copy and paste the code on the W3C validation page it validates. When I test by URL it does not.

Oh wait - I know what it is. It's the include footer file that did not validate.
gemini
08-26-2005, 05:51 AM
Congratulations it is perfect!

BTW, W3C have me a tip of the day after validated your page:

"Tip Of The Day: Use <h1> for top-level heading"

you might want to look into it. I just read a good observation at seroundtable recently - http://www.seroundtable.com/archives/002429.html And I agree with the statement that H1 is to built correctly tructured documets.
HHI Golf Guy
08-26-2005, 08:22 AM
Thanks for the heads up and spurring me to correct it soon.

Congratulations it is perfect!


"Tip Of The Day: Use <h1> for top-level heading"

My top level heading is an H1. MY general structure is:

H1
H2
H3
H3
H3...
gemini
08-26-2005, 08:33 AM
Oh, i'm sorry - I didn't look in the source code - I automaticaly assumed that the tip was given based on the validity of the code :)lol
frobn
08-26-2005, 04:08 PM
Congratulations it is perfect!

BTW, W3C have me a tip of the day after validated your page:

"Tip Of The Day: Use <h1> for top-level heading"

you might want to look into it. I just read a good observation at seroundtable recently - http://www.seroundtable.com/archives/002429.html And I agree with the statement that H1 is to built correctly tructured documets.I have written often on heading tags. Here are some references for those who might be interested.


Bolded key words (http://www.realestateforum.com/showthread.php?t=347) post #6


Writing for the Web using heading and style tags (http://www.realestateforum.com/showthread.php) post #1

example... (http://cssdesignmagic.com/examples/heading-tags.html)

Title of the article -
Why use background images? (http://thebroadwaygroup.com/wordpress/)
VicBilson
05-23-2007, 06:30 AM
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.

I really like your solution of providing a blog page for your clients to post to their hearts content. Providing the ability for the client to be able to make changes at will has been a challenge for me as most don't have the budgets to develop out a fully database driven site.

- Vic Bilson
jeff8j
05-28-2007, 09:26 AM
Thats great do you offer any services?
HHI Golf Guy
05-28-2007, 12:05 PM
FWIW, this is a very old post and I have since removed that CSS trick from the site.
HHI Golf Guy
05-28-2007, 12:08 PM
Thats great do you offer any services?

I'm not sure who you directed this to Jeff, but if it was me we are not currently accepting any new clients. It looks like our next opening will be somewhere around Sept-Oct of this fall.