8 replies [Last post]
SidP7
Offline
Regular
Last seen: 13 years 42 weeks ago
Joined: 2008-06-19
Posts: 29
Points: 0

This is my first entry to CSS Zengarden. Please review it and tell me what you think. The html is a standard boiler plate CSS code that all entries must have. All i have done is style by designing the graphics and of course writing the CSS code.

Please review it and tell me what you think. Constructive critisim is welcome ! Smile

My first entry -> "Garden of Solitude" at http://www.nrindian.info

Check out other CSS Zengarden entries at http://www.csszengarden.com

Thanks in advance.

Sid

SidP7
Offline
Regular
Last seen: 13 years 42 weeks ago
Joined: 2008-06-19
Posts: 29
Points: 0

sorry about the triple post

sorry about the triple post Sad

Can a MOD please delete the other 2 threads - either my connection was lagging or something went buggy and my message was unintentionally posted three times.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 25 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The other two duplicates

The other two duplicates have been removed.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

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

Well if you want me to view

Well if you want me to view your Zengarden code you'll have to get them to put it up at the Zen Garden, which I only check rarely it is true, but do occasionally just for fun.

Ed Seedhouse

Posting Guidelines

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

SidP7
Offline
Regular
Last seen: 13 years 42 weeks ago
Joined: 2008-06-19
Posts: 29
Points: 0

The entry I have submitted

The entry I have submitted can be viewed at http://www.nrindian.info

Since it's CSS you can easily view the source from your browser. Hopefully the entry will be selected, but seeing as their standard is quite high (and this is my first attempt) i wouldn't be surprised if the site didn't make the cut. Smile

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 36 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Very gorgeous design. My

Very gorgeous design. My husband said Wow too when it first loaded.

Code-wise, it could be slimmed down, but that's just a personal thing. For instance

position:inherit;
margin:inherit;
padding:inherit;
text-align:inherit;

I'm not even sure what that's supposed to do... if text-align was already Left, you've wasted a line of code saying Inherit. If you did need to say text-align: left, then it's the same amount of code, so why not make it more obvious when you're looking at it 3 years from now? Same goes for all the others, you're not saving a line of code so you might as well say the properties you want out loud.

I'm also not a fan of using relative positioning to move stuff around a page. Depending on what needs to go where, it either gets set from the document flow (margins and padding), or gets absolutely positioned.

font-size:9px;

Because this is actually a design submission I won't say anything about 9px fonts, but on any other website, I'd rant and rave about unreadable fonts.

h1, h2, #explanation h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span, #preamble h3 span {
display:none;
}

Personally I prefer image replacement... since that can't happen here, because you can't change the HTML, my second choice would be moving the text a bazillion px offscreen instead of display: none. This is due to (what I think is) a bug in some screen readers, who strangely honour display: none and won't even read the text out. Moving the text off-screen, though, doesn't seem to hide any words from them.

margin-left:auto; margin-right:auto;

There's nothing wrong with that, but it's a good idea to pick a style and stick to it. You've also done margin: 0px auto 0px auto; and margin: 0 auto. Pick one and stick with it-- helps you read better a few months or years later, and makes code look... neater, I think. Same goes for stuff like padding: you've grouped your margins together; you should do so with your padding too:

	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 5px;

p {
	font-family:Georgia, Palatino, Times, Times New Roman, serif;
	font-size:0.7em;
	margin:0px 185px 0px 185px;
	color:#999999;
	font-weight: bold;
	line-height: 1.6em;
	text-align: justify;
	padding-bottom:0.8em;
}

For neatness of code, again, I'd go ahead and wrap most of these in a font shorthand:
p {
font: bold .7em/1.6em georgia, palatino, times, "times new roman", serif;
color: #999;
margin: 0 185px;
text-align: justify;
padding-bottom: .8em;
}
You need to wrap font families with multiple words in the name in quotes. "Times New Roman".

After writing code, try to see what you can remove. There's stuff you just don't need:

#linkList {
...etc...
	visibility:visible; <--this is a default, why mention it?
	display:block; <-- divs are already display block, and even if they weren't, absolute positioning makes them so automatically
...etc...
}

