SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 26
Thread: Test your CSS skills #7
-
Dec 23, 2006, 08:52 #1
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Test your CSS skills #7
Hi,
Just in time for some festive fun I have revived this little quiz for a simple one-off test that i hope you find interesting and maybe challenging.
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 some self-smug congratulations at least.
The test sounds very simple but will require a little bit of lateral thinking and there may indeed be a number of solutions. All I want you to do is to place the image supplied 50px inside the right edge of a container using only the html that I supply. (I will also supply minimal css that must remain in effect.)
You cannot alter the html and you can only use valid css2.1 to achieve the result (no javascript or browser tricks just valid css2.1). Although it sounds simple you are not allowed either to put the image in your paint package and add 50px padding to it. The container that this image is placed in is a fluid width so you can't place it xxpx from the left to move it into position. Therefore you can't place it at xx% either as that will change when the window is resized.
To make it easier I only need the example to work in Firefox and Opera (recent versions) but it must work in both with the same code. (If you can find a solution that also works in IE 6 or 7 then that will be bonus points but I couldn't find a reliable solution to this.)
To recap just place an image 50px from the right side of the container (p tag) using css only and no change to the image or html is allowed.
Here is a screenshot of what I want:
And here is the same page resized smaller to show that the image is still in place.
And here is the image to use:
This is the html you must use along with the minimum css to create the container.
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=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> * {margin:0;padding:0} p { margin:50px auto; width:50%; height:200px; border:1px solid red; } </style> </head> <body> <p></p> </body> </html>
General Rules:
No frames or iframes
No javascript or scripting of any kind
No image alteration
No expression,conditional comments, behaviours etc.
Use Valid CSS 2.1
Use Valid xhtml
Must work in Firefox and Opera
No hacks
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 the answer then post a message here but PM me the solution so that other people can still have a go. I will post the winners and their solutions later.
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:
test 2:
test 3:
test 4:
test 5:
test 6:
-
Dec 23, 2006, 11:50 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
HI,
I've just had a couple of relies but it seems I wasn't clear enough in the description above.
You are not allowed to change the html at all. The only change you can make will be inside the css style tags to add your valid css code.
The html will still look like this when you have finished.
Code:<body> <p></p> </body>
-
Dec 23, 2006, 13:27 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Wow - that was quick
We have a winner already and Deathshadow has provided 2 working examples that fulfil all the criteria of the test.
I won't post the answer yet to give others a try at doing this but well done to Deathshadow
It looks like next time I'll have to think of something harder as we have some clever people on the forums these days
-
Dec 23, 2006, 13:34 #4
Well, it's not exactly a solution most people would even think of - much less use since there is, as you mentioned in the requirements, zero support for it in IE. It was actually that one line that gave away the answer for me.
Though I'm wondering if a htc could get around that, but that breaks the rules.
-
Dec 23, 2006, 13:49 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by deathshadow
many thanks
-
Dec 23, 2006, 15:51 #6
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
And to think I just found out about this thread... bummer too.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Dec 23, 2006, 17:08 #7
Figured out a .htc version too - that only requires the .htc to 'enable' IE, just as the csshover.htc 'fixes' :hover, :active and/or :focus
Not too hard to do, but definately a learning experience since I've never written a .htc before... (apparantly it's just a fancy wrapped javascript - ooooh) just because I don't advocate using browser specific stuff, doesn't mean I don't know how
-
Dec 23, 2006, 17:10 #8
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
My solution is in, i'm just hoping what I see as 'lateral thinking' doesn't violate 'No finding loopholes - I'm sure you all know what I mean lol'
-
Dec 24, 2006, 04:09 #9
- Join Date
- Mar 2005
- Location
- Rio de Janeiro - Brazil - South America
- Posts
- 409
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Maujor's solution
My solution was sent.
Mauricio Samy Silva
http://www.maujor.com/
-
Dec 24, 2006, 04:41 #10
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by samy
Originally Posted by dan
Originally Posted by mark
Mind you that's half the fun of this to see the different approaches people take.
So far I have correct entries from:
Deathshadow (2 versions)
Kravvitz
Markbrown4 (loophole version)
If I have missed anyone then let me know.
-
Dec 24, 2006, 05:10 #11
- Join Date
- Mar 2005
- Location
- Rio de Janeiro - Brazil - South America
- Posts
- 409
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Mauricio Samy Silva
http://www.maujor.com/
-
Dec 24, 2006, 05:44 #12
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Ok - Got it now Samy and yes you have a correct solution also so well done
Its more or less what I had in mind and similar to the other entries although you have all managed to find slighly different ways of doing it.
Good work.
-
Dec 24, 2006, 16:50 #13
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
Ok, a solution in now without the loophole
-
Dec 25, 2006, 04:35 #14
-
Dec 25, 2006, 04:35 #15
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I'll Post all the correct solutions I've received on Wednesday.
-
Dec 27, 2006, 09:33 #16
Hi Paul
Good contest - can't find an exact solution though and I am looking forward to seeing the winning code.
This is my (loose) solution which may be of interest - works in all browsers on OSXCode:removed - sorry, should have PM'd. Let me know if you haven't receive the PM yet
It has yet to be proven that intelligence has any survival value.
Arthur C. Clarke
-
Dec 27, 2006, 09:49 #17
Paul.
Where did you get that micrometer widget?It has yet to be proven that intelligence has any survival value.
Arthur C. Clarke
-
Dec 27, 2006, 10:24 #18
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Thanks to all those who took part and it's time to post the winners and their solutions
First of all here is a link to my original example.
And here is the code:
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=iso-8859-1" /> <title>Quiz 7 answer</title> <style type="text/css"> * {margin:0;padding:0} p { margin:50px auto; width:50%; height:200px; border:1px solid red; padding:25px 50px 0 0; text-align:right; } p:after{ content:url(images/arrowpoint.gif); } </style> </head> <body> <p></p> </body> </html>
Most of the solutions provided used similar (after: or beforemethods with slight variations to get the image into position.
However, none of the (non-loophole) solutions worked in IE so I thought I'd share a method which was going to be the original example of mine but I didn't like the fact that it was a litle bit of a hack although it uses no hacks.
Solution 2 (also works in IE as well as Firefox and Opera)
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=iso-8859-1" /> <title>Quiz 7 answer</title> <style type="text/css"> html{ direction: rtl;}/* change page direction*/ * {margin:0;padding:0} p { display:list-item; list-style:inside url(images/arrowpoint.gif); margin:50px auto; width:50%; height:200px; border:1px solid red; padding:50px; position:relative; left:60px;/* for ie*/ } p:before { content:" ";}/* for opera*/ </style> </head> <body> <p></p> </body> </html>
Although background images are sill unaffected by this and will stay at their original positions the rtl does affect the bullets in lists and puts them on the right. Therefore we can assign a list image instead of a bullet and place it at 50px from the right edge.
The p tag isn't a list but we can turn it into a list using display:list-item and that will also allows us to apply a list image to it as well. There are a couple of other little bugs to cure but that's about it.
Members Solutions:
Winner: Deathshadow (3 examples)
The rest follow in order that received the entries:
Kravvitz
markbrown4
maujor
zcorpan
ronw
caryD
Well done to all the above and If I've missed anyone then let me know and I will add you in the list
Now follows each persons entry and it should make sense if you have read the before: and after: pseudo class specs that I linked to above.
Deathshadow:
1) (Interesting negative margin example)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=iso-8859-1" /> <title>Deathshadow 1</title> <style type="text/css"> * { margin:0; padding:0; } p { margin:50px auto; width:50%; height:200px; border:1px solid red; } p:before { display:block; height:12px; line-height:12px; margin:0px 0px -12px -62px; padding-left:100%; content:url(arrowpoint.gif); } </style> </head> <body> <p></p> </body> </html>
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=iso-8859-1" /> <title>Deathshadow 2</title> <style type="text/css"> * { margin:0; padding:0; } p { margin:50px auto; width:50%; height:200px; border:1px solid red; } p:before { display:block; margin-right:50px; height:12px; line-height:12px; margin-bottom:-12px; content: " "; background:url(images/arrowpoint.gif) bottom right no-repeat; } </style> </head> <body> <p></p> </body> </html>
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=iso-8859-1" /> <title>Death Shadow 3</title> <style type="text/css"> * { margin:0; padding:0; } p { margin:50px auto; width:50%; height:200px; border:1px solid red; } p:before { display:block; margin-right:50px; height:12px; font-size:1px; line-height:12px; margin-bottom:-12px; content:" "; background:url(images/arrowpoint.gif) bottom right no-repeat; } </style> <!--[if IE]> <style type="text/css" media="screen"> body { behavior:url(parse_p.htc); } </style> <![endif] --> </head> <body> <p></p> </body> </html>
htc file:
Code:<attach event="ondocumentready" handler="parseP" /> <script> function parseP() { var sheets=window.document.styleSheets; for (var t=0; t<sheets.length; t++) { var rules=sheets[t].rules; for (var n=0; n<rules.length; n++) { var rule=rules[n]; tst=rule.selectorText.toLowerCase(); if (tst.match(":unknown")) { newname='.'+tst.replace(":unknown","_before"); sheets[t].addRule(newname,rule.style.cssText); } } } p_list=window.document.getElementsByTagName('p'); for (t=0; t<p_list.length; t++) { p_list[t].insertAdjacentHTML("afterBegin",'<span class="p_before"></span>'); } } </script>
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=iso-8859-1" /> <title>Kravvitz</title> <style type="text/css"> * {margin:0;padding:0} p { margin:50px auto; width:50%; height:200px; border:1px solid red; position: relative; } p:before { content: "\00A0"; display: block; position: absolute; top: 0; right: 0; margin-top: 40px; margin-right: 50px; min-width: 14px; height: 14px; background-image: url(arrowpoint.gif); background-position: top right; background-repeat: no-repeat; } </style> </head> <body> <p></p> </body> </html>
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=iso-8859-1" /> <title>markbrown4</title> <style type="text/css"> * {margin:0;padding:0} p { margin:50px auto; width:50%; height:200px; border:1px solid red; } p:after { content: 'Hello'; display: block; font-size: 485%; color: white; text-align: right; margin: 50px 50px 0 0; height: 100px; width: auto; background: white url(http://www.pmob.co.uk/temp/images/arrowpoint.gif) no-repeat top right; } </style> </head> <body> <p></p> </body> </html>
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=iso-8859-1" /> <title>markbrown4</title> <style type="text/css"> * {margin:0;padding:0} html { } body { margin:50px auto; width:50%; height:200px; border:1px solid red; } p { margin: 50px 50px 0 0; height: 100px; background: white url(http://www.pmob.co.uk/temp/images/arrowpoint.gif) no-repeat top right; } </style> </head> <body> <p></p> </body> </html>
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=iso-8859-1" /> <title>Maujor's solution</title> <style type="text/css"> * {margin:0;padding:0} p { margin:50px auto; width:50%; height:200px; border:1px solid red; padding-right:50px; } p:before { display: block; width:100%; height:35px; text-align:right; line-height:70px; content: url(arrowpoint.gif) ; } </style> </head> <body> <p></p> </body> </html>
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=iso-8859-1" /> <title>ronw</title> <style type="text/css"> * {margin:0;padding:0} p { margin:50px auto; width:50%; height:200px; border:1px solid red; text-align: right; } p:after { display: marker; content: url("images/arrowpoint.gif"); padding: 0 50px 0 0; } </style> </head> <body> <p></p> </body> </html>
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=iso-8859-1" /> <title>zcorpan</title> <style type="text/css"> * {margin:0;padding:0} p { margin:50px auto; width:50%; border:1px solid red; height:200px; text-align:right; } p:after { content:url(http://www.pmob.co.uk/temp/images/arrowpoint.gif); margin-right:50px; } </style> </head> <body> <p></p> </body> </html>
Code:* {margin:0;padding:0} body { margin:50px auto; width:50%; border:1px solid red; } p { height:200px; margin-right:50px; background:url(http://www.pmob.co.uk/temp/images/arrowpoint.gif) no-repeat right; }
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=iso-8859-1" /> <title>CaryD</title> <style type="text/css"> * {margin:0;padding:0} p { margin:50px auto; width:50%; height:200px; border:1px solid red; text-align: right; } p:before { content: url(images/arrowpoint.gif); padding-right: 50px; } </style> </head> <body> <p></p> </body> </html>
Congratulations to all the above and thanks for taking part. Its obvious I will have to be even more devious in the next quizLast edited by Paul O'B; Dec 27, 2006 at 10:59.
-
Dec 27, 2006, 10:47 #19
-
Dec 27, 2006, 11:10 #20
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
A late entry form rob_d although this is another one that I would class as a loophole entry as its not quite exact and wouldn't work if the p tags width were changed unlike the examples above.
However it was a good attempt so I will post it anyway
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=iso-8859-1" /> <style type="text/css"> * { margin:0; padding:0; } body { background:url(images/arrowpoint.gif) no-repeat 75% 100px; } p { margin:50px auto; width:50%; height:200px; border:1px solid red; padding:50px; } </style> </head> <body> <p></p> </body> </html>
-
Dec 27, 2006, 11:14 #21
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by Rob-D
http://www.iconico.com/index.aspx
Comes in very useful at times
-
Dec 27, 2006, 11:32 #22
-
Dec 27, 2006, 12:15 #23
Oh, I'd like to point out there is a flaw in my htc - any psuedo-classes or psuedo-elements that IE doesn't recognize (like :after) will be treated as :before by the htc... so it's not perfect.
The reason is that IE returns ":unknown" in "selectorText" if the psuedoclass or psuedoelement is unsupported - Does anyone know of a way to get a full psuedo-element name out of a stylesheet in IE without it mangling it?
-
Jan 16, 2009, 08:15 #24
- Join Date
- Oct 2007
- Location
- United Kingdom
- Posts
- 622
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
This is quite a simple solution that seems to work perfectly in all the browsers I have tested it in (including IE6)....
HTML 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=iso-8859-1" /> <title>ro0bear</title> <style type="text/css"> * {margin:0;padding:0} p { margin:50px auto; width:50%; height:200px; border:1px solid red; } p {position: relative; left: 51px;} body { background-image: url('http://www.pmob.co.uk/temp/images/arrowpoint.gif'); background-repeat: no-repeat; background-position: 75% 94px; } /* Span just to illustrate the 50px X 50px point in the corner */ span {background-color: orange; width: 50px; height: 50px; float: right;} </style> </head> <body> <p><!-- Span just to illustrate the 50px X 50px point in the corner --><span></span></p> </body> </html>
ro0bear
-
Jan 16, 2009, 08:56 #25
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Haven't you got any work to do lol
Yes that's a good solution
The only drawback would be that it upsets the centred element but that wasn't a requirement so you've passed
Bookmarks