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 - [email protected]

Comments and Feedback

Home » Blog » Web Development » CSS

Check out the blog categories for older content

The latest from my personal website,
Mike Papageorge.com

SiteUptime Web Site Monitoring Service

Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:

The Principles Of Successful Freelancing

I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.

The Art & Science Of JavaScript

The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.

The PHP Anthology: 101 Essential Tips, Tricks & Hacks

Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..