SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 58
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)

    CSS - Test Your CSS Skills Number 18 :

    CSS - Test Your CSS Skills Number 18 : Quiz ended - solution posted in post #45

    This week we have 2 fun quizzes that are more a puzzle than valid layouts although the techniques used will come in handy elsewhere.

    Quiz A is supplied by me (but suggested by MarkBrown4) and Quiz B has been supplied by RoObear.

    Quiz A:

    In my quiz we are going to invent a new CSS property called "float:center". Just like float:left and float right it allows text to wrap but in this case the element is floated in the centre of some text and the text will part and wrap on both sides of the element.

    This means that the text can still be read from left to right all the way across the whole width.

    Have a look at the screenshot called float-center.png to see what I mean.

    The screenshot shows the (percentage width) element at a smaller width and at a larger width to show that it works across a reasonable range.

    In my example the layout breaks at larger widths so just make sure it works for the range specified in my screenshot.

    Obviously this is not a perfect solution as some letters are cut in half and I'm hoping you can come up with something better.

    The rules are pretty flexible and you can just test in the browser of your choice but no scripting is allowed. You can add to (or remove) the html and css as much as you like and use any properties you wish (no images allowed either).

    My examples uses valid CSS/html and works in most browsers.

    The main point is that you can open and close the window across a reasonable range and the effect is still maintained. Therefore you can't just absolutely place little bits of text on either side to give the effect.

    Lastly you are not allowed to use the "clip" property because we did that in another quiz.
    Here is some html which you can use if you like.
    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;</title>
    <style type="text/css">
    p {
        margin:1em 0;
    }
    .box {
        width:50&#37;;
        background:red;
        max-width:610px;
    }
    </style>
    </head>
    <body>
    <div class="box">
        <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>
    </body>
    </html>

    Any questions just ask and I will clarify.

    Quiz B.

    Quiz B supplied by Roobear will put a smile on your face

    Have a look at the attachment called quiz18b-face.png.

    You simple have to copy that effect using -moz-border-radius (or border-radius or webkit equivalent). No images are required.

    As you move your mouse around the face you will see that the eyes folllow the cursor around.

    So the idea is that the face looks at your cursor when you move it around. It then looks excited when you put the cursor over the face and just smiles and looks at you when the cursor is too far away.

    Check the screenshot to see all the states in action.

    For extra bonus points you could try and make the face scalable when the window is resized which shows how the corners will work better than images.

    For extra extra bonus points make the display also work in other browsers that dont support the round corners where they would just get square blocks instead.

    You can use your own html and CSS and it only needs to work perfectly in Firefox.

    As usual no scripting or images are allowed.

    Any questions just ask and remember this is just for fun

    Solutions to both quizzes will be posted later in the week (or longer) depending on how it goes

    Have fun .

    Paul

    PS. : In case you missed the other tests you can find them here:
    test 1: test 2: test 3: test 4: test 5: test 6: test 7: test 8: test9: test10: test11: test12:
    test13: test 14: test 15: test 16: test 17:
    Attached Images Attached Images

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Ignore it Paul.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    ALMOST DONE!! (school shutting down comps, fack can't finishh)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    lol ryan lol

    lol paul, looks very hard


    edit:
    omg the text cuts-through the middle
    Last edited by YuriKolovsky; Mar 16, 2009 at 13:03.

  5. #5
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    ok, i sent my (attempt at a) solution for quiz A.

    quiz B gives me a strong deja-vu feeling, as if i have seen it somewhere before, but currently i have no idea on how to make it work, ill look into it tomorrow.

    edit:
    there are only 10 "states" for the smiley face, or is the movement completely fluid?
    Last edited by YuriKolovsky; Mar 16, 2009 at 16:22.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Well done Yurikolovsky your anwser to quiz A is good

    Regarding quiz B the eyes move to the 10 states rather jerkily and aren't a continuous smooth movement.

  7. #7
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    622
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Regarding quiz B the eyes move to the 10 states rather jerkily and aren't a continuous smooth movement.
    Although it is possible to do a continuous smooth movement but it would require very ugly bloated html!

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quiz B reminds me of something I saw in the specs once. It was kindof a theoretical explanation of "what if you did this?" and what should happen if you did that. : )

    PS Happy Paddy Day. As you all can see, Paul is wearing his Green.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Whew gay quiz A though very nice. PM'd answer.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Two more entries received

    Another good one from Yurikolovsky and an entry from Ryan that still needs a bit of work.

    Thanks for the entries so far and keep at it

  11. #11
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    622
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:


    Quote Originally Posted by Stomme poes View Post
    PS Happy Paddy Day. As you all can see, Paul is wearing his Green.
    You too!

    << I've gone green too

  12. #12
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    lol ro0bear youve always been green
    The Easy Way to be Green!
    happy St. Patrick's day, and remember to drink lots of liquor, and to get into a senseless fight.

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    lol there have been 2 fights today and it's quite hilarious . PG pl0x?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I have a good entry from Erik J for Quiz B so lets see what everyone else can do

  15. #15
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    haven't even tried quiz b yet, been busy with guests (relatives from russia visiting us here in spain), i only do the quizzes when they are shopping and such (i don't like shopping)

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Ok interesting quiz A. Quiz B time..
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Quiz B Pm'd.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    OOPS I forgot to make the lip a smile . If you want Paul I'll resend it with the smile.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Ryan, thanks for the entry looks it good (although your face looks a little unhappy )

    Don't worry about adding the smile as everything else is working Well done.

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    I realized it looked sad and I thought it was because it didn't like me. .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  21. #21
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i haven't even tried quiz b xD
    i think ill try it tomorrow.

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Pretty much straightfoward and finding out how to keep the eyes with the mouse is a sorta trick but pretty easy to discover it .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  23. #23
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    too bad quiz b isn't supported by ie, well at least ie6 and ie7
    IE8 was officially released a couple of days ago.

  24. #24
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    OOOO more poison for the web :/.

    What do you mean "not supported". Mine only fails in IE6 and that is because of the selectors-I could have gotten away with not using it <_<.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  25. #25
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    What do you mean "not supported".
    i assumed xD

    yes, too much poison, it doesn't even force users to update!! xD


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
  •