SitePoint Sponsor

User Tag List

Results 1 to 25 of 94

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)

    CSS - Test Your CSS Skills Number 11

    CSS - Test Your CSS Skills Number 11 : Quiz now ended - Solution posted in post #64

    Back by public demand we have another little CSS quiz to stretch your imagination.

    This quiz was suggested by Erik.j and should keep you amused for a while.

    As I always say this quiz is really quite 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.

    In order to allow beginners to complete there are 2 versions shown in the attachment. The simpler version omits the centre dividing line.

    Look carefully at the attachment which shows actual screenshots of the layout at different screen sizes required. I am not worried about you making the dimensions exactly the same but every element must be perfectly centred in the viewport. Allowing for rounding errors no element should be more than 1 or 2 pixels adrift from the exact central position.

    Take care with this and account for border, margin and padding correctly.

    The “x” in the center is also perfectly centred and should resize with text resize and still stay centred. (The simpler version can skip the text resize and use a fixed font-size.)

    Specific Rules:

    Must be centred perfectly in viewport (within 1 or 2 pixels at most)
    Html within the body tags not to be altered (only changes to the css in the head allowed)
    No absolute positioning
    No hacks
    Must work in either IE6 upwards or Firefox or Opera (modern versions)

    ok - I'm going to change the rules slightly and I will accept an answer that is perfect in only one of the browsers mentioned. If you can make it perfect everywhere then all the better.

    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

    General Rules:

    Html between the body tags must remain untouched.
    Only the css in the head can be altered
    No javascript or scripting of any kind
    No images or background images.
    No expression,conditional comments, behaviours etc.
    Use Valid CSS
    Use Valid html
    Must work in at least one of the modern browsers (or IE6)
    No hacks
    No finding loopholes - I'm sure you all know what I mean

    Here is the html to use as a starting point: (remember you can only add css in the head and leave the body html alone)

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
      <html lang="en">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <style type="text/css">
                  <p> <span>X</span> </p>
    As usual there are no prizes other than the self-satisfaction of completing this. If you have a valid layout then post a message here but PM me the solution so that other people can still have a go. I will decide on the best layout this time rather than the first one I receive.

    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.

    Answers will be given later next week depending on how it goes

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