CSS Zen Garden Design

Ryan Fait · February 19th, 2007, 12:56 AM

I took some time out of my day to throw this CSS Zen Garden submission design together. It's taken about an hour and a half so far, but I haven't tested in IE yet, so please view in Firefox or Safari. If attribute selectors don't work like I think they don't in IE, I'll have to rethink how I want the dot on the question mark to look in it.

Any thoughts, critiques, suggestions on the design? I'm pretty hooked on the colors, so please don't complain too loudly about that.

http://ryanfait.com/work/csszengarden/

Ryan Fait · February 19th, 2007, 06:51 AM

Just did some testing in IE. Works perfectly 'cept for the HTML/CSS buttons. It shows up as two CSS buts in IE, so just ignore that if you use Internet Explorer.

Lchad · February 19th, 2007, 08:37 AM

SWEET!!! Very fresh and unique! My only thought is the dot in the question mark is hard to see in the hover over state. Keep the white background but maybe change the text to the lighter gray you have on the other links!

BGarner · February 19th, 2007, 07:39 PM

Your visited links show up with a strike through. I don't know if that's what you were going for, but it makes them harder to read in a small font size.

Ryan Fait · February 19th, 2007, 11:09 PM

Thanks for the feedback!

Quote:

My only thought is the dot in the question mark is hard to see in the hover over state. Keep the white background but maybe change the text to the lighter gray you have on the other links!

I'm a little confused, Linda.

Quote:

Your visited links show up with a strike through. I don't know if that's what you were going for, but it makes them harder to read in a small font size.

Yeah, I would never do that on a regular design, but I wanted it to be glaringly obvious that you've visited that page due to the nature of CSS Zen Garden. I agree with you, though, so I compromised and took out then line-through when your mouse hovers over the link.

Oh yeah, and Rob helped me with an HTC, so now the links in the question mark works as they are supposed to in IE. Tested in all major browsers now, so it's just about finished

Ryan Fait · February 21st, 2007, 10:46 PM

Okay, got that text darkened up for ya Linda

Moved the XHTML/CSS/CC... to the side and put them in boxes. They were pink for a while, but I decided it the monotone layout was too good to throw down the toilet.

Any other things before I get in touch with the guy over at CSS Zen Garden?

Lchad · February 22nd, 2007, 07:09 AM

Oh I'm very happy now!!! You are good to go in my opinion! Let us know if "the guy" posts it up!!!

uqwebdesign · February 22nd, 2007, 08:34 AM

Looks good, really clean. Only thing I'd say (I'd can't test in work I only have IE) is that does the design allow text to be upsized 3 times without the design being compromised? It's part of the submission guidelines for zengarden.

In IE on the "largest" setting the subheadings don't move down according to the font size, though I know it's upsize steps are bigger than ff's so you could be ok

Ryan Fait · February 22nd, 2007, 07:05 PM

Nice find!

Only two elegant text size increases are required, but I changed the a pixel measurement to ems and now it goes up to 3 in Safari. There's nothing I can do about the design titles from overlapping in the top list, however. Absolute positioning destroys any possibility of that.

frinkky · February 24th, 2007, 06:39 AM

All i'd say is the serif typeface used in the images for the section titles makes them slightly difficult to read, the thin parts of the letters almost fade out to nothingness. I'm viewing at 1280*1024