SitePoint Sponsor

User Tag List

Page 1 of 4 1234 LastLast
Results 1 to 25 of 94
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,864
    Mentioned
    159 Post(s)
    Tagged
    4 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)
    Edit:


    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)

    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>Untitled</title>
      <style type="text/css">
      </style>
      </head>
      <body>
      <div>
                  <p> <span>X</span> </p>
      </div>
      </body>
      </html>
    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 .

    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
    test9:http://www.sitepoint.com/forums/show...45#post4108145
    test10:http://www.sitepoint.com/forums/show...63#post4119063
    Attached Images Attached Images
    Last edited by Paul O'B; Jan 28, 2009 at 06:27.

  2. #2
    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'm in.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    lol Ryan, you always try and get the first post .

    edit: im in, even though i haven't understood the quiz completely, ill have a couple of reads.

  4. #4
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    I'm in.
    Ditto.

    I wonder if the challenge is because of the shrinkwrapping.
    Cross browser css bugs

    Dan Schulz you will be missed

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm never going to get any work done this week.

    And I have to head to a meeting in 10 minutes. I'm guessing I won't be first...

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,864
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    edit: im in, even though i haven't understood the quiz completely, ill have a couple of reads.
    If I haven't made anything clear enough then just shout.

    The easiest explanation is to view the screenshots which shows how the design should look at various window sizes from small to large, from narrow to wide.

  7. #7
    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)
    All I need is the border across the X and I'm done.

    Edit: OH SNAP DIDN'T SEE THE <div> there. LOLL
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    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)
    Answer PM'd.

    Edit: Ahhh IE7..
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    If I haven't made anything clear enough then just shout.
    no need to shout, after some reads i think i got the question.

    now all i need is a solution

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,864
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Answer PM'd.

    Edit: Ahhh IE7..
    Needs a rethink Ryan

    Its not vertically centred and isn't expanding vertically when the screen is narrower. Look at my screenshots in post #1 carefully. the dividing line is also supposed to be the full window width.

    I have attached a picture of your layout to show what I mean. (and so that others don't make the same mistake)
    Attached Images Attached Images

  11. #11
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lol Ryan, always in a hurry. It's much harder than it looks.
    Cross browser css bugs

    Dan Schulz you will be missed

  12. #12
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    It's much harder than it looks.
    thats Paul

    edit: i managed to get the effect, but i can't get it this exact.

    this question, is hmmmm...

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,864
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    IMPORTANT:
    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.
    Last edited by Paul O'B; Jan 23, 2009 at 16:07.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,864
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    I already have an answer from Tommy that is perfect in Opera. Well done Tommy

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



    edit: i think i just got it.
    now i need to write it down.

    lol, seems to work in firefox and ie 7 only.
    (my target audience )

    edit: nooo, the text-resize function fails in ie7.
    i guess i only got it working in firefox then
    (my fav browser )
    Last edited by YuriKolovsky; Jan 24, 2009 at 04:27.

  16. #16
    ? ro0bear's Avatar
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    624
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This would be so easy if you could use absolute positioning!

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,864
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    I have a correct solution form YuriKolovsky that works well in Firefox - well done

  18. #18
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a minimum width/height in which erik.j's solution works until it breaks? I'm hesitant about this part ;(

    Edit: And are you calculating the pixels to make sure it's perfectly centered for the solutions entered thus far?
    Cross browser css bugs

    Dan Schulz you will be missed

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,864
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    Is there a minimum width/height in which erik.j's solution works until it breaks? I'm hesitant about this part ;(
    Hi,

    The layout works all the way from the smallest you can make a window to the largest it can be. Have a look at the screenshots I posted and you can see the small one and how it looks. The window can be much smaller thatn that and almost to zero. There will obviously be some overlap if you get down to where each of the lines touch each other.

    Does that explain it ok ?

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,864
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Edit: And are you calculating the pixels to make sure it's perfectly centered for the solutions entered thus far?
    I still have to check they are pixel perfect but on quick inspection they look fine. I will get my measuring stick out when I run through them again.

    Remember I only need it perfect in the browser of your choice because there are some rounding errors in various browsers and you will spend all day trying to make it the same in all.

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,864
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    Is there a minimum width/height in which erik.j's solution works until it breaks? I'm hesitant about this part ;(

    I've attached a screenshot of what it looks like at about the smallest you need to worry about.
    Attached Images Attached Images

  22. #22
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    yea, tough quiz, and so late too, (i wanted to catch this one in time).
    so sleepy, i wonder how im writing this text, should be all gibberish by now.

    this quiz is hard,
    after tweaking, works in ie6 and opera as well, but not to a very good degree, pixels a little off, height a little smaller.
    i will try and get it working in more browsers tomorrow.

    right now I'm off and away

    good night and happy thinking!!

  23. #23
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,627
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Good test Erik.j. My brain hurts now! I submitted mine. Although I could only get it working in FX (real close in Opera).

    I originally gave up and deleted my test page. But then I saw that Paul said it only had to work in one browser, so I pulled it out of my trash can and finished it. It's nothing pretty, but it works. I'm happy to get it working in at least one of them though. I'm going to go put ice (i.e. beers) on my brain now...

    Edit - Actually, I removed a un-needed height ("haslyout") and now it "almost" works in IE6 and IE7. I just can't get the center horizontal line to extend full window width. It's trapped inside one of the boxes.
    Last edited by PicnicTutorials; Jan 23, 2009 at 20:17.

  24. #24
    SitePoint Addict aguroyz's Avatar
    Join Date
    Jan 2009
    Location
    Konoha Fire Country
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dammit, I can't get the height to work..... T_T
    Uniquely FILIPINO... See how talented and creative Filipinos are.
    http://www.smalltym.com
    Custom Web Designs:
    http://proweaver.com

  25. #25
    SitePoint Addict aguroyz's Avatar
    Join Date
    Jan 2009
    Location
    Konoha Fire Country
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wahaha I used my naked eyes to center it... So it should be less than perfect..

    ahehehe
    Uniquely FILIPINO... See how talented and creative Filipinos are.
    http://www.smalltym.com
    Custom Web Designs:
    http://proweaver.com


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
  •