Css - Semantics Challenge.

Published in CSS on Monday, February 23rd, 2004

You think you know your stuff? Lets see what you got!

An aspect of a design that I am working on provided me with a bit of a challenge. The following image is the piece of design in question: Image for the challenge

What is the challenge?

Take this image, and come up with the sematically valuble markup and CSS to make this happen. Things to keep in mind:

  1. This is a search result listing for a real estate website (so the cartoon of the house isn't part of the design, it's 'data'). As it is a search result listing it must be repeatable, that is, the ability must exist for there to be >1 of these on a page.
  2. The title, in this case 'Cabo Cervera', will be longer at times and may overlap the left edge of the two links in the bottom right.
  3. The box, from the upper blue line to the lower one, is 96px high, and 505 pixels wide.
  4. The image of the house is available here.

Deadline - End of the week! Friday the 27th of February.

What's the prize?

No prizes. This is a chance to flex your CSS and markup muscle. Solutions will be posted together here on fiftyfoureleven for all to see.

If anyone actually does try...

Send me a link to your example, or send me your example, and I'll show you mine(!). Maybe together we can learn something!

I'm still without comments here, so for now communication with me is via e-mail - mike@fiftyfoureleven.com

Comments and Feedback

cms_loopIntoHTML: $data must be an array

Check out the blog categories for older content