SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 58
  1. #26
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  2. #27
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 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

  3. #28
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Paul O'B View Post

    Can anyone better it
    Yes Yurikolovsky has bettered his own example

  4. #29
    ? ro0bear's Avatar
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    624
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes Yurikolovsky has bettered his own example
    Fantastic! lol

  5. #30
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Lol Yuri that was fantastic.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #31
    Hibernator YuriKolovsky's Avatar
    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
    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!!)
    Last edited by YuriKolovsky; Mar 19, 2009 at 12:29.

  7. #32
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #33
    ? ro0bear's Avatar
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    624
    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'.

  9. #34
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #35
    Hibernator YuriKolovsky's Avatar
    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

  11. #36
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 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?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #37
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 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

  13. #38
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    When are answers/next quiz?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  14. #39
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Long quiz ......
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  15. #40
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 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.

  16. #41
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Wow nice. Could it actually be used in multiple places? Like a "real" float:center;?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  17. #42
    ? ro0bear's Avatar
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    624
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    why didnt they think float center would be useful in the first place?

  18. #43
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I hope it is part of the CSS3 draft though I doubt it. Again, kudos to Erik.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  19. #44
    Non-Member
    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...

  20. #45
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 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>
    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

  21. #46
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 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&#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

  22. #47
    Hibernator YuriKolovsky's Avatar
    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

  23. #48
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I wonder what a browser does with float: center? I thought it made the box a float and then defaulted to "left".

  24. #49
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I wonder what a browser does with float: center?
    It should ignore it altogether as its not a valid value

  25. #50
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •