CSS - Test Your CSS Skills Number 11 : Quiz now ended - Solution posted in post #64
Back by public demand we have another little CSS quiz to stretch your imagination.
This quiz was suggested by Erik.j and should keep you amused for a while.
As I always say this quiz is really quite 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.
In order to allow beginners to complete there are 2 versions shown in the attachment. The simpler version omits the centre dividing line.
Look carefully at the attachment which shows actual screenshots of the layout at different screen sizes required. I am not worried about you making the dimensions exactly the same but every element must be perfectly centred in the viewport. Allowing for rounding errors no element should be more than 1 or 2 pixels adrift from the exact central position.
Take care with this and account for border, margin and padding correctly.
The “x” in the center is also perfectly centred and should resize with text resize and still stay centred. (The simpler version can skip the text resize and use a fixed font-size.)
Must be centred perfectly in viewport (within 1 or 2 pixels at most)
Html within the body tags not to be altered (only changes to the css in the head allowed)
No absolute positioning
Must work in either IE6 upwards or Firefox or Opera (modern versions)
ok - I'm going to change the rules slightly and I will accept an answer that is perfect in only one of the browsers mentioned. If you can make it perfect everywhere then all the better.
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
Html between the body tags must remain untouched.
Only the css in the head can be altered
No images or background images.
No expression,conditional comments, behaviours etc.
Use Valid CSS
Use Valid html
Must work in at least one of the modern browsers (or IE6)
No finding loopholes - I'm sure you all know what I mean
Here is the html to use as a starting point: (remember you can only add css in the head and leave the body html alone)
As usual there are no prizes other than the self-satisfaction of completing this. If you have a valid layout then post a message here but PM me the solution so that other people can still have a go. I will decide on the best layout this time rather than the first one I receive.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<p> <span>X</span> </p>
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.
Answers will be given later next week depending on how it goes
Have fun .
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