SitePoint Sponsor |
|
User Tag List
Results 26 to 50 of 58
-
Mar 18, 2009, 16:40 #26
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
:O It should. I lied-my hovering breaks in IE7/Safari-you need to hover over the smiley face and then outside of it for the eyes to actually move-interesting.
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Mar 19, 2009, 04:09 #27
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I have a very good entry for Quiz B from Yurikolovsky with some extra graphic enhancements lol. Well done - it made me laugh
Can anyone better it
-
Mar 19, 2009, 04:59 #28
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Yes Yurikolovsky has bettered his own example
-
Mar 19, 2009, 06:41 #29
- Join Date
- Oct 2007
- Location
- United Kingdom
- Posts
- 622
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
-
Mar 19, 2009, 07:59 #30
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Lol Yuri that was fantastic.
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Mar 19, 2009, 09:08 #31
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
xD thanks guys
edit:
only now do i test it in other browsers, and yes i see the "eyes only move after face hover" bug in safari, chrome
the corners are completely square in opera, and IE (all versions), and it completely breaks in IE versions below 8
ryan you said you had round corners in ie7, and opera?
RyanReese
Mine only fails in IE6 and that is because of the selectors-I could have gotten away with not using it
is there even a reasonable way to get round-border's in opera? (i can't believe it's not working, in opera!!)Last edited by YuriKolovsky; Mar 19, 2009 at 12:29.
-
Mar 19, 2009, 12:56 #32
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
No I don't have rounded corners but stu nichols has a demo which explains how you can do it
.
I don't even know what engine Opera runs off of so I can't use an extension.Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Mar 19, 2009, 13:01 #33
- Join Date
- Oct 2007
- Location
- United Kingdom
- Posts
- 622
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
I think its possible to achieve this in all popular browsers, possibly including IE6, but it requires a lot of code and isn't really 'reasonable'.
-
Mar 19, 2009, 13:10 #34
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Stu nichols rounded corners are very unreasonable. He has about...100 elements just for the roundedcorners. I'm currently on a task to develop rounded corners without images, and without a crappp load of images.
Don't know whether I can do it but I'm trying.Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Mar 19, 2009, 13:14 #35
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
if you do get it ryan, you can make it into a css quiz xD
-
Mar 19, 2009, 13:18 #36
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
I'll probably make it as a quiz if I can get it-though I'm already working on another quiz. hmm..
Off Topic:
Paul since mine doesn't have the....hearty support by most browsers should I wait and attempt something else? AKA this?Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Mar 21, 2009, 03:03 #37
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I have two good entries from Erik J for quiz A and B. Quiz A is em based and Quiz B is in percentages so the face expands and contracts with the window.
Well done Erik
-
Mar 21, 2009, 11:49 #38
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
When are answers/next quiz?
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Mar 23, 2009, 08:40 #39
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Long quiz
......
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Mar 23, 2009, 10:07 #40
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I'm just giving everyone a breather and will post the answers tomorrow afternoon.
Erik J has come up with a brilliant solution for the float center Quiz A which avoids breaking words at the image boundaries.
-
Mar 23, 2009, 10:12 #41
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Wow nice. Could it actually be used in multiple places? Like a "real" float:center;?
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Mar 23, 2009, 10:27 #42
- Join Date
- Oct 2007
- Location
- United Kingdom
- Posts
- 622
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
why didnt they think float center would be useful in the first place?
-
Mar 23, 2009, 10:31 #43
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
I hope it is part of the CSS3 draft though I doubt it. Again, kudos to Erik.
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Mar 24, 2009, 17:45 #44
- Join Date
- Mar 2009
- Location
- Internet
- Posts
- 2
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
This quiz b is easy. Quiz a is very difficult indeed...
-
Mar 24, 2009, 18:05 #45
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Time to wrap this up.
Thanks to all for taking part again especially Yurikolovsky, Erik J and Ryan for their continued support. Thanks to RoObear for supplying quiz A also.
I'm surprised that we didn't get more interest as these were 2 great quizzes with some great answers.
The winner of Quiz A must go to Erik J for an entry that is bordering on genius and makes my original answer look embarrassing.
The winner of Quiz B is Yurikolovsky as his example is very funny.
Quiz A (create float:center)
Here is my original paltry solution.
(Firefox only)
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"> p { margin:1em 0; } .box { width:50%; background:red; border:10px solid red; position:relative; text-align:justify; } .box span, .box span.image { width:200px; height:200px; background:red; float:left; } .box p.image { background:yellow; width:190px; height:190px; position:absolute; left:50%; top:0; margin-left:-100px; line-height:200px; text-align:center; background:yellow; border:5px solid red; } .overlay { left:0; top:0; position:absolute; width:50%; left:0%; overflow:hidden; } .box .overlay span { float:right; background:transparent } .overlay p { width:200%; margin-right:-100%; background:red } </style> </head> <body> <div class="box"> <p><span></span>This is some text that will flow around both sides of the image. The text can still be read from left to right across the whole of the container and still make sense apart from the odd letter that gets split on either side of the image. This would be a useful effect if perhaps we invented a new "float:center" property that allows the text to flow around both sides of the image but would of course look much neater if there was some margin around the image. See if you can come up with something better than this that still makes sense as the window is resized bigger or smaller within a reasonable range. The css is relatively simple but of course not very semantic due to the way that it is constructed. However it makes for a useful and interesting effect but I'm sure someone can come up with something much better!</p> <div class="overlay"> <p><span></span>This is some text that will flow around both sides of the image. The text can still be read from left to right across the whole of the container and still make sense apart from the odd letter that gets split on either side of the image. This would be a useful effect if perhaps we invented a new "float:center" property that allows the text to flow around both sides of the image but would of course look much neater if there was some margin around the image. See if you can come up with something better than this that still makes sense as the window is resized bigger or smaller within a reasonable range. The css is relatively simple but of course not very semantic due to the way that it is constructed. However it makes for a useful and interesting effect but I'm sure someone can come up with something much better!</p> </div> <p class="image">Image</p> </div> </body> </html>
(Firefox2+ only)
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Quiz #18a v3 / erik.j</title> <meta name="generator" content="PSPad editor, www.pspad.com"> <style type="text/css"> h1, h2{ margin:20px -100%; text-align:center; font-weight:400} #container{ margin:auto; padding:.4em 30% 0; width:30%; font:87.5%/1.6 verdana, arial; } #floatbox{ float:center; /* :-D */ position:relative; margin:20px 0 -12em; height:11.8em; background:#99f; } .float1{ float:right; margin-left:.8em; width:100%; line-height:.01; } .float2{ float:left; margin-right:.8em; width:100%; line-height:.01; } .float3{ float:right; margin-top:-.02em; width:49.99%; } .float4{ float:left; margin-top:-.02em; width:49.99%; } .wrapbox { margin-left:49%; width:2px; } .wrapbox .float1{ margin-left:.2em; } .wrapbox .float2{ margin-right:.2em; } p{ border:.2em solid #f66; margin:-.4em -99.99%; padding:.2em .8em 1.6em; background:#ffc; text-align:justify; line-height:.01; } </style></head><body> <div id="container"> <h1>Does FF support #floatbox{float:center}?</h1> <h2>Test changing browser-width and user font-size and say.</h2> <div id="floatbox"> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> </div> <div class="wrapbox"> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> </div> <p>This is some text that will flow around both sides of the image. The text can still be read from left to right across the whole of the container and still make sense apart from the odd letter that gets split on either side of the image. This would be a useful effect if perhaps we invented a new "float: center" property that allows the text to flow around both sides of the image but would of course look much neater if there was some margin around the image. See if you can come up with something better than this that still makes sense as the window is resized bigger or smaller within a reasonable range. The css is relatively simple but of course not very semantic due to the way that it is constructed. However it makes for a useful and interesting effect but I'm sure someone can come up with something much better!</p> </div> </body></html>
(Firefox2+)
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>float:center; - YuriKolovsky</title> <style type="text/css"> p { margin:1em 0; } .box { width:50%; background:red; /*max-width:610px; why the limit?*/ position:relative; padding:10px; overflow:hidden; } .img { top:25px; position:relative; margin:0 auto; z-index:3; width:150px; border:solid red 5px; } .img img { width:150px; height:150px; line-height:150px; text-align:center; display:block; background-color:yellow; } .p1, .p2 { padding-bottom:1em; position:relative; margin-top:-150px; } .p2 span { width:160px; /*img width + right padding*/ height:150px; display:block; float:right; } .p1 p { padding-left:90px; /*half img width + right padding*/ padding-right:90px; /*half img width + right padding*/ margin-left:-100%; } .p1 { position:absolute; right:10px; /*right padding*/ width:50%; height:160px; /*img width + img margin*/ margin-right:-90px; /*half img width + right padding*/ z-index:2; overflow:hidden; background-color:red; } </style> </head> <body> <div class="box"> <div class="img"><img scr="supercoolmissingimg.gif" alt="Image" /></div> <div class="p1"><p>This is some text that will flow around both sides of the image. The text can stil be read from left to right across the whole of the container and still make sense apart from the odd letter that gets split on either side of the image. This would be a useful effect if perhaps we invented a new "float:center" property that allows the text to flow around both sides of the image but would of course look much neater if there was some margin around the image. See if you can come up with something better than this that still makes sense as the window is resized bigger or smaller within a reasonable range. The css is relatively simple but of course not very semantic due to the way that it is constructed. However it makes for a useful and interesting effect but I'm sure someone can come up with something much better! </p></div> <div class="p2"><p><span></span>This is some text that will flow around both sides of the image. The text can stil be read from left to right across the whole of the container and still make sense apart from the odd letter that gets split on either side of the image. This would be a useful effect if perhaps we invented a new "float:center" property that allows the text to flow around both sides of the image but would of course look much neater if there was some margin around the image. See if you can come up with something better than this that still makes sense as the window is resized bigger or smaller within a reasonable range. The css is relatively simple but of course not very semantic due to the way that it is constructed. However it makes for a useful and interesting effect but I'm sure someone can come up with something much better! </p></div> </div> </body> </html>
-
Mar 24, 2009, 18:05 #46
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Quiz B (funny face)
Roobears original solution
(Firefox only)
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>ro0bear</title> <style type="text/css"> * {padding: 0; margin: 0;} #sensor {position: absolute; top: 10%; padding: 20%; margin-left: 30%; margin-right: 30%;} #container {border: solid black 1px; -moz-border-radius: 50%; background-color: black;} #container>div:first-child {position: absolute; top: 20%; left: 15%; border: solid white 1px; padding: 10%; background-color: white; -moz-border-radius: 50%;} #container>div>div {position: absolute; top: 35%; left: 35%; border: solid black 1px; padding: 10%; background-color: black; -moz-border-radius: 50%;} #container>div+div {position: absolute; top: 20%; right: 15%; border: solid white 1px; padding: 10%; background-color: white; -moz-border-radius: 50%;} #container>div+div+div {position: absolute; top: 10%; right: 10%; border: solid white 0.1em; border-color: transparent transparent white transparent; padding: 40%; background: none; -moz-border-radius: 50%;} #sensor>div:first-child {position: absolute; top: 0; left: 0; padding: 16.5%;} #sensor>div:hover+div+div+div+div+div+div+div+div>div>div {top: 10%; left: 10%;} #sensor>div+div {position: absolute; top: 0; left: 66.6%; padding: 16.5%;} #sensor>div+div:hover+div+div+div+div+div+div+div>div>div {top: 10%; left: 70%;} #sensor>div+div+div {position: absolute; top: 66.6%; left: 0; padding: 16.5%;} #sensor>div+div+div:hover+div+div+div+div+div+div>div>div {top: 70%; left: 10%;} #sensor>div+div+div+div {position: absolute; top: 66.6%; left: 66.6%; padding: 16.5%;} #sensor>div+div+div+div:hover+div+div+div+div+div>div>div {top: 70%; left: 70%;} #sensor>div+div+div+div+div {position: absolute; top: 0; left: 33.3%; padding: 16.5%;} #sensor>div+div+div+div+div:hover+div+div+div+div>div>div {top: 10%; left: 40%;} #sensor>div+div+div+div+div+div {position: absolute; top: 33.3%; left: 0; padding: 16.5%;} #sensor>div+div+div+div+div+div:hover+div+div+div>div>div {top: 40%; left: 10%;} #sensor>div+div+div+div+div+div+div {position: absolute; top: 33.3%; left: 66.6%; padding: 16.5%;} #sensor>div+div+div+div+div+div+div:hover+div+div>div>div {top: 40%; left: 70%;} #sensor>div+div+div+div+div+div+div+div {position: absolute; top: 66.6%; left: 33.3%; padding: 16.5%;} #sensor>div+div+div+div+div+div+div+div:hover+div>div>div {top: 70%; left: 40%;} #sensor>div+div+div+div+div+div+div+div+div {position: absolute; top: 33.3%; left: 33.3%; padding: 16.5%;} #sensor>div+div+div+div+div+div+div+div+div:hover>div>div {top: 60%; left: 70%;} #sensor>div+div+div+div+div+div+div+div+div:hover>div+div>div {top: 60%; left: 10%;} #sensor>div+div+div+div+div+div+div+div+div:hover>div+div+div {top: 75%; right: 45%; border: solid white 0.1em; padding: 2.5%;} </style> </head> <body> <div id="sensor"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div id="container"> <div> <div></div> </div> <div> <div></div> </div> <div></div> </div> </div> </body> </html>
(Firefox only)
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>I welcome you to the scaryface - YuriKolovsky</title> <style type="text/css"> .scaryface { position:relative; -moz-border-radius:65px; -webkit-border-radius:65px; border-radius:65px; border:solid black 65px; width:0px; height:0px; margin:100px auto; } .eye { position:relative; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; border:solid white 15px; width:0px; height:0px; } #reye { right:45px; top:-50px; } #leye { left:15px; top:-20px; } .eye span { position:relative; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; border:solid black 3px; display:block; width:0; height:0; top:-3px; right:3px; } .mouth div { position:relative; -moz-border-radius:65px; -webkit-border-radius:65px; border-radius:65px; border:solid white 2px; width:126px; height:126px; top:-95px; } .mouth { position:absolute; left:-65px; top:5px; overflow:hidden; width:130px; height:65px; } .mouth div { top:15px; } .sixthsense { border:solid white 1px; width:390px; height:390px; margin:0 auto; position:relative; } .sixthsense:hover div .mouth div { top:-95px; } .sense { float:left; width:130px; height:130px; } body #topleftsense:hover ~ div .eye span { top:-10px; left:-10px; } body #topsense:hover ~ div .eye span { top:-10px; } body #toprightsense:hover ~ div .eye span { top:-10px; right:-5px; } body #middlerightsense:hover ~ div .eye span { right:-5px; } body #middleleftsense:hover ~ div .eye span { left:-10px; } body #bottomleftsense:hover ~ div .eye span { top:5px; left:-10px; } body #bottomrightsense:hover ~ div .eye span { top:5px; right:-5px; } body #bottomsense:hover ~ div .eye span { top:5px; } body #facepunch:hover ~ div #leye span { right:-5px; } body #facepunch:hover ~ div #reye span { left:-10px; } body .scaryface:hover #leye span { left:-10px; top:1px; } body .scaryface:hover #reye span { right:-5px; top:1px; } body .scaryface:hover .mouth div { -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; border:solid white 2px; width:106px; height:106px; top:-95px; margin:10px; } body .scaryface:hover .mouth div span { border-left:10px solid red; border-right:10px solid red; border-bottom:20px solid red; display:block; position:absolute; bottom:-20px; left:40px; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; } .scaryface .onhead { border:20px solid yellow; border-bottom:0; border-top:transparent dotted 20px; position:absolute; top:-65px; left:-65px; } .scaryface .extrabodyparts { border:40px solid black; border-bottom:0; border-top:transparent dotted 50px; position:absolute; top:-75px; width:40px; left:-60px; display:none; } .scaryface .morebodyparts { border:transparent dotted 10px; border-top:10px solid pink; position:absolute; top:10px; width:0; left:-11px; display:none; } .scaryface .morebodyparts span { border:2px pink solid; display:block; border-bottom:0; width:16px; height:0px; position:absolute; top:-12px; left:-10px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; } .bubblebath { display:none; } p { font-family:Georgia, "Times New Roman", Times, serif; font-size:20px; position:relative; top:-350px; left:330px; text-align:center; float:left; width:250px; height:80px; border:2px solid black; -moz-border-radius:30px; -webkit-border-radius:30px; border-radius:30px; } .scaryface .eye span { border-color:green; } .bubblebath div, .bubblebath span { position:relative; top:-350px; border:2px solid black; -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px; display:block; width:25px; height:25px; } .bubblebath span { top:-200px; left:270px; border:2px solid black; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; width:10px; height:10px; } .bubblebath div { top:-200px; left:295px; border:2px solid black; } .scaryface .brows { border:40px solid black; border-top:0; border-bottom:transparent dotted 20px; position:absolute; top:-22px; width:40px; left:-60px; } .scaryface:hover, .scaryface:hover .extrabodyparts, .scaryface:hover ~ p, .scaryface:hover .morebodyparts, .scaryface:hover ~ .bubblebath { display:block; cursor:pointer; } .sixthsense:hover .scaryface .brows { display:none; } </style> </head> <body> <div class="sixthsense"> <div class="sense" id="topleftsense"></div> <div class="sense" id="topsense"></div> <div class="sense" id="toprightsense"></div> <div class="sense" id="middleleftsense"></div> <div class="sense" id="facepunch"></div> <div class="sense" id="middlerightsense"></div> <div class="sense" id="bottomleftsense"></div> <div class="sense" id="bottomsense"></div> <div class="sense" id="bottomrightsense"></div> <div class="scaryface"> <div class="extrabodyparts"></div> <div class="morebodyparts"><span></span></div> <div class="onhead"></div> <div class="eye" id="leye"><span></span></div><div class="eye" id="reye"><span></span></div> <div class="mouth"><div><span></span></div></div> <div class="brows"></div> </div> <div class="bubblebath"> <div></div> <span></span> <p class="a_message_from_sponsor">Beware! Touching a strangers face can bring unexpected consequences!</p> </div> </div> </body> </html>
(Firefox)
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Quiz #18b Erik J</title> <meta name="generator" content="PSPad editor, www.pspad.com"> <style type="text/css"> html, body{ padding:0; margin:0; width:100%; height:100%;} #smilybox{ position:relative; margin:100px auto 0; width:50%; height:60%; } .nw, .n, .ne, .w, .e, .s, .sw, .s, .se, .o, .smily{ position:absolute; width:100%; height:100%; } .nw{ top:-100%; left:-100%;} .n{ top:0; left:100%;} .ne{ top:0; left:100%;} .w{ top:100%; left:-200%;} .e{ top:0; left:200%;} .sw{ top:100%; left:-200%;} .s{ top:0; left:100%;} .se{ top:0; left:100%;} .o{ top:-100%; left:-100%; padding:0; overflow:hidden;} .smily, .eyel, .eyer, .pupil{ position:absolute; top:25%; border:2px solid #000; -moz-border-radius: 49.99%; width:25%; height:25%; background:#fff; } .smily{ top:0; left:0; width:98%; height:98%; background:#ff6; } .eyel{ left:15%; } .eyer{ right:15%; } .pupil{ top:40%; left:40%; margin:-10px 0 0 -10px; border:10px solid #99f; width:20%; height:20%; background:#000; } .smile{ position:absolute; top: -20%; left: 0; border-bottom: 20px ridge #f00; -moz-border-radius: 0 0 49.99% 49.99%; width: 100%; height:100%; } .o:hover .smile{ top:75%; left:45%; margin:-10px 0 0 -10px; border:10px solid #900; -moz-border-radius: 49.99%; width:10%; height:10%; background:#fbb; } .nw:hover .pupil{ top:7%; left:7%; margin:0} .n:hover .pupil{ top:0; left:40%; margin:0 0 0 -10px;} .ne:hover .pupil{ top:7%; right:7%; left:auto; margin:0} .w:hover .pupil{ top:40%; left:0; margin:-10px 0 0 0;} .e:hover .pupil{ top:40%; right:0; left:auto; margin:-10px 0 0 0;} .sw:hover .pupil{ top:auto; bottom:7%; left:7%; margin:0} .s:hover .pupil{ top:auto; bottom:0; left:40%; margin:0 0 0 -10px;} .se:hover .pupil{ top:auto; right:7%; bottom:7%; left:auto; margin:0} .o:hover .eyel .pupil{ top:auto; right:7%; bottom:7%; left:auto;} .o:hover .eyer .pupil{ top:auto; bottom:7%; left:7%; margin:0} </style></head><body> <div id="smilybox"> <div class="nw"> <div class="n"> <div class="ne"> <div class="w"> <div class="e"> <div class="sw"> <div class="s"> <div class="se"> <div class="o"> <div class="smily"><span class="eyel"><span class="pupil"></span></span><span class="eyer"><span class="pupil"></span></span><span class="smile"></span></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body></html>
Code:<!doctype html> <html lang="en"> <head> <title>Quiz B</title> <style type="text/css"> *{margin:0;padding:0;} div#smile { background:black; height:100px; font-size:100%; width:100px; -moz-border-radius:49px; margin-left:40%; position:relative; margin-top:20%; } p.eyes { float:left; margin-left:20px; display:inline; height:20px; margin-top:10px; width:20px; -moz-border-radius:10px; background:#FFF; position:relative; } p.eyes span { position:absolute; top:-25px; left:4px; font-size:2.5em; } div.lips { width:65px; height:2px; background:#FFF; position:absolute; top:63px; left:18px; z-index:2; } .one { height:50px; left:0; position:absolute; top:-50px; width:50px; } .two { height:50px; left:50px; position:absolute; top:-50px; width:50px; } .three { height:50px; left:94px; position:absolute; top:0px; width:50px; } .four { height:50px; left:90px; position:absolute; top:50px; width:50px; } .five { height:45px; left:40px; position:absolute; top:90px; width:50px; } .six { height:45px; left:-10px; position:absolute; top:85px; width:50px; } .seven { height:50px; left:-45px; position:absolute; top:35px; width:45px; } .eight { height:36px; left:-45px; position:absolute; top:0; width:50px; } .one:hover+div+div+div+div+div+div+div+div+div>p span { top:-30px; } .one:hover+div+div+div+div+div+div+div+div+div>p+p span { left:1px; top:-30px; } .two:hover+div+div+div+div+div+div+div+div>p span { top:-30px; left:10px; } .two:hover+div+div+div+div+div+div+div+div>p+p span { top:-30px; } .three:hover+div+div+div+div+div+div+div>p span { top:-25px; left:10px; } .three:hover+div+div+div+div+div+div+div>p+p span { top:-25px; } .four:hover+div+div+div+div+div+div>p span { top:-20px; left:10px; } .four:hover+div+div+div+div+div+div>p+p span { top:-20px; left:10px; } .five:hover+div+div+div+div+div>p span { top:-18px; left:6px; } .five:hover+div+div+div+div+div>p+p span { top:-18px; left:6px; } .six:hover+div+div+div+div>p span { top:-20px; left:2px; } .six:hover+div+div+div+div>p+p span { top:-20px; left:2px; } .seven:hover+div+div+div>p span { top:-21px; left:0; } .seven:hover+div+div+div>p+p span { top:-21px; left:0; } .eight:hover+div+div>p span { top:-28px; left:-3px; } .eight:hover+div+div>p+p span { top:-28px; left:-3px; } #holder { position:relative; height:100px; width:100px; -moz-border-radius:49px; } #holder:hover>p+p+div { height:20px; width:20px; -moz-border-radius:10px; position:relative; left:40px; } </style> </head> <body> <div id="smile"> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> <div class="five"></div> <div class="six"></div> <div class="seven"></div> <div class="eight"></div> <div class="nine"></div> <div id="holder"> <p class="eyes"><span>.</span></p> <p class="eyes"><span>.</span></p> <div class="lips"></div> </div> </div> </body> </html>
Thanks to all those that took part and all those that are watching in the background.
Look out for the next quiz at the end of the week
-
Mar 25, 2009, 02:15 #47
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
can someone give me a english language explanation on how erik.j's solution to quiz A works??
edit:
omg i thought that the face that roobear made for quiz B couldn't look any scarier, but erik's solution to quiz B proved me wrong.
ryans face isn't as scary, but looks more like a frog. xD
-
Mar 25, 2009, 03:04 #48
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 Thread(s)
I wonder what a browser does with float: center? I thought it made the box a float and then defaulted to "left".
-
Mar 25, 2009, 06:11 #49
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I wonder what a browser does with float: center?
-
Mar 25, 2009, 07:02 #50
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
can someone give me a english language explanation on how erik.j's solution to quiz A works??
Then alternate left and right floats are added so that the text moves one side and then the other. This would result in uneven rows so the line height is adjusted to make the text stay on one line and then by clever manipulation of negative margins, line-height and padding you can align the text into neat rows.
If you remove some settings you can start to see how this effect builds up.
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> #floatbox { float:center; /* :-D */ position:relative; margin:20px 0 -12em; height:11.8em; } #container { margin:auto; padding:.4em 30% 0; width:30%; font:87.5%/1.6 verdana, arial; } p { border:.2em solid #f66; margin:-.4em -99.99%; padding:.2em .8em 1.6em; background:#ffc; text-align:justify; } .float1 { float:right; margin-left:.8em; width:100%; background:red } .float2 { float:left; margin-right:.8em; width:100%; background:blue } .float3 { float:right; margin-top:-.02em; width:49.99%; background:green; } .float4 { float:left; margin-top:-.02em; width:49.99%; background:teal } </style> </head> <body> <div id="container"> <div id="floatbox"> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> <div class="float3"> </div> <div class="float4"> </div> <div class="float1"> </div> <div class="float2"> </div> </div> <p>This is some text used for this example to show what is happening so you can see what the effect will be. This is some text used for this example to show what is happening so you can see what the effect will be.</p> </div> </body> </html>
Bookmarks