Test your CSS skills quiz #10

**Paul O'B** · Jan 18, 2009, 04:58

CSS - Test Your Skills Number 10 : (Quiz ended: Solution posted in posts #73 & #74)

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.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Colored box</title>
<style type="text/css">
* {
    margin:0;
    padding:0
}
div{
    width:60%;
    margin:20px auto;
    font-size:124%;
    min-width:400px;
}
</style>
</head>
<body>
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
</div>
</body>
</html>

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.

Have fun .

Paul

PS. : In case you missed the other tests you can find them here:
test 1: http://www.sitepoint.com/forums/showthread.php?t=168555
test 2: http://www.sitepoint.com/forums/showthread.php?t=169710
test 3: http://www.sitepoint.com/forums/showthread.php?t=170190
test 4: http://www.sitepoint.com/forums/showthread.php?t=171221
test 5: http://www.sitepoint.com/forums/showthread.php?t=172472
test 6: http://www.sitepoint.com/forums/show...est+css+skills
test 7:http://www.sitepoint.com/forums/show...44#post3216244
test 8:http://www.sitepoint.com/forums/show...64#post3235664
test 9:http://www.sitepoint.com/forums/show...58#post4116758

**Centauri** · Jan 18, 2009, 05:58

I'm in.

**Paul O'B** · Jan 18, 2009, 06:29

Originally Posted by Centauri

I'm in.

I thought you might be

**Paul O'B** · Jan 18, 2009, 06:47

Wow that was quick and Graeme (Centauri) already has sent me a correct entry within the hour

Therefore the rest of you should concentrate on innovation now

Keep sending your entries in either way and I will list the correct ones.

**RyanReese** · Jan 18, 2009, 07:47

I'm in...

**RyanReese** · Jan 18, 2009, 08:31

I have everything but the different text color...why isn't that working...wtf...

**Paul O'B** · Jan 18, 2009, 08:36

Originally Posted by RyanReese

I have everything but the different text color...why isn't that working...wtf...

I'm not going to give any clues yet but you are missing a vital concept

**RyanReese** · Jan 18, 2009, 08:46

...but logically it should be working....that makes no sense at all...wtf.

**Paul O'B** · Jan 18, 2009, 14:35

Congratulations to ro0bear for another correct entry.

Remember you can enter as many entries as you like as long as each has something different to offer.

**Erik J** · Jan 18, 2009, 15:48

Submitted a try with the smallest amount of html without breaking anything. Hope it at least is a little different than expected.

**Paul O'B** · Jan 18, 2009, 15:57

Hi Erik,

Thanks for your entries - the first one was brilliant

(the others were good also)

**Paul O'B** · Jan 19, 2009, 03:21

Is this one too hard?

I'm not getting many entries for it

**YuriKolovsky** · Jan 19, 2009, 03:53

i shall try too.

**Paul O'B** · Jan 19, 2009, 04:34

look forward to your entry

**ro0bear** · Jan 19, 2009, 05:24

The lack of numbers might be because its not advertised on the highlighted threads unlike the last one. Might also be because it was launched on a Sunday, maybe more people will enter through the week?

Im only assuming though

**YuriKolovsky** · Jan 19, 2009, 05:30

or its too hard and some people don't want to look as stupid as me in the end...

when i looked at the example at first, i didn't see that the text changed its color,

i got the background things working within a minute, but the text effect got me puzzled,

oh, and when will the contest/quiz end?

p.s. i can't believe how badly the Internet is cluttered with useless and low grade css, finding anything usefull is much too hard.

**Paul O'B** · Jan 19, 2009, 05:40

Hi,

Just had some great entries from ro0bear, Erik, and Tommy

Many thanks

I'll let the quiz run for a few days more unless it goes quiet and then I'll post the entries I received.

**PicnicTutorials** · Jan 19, 2009, 06:28

So far, I've tried, but only failed...

**YuriKolovsky** · Jan 19, 2009, 06:50

yay i got it working!!
works in every browser, including ie6, valid css, no hacks.

and you can resize the main div and the other boxes adapt.

nothing brilliant though, as i'm not really good at css 2/3, i only know css classic.

but still, nothing beats this feeling of self satisfaction after solving a puzzle.

edit:
tip to those who can't get it to work.
read Paul O'B original post clearly, he gives away the answer in the way that he writes the conditions.

edit: ah i got it almost right, well back to the drawing board...

now i will hope that my answer actually validates...
what do you think Paul O'B?

**Paul O'B** · Jan 19, 2009, 07:45

Hi YuriKolovsky,

That was a good entry but you misread one of the instructions

When I said resize I meant that the element resizes with the window and has a fluid length. Not just resizes on text resize.

Sorry if I was unclear but I'm sure you can fix it

**Paul O'B** · Jan 19, 2009, 07:45

Originally Posted by EricWatson

So far, I've tried, but only failed...

Don't give up -I'm sure something will click soon

**Stormrider** · Jan 19, 2009, 07:47

I'll try this when I get home

**YuriKolovsky** · Jan 19, 2009, 09:57

ok now i'm pretty sure i've done it.
it also breaks in ie6 in very small screen sizes, which can be fixed with a small hack, which meets up with the original requirements!!

**Paul O'B** · Jan 19, 2009, 10:21

Hi YuriKolovsky,

Yes that's it well done

Hope you had fun trying

**YuriKolovsky** · Jan 19, 2009, 10:35

eagerly awaiting the end and the revealed solutions
(and pondering more solutions)

the perfect excuse not to do the stuff that your supposed to be doing!!!

Hope you had fun trying

i had, but getting it working was much more fun.

The SitePoint Forums have moved.

User Tag List

Thread: Test your CSS skills quiz #10

Thread Tools

Display

Test your CSS skills quiz #10

Bookmarks

Bookmarks

Posting Permissions