SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 89
Thread: Test your CSS skills quiz #10
-
Jan 18, 2009, 05:58 #1
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Test your CSS skills quiz #10
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>
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#post4116758Last edited by Paul O'B; Jan 23, 2009 at 12:01.
-
Jan 18, 2009, 06:58 #2
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'm in.
-
Jan 18, 2009, 07:29 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
Jan 18, 2009, 07:47 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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.
-
Jan 18, 2009, 08:47 #5
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
I'm in...
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Jan 18, 2009, 09:31 #6
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
I have everything but the different text color...why isn't that working...wtf...
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Jan 18, 2009, 09:36 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
Jan 18, 2009, 09:46 #8
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
...but logically it should be working....that makes no sense at all...wtf.
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Jan 18, 2009, 15:35 #9
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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.
-
Jan 18, 2009, 16:48 #10
- Join Date
- May 2007
- Location
- Countryside, Sweden
- Posts
- 3,407
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Submitted a try with the smallest amount of html without breaking anything. Hope it at least is a little different than expected.
Happy ADD/ADHD with Asperger's
-
Jan 18, 2009, 16:57 #11
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi Erik,
Thanks for your entries - the first one was brilliant(the others were good also)
-
Jan 19, 2009, 04:21 #12
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Is this one too hard?
I'm not getting many entries for it
-
Jan 19, 2009, 04:53 #13
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
i shall try too.
-
Jan 19, 2009, 05:34 #14
-
Jan 19, 2009, 06:24 #15
- Join Date
- Oct 2007
- Location
- United Kingdom
- Posts
- 622
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
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
-
Jan 19, 2009, 06:30 #16
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Jan 19, 2009, 06:40 #17
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Just had some great entries from ro0bear, Erik, and TommyMany 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.
-
Jan 19, 2009, 07:28 #18
- Join Date
- Dec 2007
- Location
- Carlsbad, California, United States
- Posts
- 3,658
- Mentioned
- 15 Post(s)
- Tagged
- 0 Thread(s)
So far, I've tried, but only failed...
-
Jan 19, 2009, 07:50 #19
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
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?Last edited by YuriKolovsky; Jan 19, 2009 at 09:00.
-
Jan 19, 2009, 08:45 #20
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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
-
Jan 19, 2009, 08:45 #21
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
Jan 19, 2009, 08:47 #22
-
Jan 19, 2009, 10:57 #23
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
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!!
-
Jan 19, 2009, 11:21 #24
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi YuriKolovsky,
Yes that's it well done
Hope you had fun trying
-
Jan 19, 2009, 11:35 #25
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
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
Bookmarks