CSS - Test Your Skills Number 9 : Note :Quiz now ended and solution posted in post#81
A while back I introduced some simple css quizzes just for fun and while I had some spare time today I have put together another one.
This is pretty simple and some of you should be able to do this straight away but remember to think outside the box.
Here is a screenshot (see atachment in post#18 if link doesn't load) of a layout I have produced. Now all you have to do is create the look of that page. I am not worried about you making the exact positions but the series of boxes when completed must look the same as the screenshot above and overlap in the same way.
The only drawback is that I will supply the html which cannot be altered. The result must work in IE6 upwards and also Firefox 2 and Opera9 upwards.
Here is the html and the only things you can change or add to are the styles inside the style element.
Remember though that the html content inside the body cannot be changed and you can only add valid css2.1.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>Untitled Document</title> <style type="text/css"> * { margin:0; padding:0; } div { width:200px; height:200px; border:2px solid #000; } .b1 { background:red; } .b2 { background:green; } .b3 { background:blue; } .b4 { background:teal; } .b5 { background:black; } .b6 { background:orange; } </style> </head> <body> <div class="b1"> <p>test1</p> </div> <div class="b2"> <p>test2</p> </div> <div class="b3"> <p>test3</p> </div> <div class="b4"> <p>test4</p> </div> <div class="b5"> <p>test5</p> </div> <div class="b6"> <p>test6</p> </div> </body> </html>
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 first correct entries that I receive to give you lots of Kudos. I will decide winners on how quick they solve it and perhaps by how inventive the answer was.
The test looks very simple but will require a little bit of lateral thinking and there may indeed be a number of solutions.
To re-iterate I want you to imitate what you see in the screenshot and I'm not worried that it may not be a functional layout in the real sense.
General Rules:
Html must remain untouched.
Only the css in the head can be altered
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+ and ie6 - 8
No hacks i.e. The same code must work for both 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 compled 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
.
Originally Posted by Paul O'B
Bookmarks