SitePoint Sponsor

User Tag List

Results 1 to 25 of 89

Threaded View

  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    183 Post(s)
    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.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
    <html xmlns="">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Colored box</title>
    <style type="text/css">
    * {
        margin:20px auto;
        <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>
    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 .


    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:
    test 9:
    Attached Images Attached Images


Posting Permissions

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