I don't know what Zen Garden people look for in code-- certainly the design, and does it work cross-browser. Your design is, again, gorgeous. Your code is not atrocious, but it's not Zen (simple) either. I dunno if they even do more than glance at it, unless you're doing a neat trick (like in The Zen Of CSS Design by Dave Shea and Molly Holzschlag). There's nothing wrong with your code, as it renders fine. But if you wanted someone to be nitpicky, here I am : )

Not that the HTML is all that nice, since it's old code and they were trying to make it as flexible for designers as possible (can't have both beatiful code AND template-stlye flexibility I don't think).

The design is solid and looks the same in Konqueror, FF1.5, FF2, FF3, Opera 9.27, Opera 9.5, IE7, IE6, and Safari-for-Windows. I think they'll take it. And if you haven't been selling web design services, do so!

I'm no expert, but I fake one on teh Internets

SidP7
Offline
Regular
Last seen: 13 years 42 weeks ago
Joined: 2008-06-19
Posts: 29
Points: 0

Stomme poes : Thank you very

Stomme poes : Thank you very much for that excellent critique and also the kind words regarding the design. It's immensely appreciated! I agree with you on almost all points regarding slimming down the CSS. I was just in such a rush to submit the design (I had a few days between other more tedious programming assignments) that I didn't go back and refine the code. Now that you've pointed out some of the more glaring errors I'm going to take a few hours and iron out all the kinks.

The HTML as you correctly judged is standard and is inflated to allow maximum flexability for the designer, but beautiful CSS is upto the designer and although my prime concern was making it 'work' for all browsers now I'm going to focus on trimming all the unnecessary fluff.

Regarding the image replacement for the 9px font. I did at one point want to go that route, but then i faced the problem of how to include the links. Some designs on Zengarden have used the -1000em text indent hack (if you can call it that) and opted for a full-on image replacement. I didn't because I feel links should be honored above images when it comes to html. Still, I appreciate the problem a 9px font causes when you're viewing the site on a 21+ inch monitor. I will play around with an image replacement and see how it looks (and more importantly how it feels Wink

Once again, thank you for taking the time and effort to help me out. It's a great confidence boost to read that your work is appreciated from someone who knows a great deal about what they're talking about.

Sid

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 36 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Ah, about image

Ah, about image replacement-- if the links aren't

  • blah blah blah
  • and as far as I can see they aren't, so the left -bazillion px might be the best way to do it. If the spans didn't have the text inside them, they could hold an image right over the link. But, they can't-- I only wanted to say that left -bazillionpx would be better than display: none simply for screen readers (who don't go to CSS Zen Garden anyway, at least not to look at the designs : ) So, more of a habit of writing as accessibly as possible, not meaning it matters too much on a visual-design site.

    The 9px thing is a separate complaint. We all see designs, design submissions, and whatnot in very tiny fonts. I guess it just looks more professional or something. The problem is, it's damn tiny, even on a low-rez monitor. Most Zen Garden submissions don't do well on text-enlarge, due to the use of images (set sizes) and absolute positioning. So, one tries to usually start with a font that's not too small. Again, though, this being a design submission, don't change it-- but never ever use it on a web page that you want the general public to actually read. In fact, px sized text itself is not something I'd recommend, except when the text must fit within the area of a background image (and even then...). IE doesn't let users enlarge px text (probably a correct thing to do, as px means px, and is a set size).

    Remember whenever you read anything written by me, a lot of it just air from my butt. They are mostly just opinions : ) Still, good luck with your submission.

    I'm no expert, but I fake one on teh Internets

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 7 years 25 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Quote:beautiful CSS is upto

    Quote:

    beautiful CSS is upto the designer

    Yeah sort of :?

    The design is very nice, I must state that and the fact that my following dislike of zengarden is no reflection on your efforts and I hope it goes rewarded with acceptance.

    I really wish that zengarden would quietly fade way to be frank it's had it's day, I have long long ago lost my love for it and it's stated purpose to draw graphic designers into css development, It has little place in the scheme of things from a coding point of view, static markup, example CSS are all drawbacks and do not present markup and css as I would like it represented. the whole zengarden concept is not aimed at coders but at graphic artists and this doesn't really sit well on this type of forum.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me