CSS Off Entry
I mentioned CSS Off earlier in the week, but I wasn’t sure if I was going to have time this weekend to participate. As fate would have it, I happened to be browsing my feeds late Friday night and saw the post pop up that the files were ready. I figured I’d at least download the PSD and check it out. Of course as soon as I start poking around in the file, I was hooked. I started slicing stuff up and thinking about code and 90 minutes later, I was done! I think I might be addicted =)
Did I screw anything up?
Loading ...
1
huge useless whitespace in the footer. in FF.
Comment by V1 — April 6, 2008 @ 7:43 am
2
I believe you were supposed to integrate the use of microformats, hcalendar, and hcard. But other than that your markup looks very nice!
Comment by Laura — April 6, 2008 @ 7:52 am
3
arg, cant edit comments :P, ther should bhttp://css-tricks.com/css-off-entry/#comment-12425
CSS Off Entry - CSS-Trickse a href in the button in the header (create your own hover for it ?)
pictures of pests should be ahrefs also. that would be all i could find in few secs of looking at your template..
header that u have as picture should have text replacements (div right_top)
main content Carpenter Ant Damage Assessment Seminar (Part 1) should be headings? instead of dts (SEO reasons) might score points?
footer http://www.cssoff.com should be href… i would suggest u check your template over a few more times, instead of thinking your done.
I can probly fine more errors if took a closer look.. but dont have time for it..
Comment by V1 — April 6, 2008 @ 7:54 am
4
Chris - Glad to see you participated(: We had 37 entries this time, which is a significant increase from last time (thanks for the link love). We’ll obviously keep everyone posted on cssoff as the judging begins/continues.
Comment by Dan Ott — April 6, 2008 @ 8:02 am
5
@Laura: Ah! I totally dropped the ball on the Microformats. Oh well. I’ve never actually used them before, so that would have really increased the time I would have put into this. I probably should start learning about those though. Now that I’m all hip and supporting OpenID and stuff.
@V1: Yeah there were probably some liberties I could have taken on what should have been links. There was no real way to tell from the PS document, but from a usability perspective I could have taken a better guess. I kind of like the use of DL’s in the seminar. I do believe in the SEO benefits from header tags, but these will be constantly swapping out and not a permanent fixture like a header, so I thought it might make more sense. The issue here was speed, and it was the wee-hours of the morning, so certainly there was some mistakes =)
@Dan Ott: Thanks for putting all this together, it was a great idea and I think you did a good job executing it.
Comment by Chris Coyier — April 6, 2008 @ 8:26 am
6
There is a huge block of grey underneath the footer, I’m using IE7.
Comment by Fabian — April 6, 2008 @ 9:32 am
7
@Fabian: Ah yes, I see that now. I should have probably used padding at the bottom of the footer div instead of margin, since the background of the footer is white but the background of the bottom area is that gray. I should have also probably made the background of the top section that gray color, so that if it pushes below it would still connect a bit better to the bottom section.
Comment by Chris Coyier — April 6, 2008 @ 11:09 am
8
Alright, well it’s a nice entry anyway. It’s not easy to convert a PSD file into a webpage in such a short time. My compliments!
Comment by Fabian — April 6, 2008 @ 11:33 am
9
Hey Chris
Love the site. It has helped me learn CSS greatly.
The conversion looks good but when I resize my fonts some of the areas are not expandable. Like the header and the 2 gray boxes on the right.
- Cal
Comment by mayhemstudios — April 6, 2008 @ 3:22 pm
10
My only other suggestion would be to set a background colour for the big top brown box, so us on slow (capped!) connections can still read the text while the background image loads. Otherwise, looks pretty good.
Comment by Sid — April 6, 2008 @ 3:25 pm
11
The only major thing I can see is that IE6 is having a lot of issues with the menu.
Comment by Max — April 7, 2008 @ 9:43 am
12
@Max - the competition wasn’t aiming at IE6, that is, the entrants aren’t being marked on IE6 perfection. I can’t wait for the day nobody uses IE6
@Chris - I haven’t really used microformats either purposefully, but they’re sort of interesting. BTW - I love your comment feature how it fills in a preview for me as I type away - very cool!
Take care
Comment by Laura — April 7, 2008 @ 12:27 pm