SitePoint Sponsor

User Tag List

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

    Test your CSS skills quiz #10

    CSS - Test Your Skills Number 10 : (Quiz ended: Solution posted in posts #73 & #74)

    What better way to while away an hour or so than by taking part in a little quiz - just for fun

    This quiz is pretty straightforward and some of you should be able to do this straight away but even if you find this easy you should still look at innovative ways of completing the task.

    Look carefully at the attachment to this post which shows a screenshot of a layout I have produced. Now all you have to do is create that coloured box. I am not worried about you making the exact positions etc or using the same colours but the effect should be the same including partially coloured text background and borders.

    Note also that this box is a fluid width and look at the attachment to see how the elements scales up and down. The text is fluid also and takes on a different color in each quadrant of the box and indeed if the text overlaps two quadrants then half a letter may be one color and the other half a different color. Study the attachment carefully to see this in action.

    I was going to set a load of rules to make it harder but that may limit your innovation but the main rule is this must be valid css2.1 and valid html. However to make things interesting it only needs to work in Firefox 2+, Safari3, and Opera 9+. (I have ignored IE for this test although IE can accomplish this layout with a little hack.)

    The winners will be decided on a number of criteria which means we may have a number of winners based on the following:

    1) First correct answer received
    2) Simplest Solution
    3) Most innovative Solution
    4) Smallest amount of html used
    5) Smallest amount of CSS used
    6) Any mixture of the above

    Therefore you might like to try constructing this without using any classes or id's in the html. Or perhaps you would like to use more html so that the CSS is minimal. Or perhaps you may go for an unorthodox or innovative approach and not worry about file size.

    If you have a very innovative solution that only works in one of the mentioned browers then still PM the code and is it may be interesting to others and be worth a special note.

    I will give you some html as a starting point but this is only your base and you can add to the html and css as much as you like.

    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>Colored box</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0
    }
    div{
        width:60%;
        margin:20px auto;
        font-size:124%;
        min-width:400px;
    }
    </style>
    </head>
    <body>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    </div>
    </body>
    </html>
    The result must be valid html and css2.1 though so that this layout could actually be used for real.

    As usual some of you will know the answer to this straight away so please PM me your answer and do not post in the thread and spoil it for others.

    There are no prizes but I will announce the correct entries that I receive to give you lots of Kudos.
    General Rules:

    Html and CSS can be altered to suit
    No javascript or scripting of any kind
    No images or background images.
    No expression,conditional comments, behaviours etc.
    Use Valid CSS
    Use Valid xhtml
    Must work in Firefox2+, Safari3, Opera 9+
    No hacks the same code must work in above browsers.
    No finding loopholes - I'm sure you all know what I mean lol

    As usual there are no prizes other than the self-satisfaction of completing this. If you have a valid layout then post a message saying completed but don't post the solution and spoil it for others. Please PM me the solution so that other people can still have a go.

    As with the other tests these aren't meant to be suggestions for layout but more an exercise in using css to achieve something different and having fun at the same time.

    Have fun .

    Paul

    PS. : In case you missed the other tests you can find them here:
    test 1: http://www.sitepoint.com/forums/showthread.php?t=168555
    test 2: http://www.sitepoint.com/forums/showthread.php?t=169710
    test 3: http://www.sitepoint.com/forums/showthread.php?t=170190
    test 4: http://www.sitepoint.com/forums/showthread.php?t=171221
    test 5: http://www.sitepoint.com/forums/showthread.php?t=172472
    test 6: http://www.sitepoint.com/forums/show...est+css+skills
    test 7:http://www.sitepoint.com/forums/show...44#post3216244
    test 8:http://www.sitepoint.com/forums/show...64#post3235664
    test 9:http://www.sitepoint.com/forums/show...58#post4116758
    Attached Images Attached Images

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm in.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Centauri View Post
    I'm in.
    I thought you might be

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Wow that was quick and Graeme (Centauri) already has sent me a correct entry within the hour

    Therefore the rest of you should concentrate on innovation now

    Keep sending your entries in either way and I will list the correct ones.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    I'm in...
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    I have everything but the different text color...why isn't that working...wtf...
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    I have everything but the different text color...why isn't that working...wtf...
    I'm not going to give any clues yet but you are missing a vital concept

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    ...but logically it should be working....that makes no sense at all...wtf.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Congratulations to ro0bear for another correct entry.

    Remember you can enter as many entries as you like as long as each has something different to offer.

  10. #10
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Submitted a try with the smallest amount of html without breaking anything. Hope it at least is a little different than expected.
    Happy ADD/ADHD with Asperger's

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

    Thanks for your entries - the first one was brilliant (the others were good also)

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Is this one too hard?

    I'm not getting many entries for it

  13. #13
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i shall try too.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    look forward to your entry

  15. #15
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    622
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The lack of numbers might be because its not advertised on the highlighted threads unlike the last one. Might also be because it was launched on a Sunday, maybe more people will enter through the week?

    Im only assuming though

  16. #16
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    or its too hard and some people don't want to look as stupid as me in the end...




    when i looked at the example at first, i didn't see that the text changed its color,

    i got the background things working within a minute, but the text effect got me puzzled,

    oh, and when will the contest/quiz end?


    p.s. i can't believe how badly the Internet is cluttered with useless and low grade css, finding anything usefull is much too hard.

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

    Just had some great entries from ro0bear, Erik, and Tommy Many thanks

    I'll let the quiz run for a few days more unless it goes quiet and then I'll post the entries I received.

  18. #18
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    So far, I've tried, but only failed...

  19. #19
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    yay i got it working!!
    works in every browser, including ie6, valid css, no hacks.

    and you can resize the main div and the other boxes adapt.

    nothing brilliant though, as i'm not really good at css 2/3, i only know css classic.

    but still, nothing beats this feeling of self satisfaction after solving a puzzle.

    edit:
    tip to those who can't get it to work.
    read Paul O'B original post clearly, he gives away the answer in the way that he writes the conditions.

    edit: ah i got it almost right, well back to the drawing board...

    now i will hope that my answer actually validates...
    what do you think Paul O'B?
    Last edited by YuriKolovsky; Jan 19, 2009 at 09:00.

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

    That was a good entry but you misread one of the instructions

    When I said resize I meant that the element resizes with the window and has a fluid length. Not just resizes on text resize.

    Sorry if I was unclear but I'm sure you can fix it

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    So far, I've tried, but only failed...
    Don't give up -I'm sure something will click soon

  22. #22
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'll try this when I get home

  23. #23
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    ok now i'm pretty sure i've done it.
    it also breaks in ie6 in very small screen sizes, which can be fixed with a small hack, which meets up with the original requirements!!

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

    Yes that's it well done

    Hope you had fun trying

  25. #25
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    eagerly awaiting the end and the revealed solutions
    (and pondering more solutions)

    the perfect excuse not to do the stuff that your supposed to be doing!!!

    Hope you had fun trying
    i had, but getting it working was much more fun.


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
  •