The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Test your CSS skills quiz #10

What better way to while away an hour or so than by taking part in a little quiz - just for fun

This quiz is pretty straightforward and some of you should be able to do this straight away but even if you find this easy you should still look at innovative ways of completing the task.

Look carefully at the attachment to this post which shows a screenshot of a layout I have produced. Now all you have to do is create that coloured box. I am not worried about you making the exact positions etc or using the same colours but the effect should be the same including partially coloured text background and borders.

Note also that this box is a fluid width and look at the attachment to see how the elements scales up and down. The text is fluid also and takes on a different color in each quadrant of the box and indeed if the text overlaps two quadrants then half a letter may be one color and the other half a different color. Study the attachment carefully to see this in action.

I was going to set a load of rules to make it harder but that may limit your innovation but the main rule is this must be valid css2.1 and valid html. However to make things interesting it only needs to work in Firefox 2+, Safari3, and Opera 9+. (I have ignored IE for this test although IE can accomplish this layout with a little hack.)

The winners will be decided on a number of criteria which means we may have a number of winners based on the following:

1) First correct answer received
2) Simplest Solution
3) Most innovative Solution
4) Smallest amount of html used
5) Smallest amount of CSS used
6) Any mixture of the above

Therefore you might like to try constructing this without using any classes or id's in the html. Or perhaps you would like to use more html so that the CSS is minimal. Or perhaps you may go for an unorthodox or innovative approach and not worry about file size.

If you have a very innovative solution that only works in one of the mentioned browers then still PM the code and is it may be interesting to others and be worth a special note.

I will give you some html as a starting point but this is only your base and you can add to the html and css as much as you like.

The result must be valid html and css2.1 though so that this layout could actually be used for real.

As usual some of you will know the answer to this straight away so please PM me your answer and do not post in the thread and spoil it for others.

There are no prizes but I will announce the correct entries that I receive to give you lots of Kudos.
General Rules:

Html and CSS can be altered to suit
No javascript or scripting of any kind
No images or background images.
No expression,conditional comments, behaviours etc.
Use Valid CSS
Use Valid xhtml
Must work in Firefox2+, Safari3, Opera 9+
No hacks the same code must work in above browsers.
No finding loopholes - I'm sure you all know what I mean lol

As usual there are no prizes other than the self-satisfaction of completing this. If you have a valid layout then post a message saying completed but don't post the solution and spoil it for others. Please PM me the solution so that other people can still have a go.

As with the other tests these aren't meant to be suggestions for layout but more an exercise in using css to achieve something different and having fun at the same time.