CSS - Test Your CSS Skills Number 18 :

**RyanReese** · Mar 18, 2009, 15:40

: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.

**Paul O'B** · Mar 19, 2009, 03:09

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

**Paul O'B** · Mar 19, 2009, 03:59

Originally Posted by Paul O'B

Can anyone better it

Yes Yurikolovsky has bettered his own example

**ro0bear** · Mar 19, 2009, 05:41

Originally Posted by Paul O'B

Yes Yurikolovsky has bettered his own example

Fantastic!

lol

**RyanReese** · Mar 19, 2009, 06:59

Lol Yuri that was fantastic.

**YuriKolovsky** · Mar 19, 2009, 08:08

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

or did you only mean that they are not complete total ultra messed up in IE7, IE8?

is there even a reasonable way to get round-border's in opera? (i can't believe it's not working, in opera!!)

**RyanReese** · Mar 19, 2009, 11:56

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.

**ro0bear** · Mar 19, 2009, 12:01

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'.

**RyanReese** · Mar 19, 2009, 12:10

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.

**YuriKolovsky** · Mar 19, 2009, 12:14

if you do get it ryan, you can make it into a css quiz xD

**RyanReese** · Mar 19, 2009, 12:18

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?

**Paul O'B** · Mar 21, 2009, 02:03

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

**RyanReese** · Mar 21, 2009, 10:49

When are answers/next quiz?

**RyanReese** · Mar 23, 2009, 07:40

Long quiz

......

**Paul O'B** · Mar 23, 2009, 09:07

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.

**RyanReese** · Mar 23, 2009, 09:12

Wow nice. Could it actually be used in multiple places? Like a "real" float:center;?

**ro0bear** · Mar 23, 2009, 09:27

why didnt they think float center would be useful in the first place?

**RyanReese** · Mar 23, 2009, 09:31

I hope it is part of the CSS3 draft though I doubt it. Again, kudos to Erik.

**Sato** · Mar 24, 2009, 16:45

This quiz b is easy. Quiz a is very difficult indeed...

**Paul O'B** · Mar 24, 2009, 17:05

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>

This is Erik's (bordering on genius) solution:
(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">&nbsp;</div>
        <div class="float4">&nbsp;</div>
       
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
       
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
       
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
       
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
       
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
       
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
       
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
    </div>
    <div class="wrapbox">
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
       
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
       
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
       
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
       
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
       
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
       
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
       
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
       
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
       
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
       
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
       
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
       
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
       
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
       
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
       
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</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>

Yurikolovsky
(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>

Quiz B solutions follow in next post

**Paul O'B** · Mar 24, 2009, 17:05

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&#37;; 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>

Yurikolovsky
(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>

Erik J - scalable version
(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>

Ryan Reese

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

**YuriKolovsky** · Mar 25, 2009, 01:15

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

**Stomme poes** · Mar 25, 2009, 02:04

I wonder what a browser does with float: center? I thought it made the box a float and then defaulted to "left".

**Paul O'B** · Mar 25, 2009, 05:11

I wonder what a browser does with float: center?

It should ignore it altogether as its not a valid value

**Paul O'B** · Mar 25, 2009, 06:02

can someone give me a english language explanation on how erik.j's solution to quiz A works??

I'll get Erik to go into full details but the idea is that you start with a box already in the middle of the page and then you drag the text outside this box with negative margins.

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&#37; 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">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</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>

I'll get EriK to give the full run down

The SitePoint Forums have moved.

User Tag List

Thread: CSS - Test Your CSS Skills Number 18 :

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions