SitePoint Sponsor

User Tag List

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

    CSS - Test Your CSS Skills Number 24

    CSS - Test Your CSS Skills Number 24 : Quiz Ended - Solutions posted in #post 40

    I hope you are ready for this but we have not one but four little quizzes for you to take your choice with and while away your coffee breaks

    Quiz 1: (brought to you by me)

    The first quiz is relatively easy and funnily enough a request for something that I have had from three different clients this week. The task is simply to allow for a banner to be placed either side of a fixed-width centred layout.

    This could be a google ad or something similar that needs to be in the html and not simply a background image.

    "That's easy" you might say but as usual there is a slight catch. You must place the banners so that they do not create a horizontal scrollbar on the page and the page can collapse to the actual page content width before a horizontal scrollbar will appear.

    Have a look at the screenshot called ads.png which shows the page in different widths and how the scrollbar only appears when the main content is needed to be viewed. The ads at the side do not create a scrollbar.

    Here is the starting code which you can edit the html and css as much as 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>Untitled Document</title>
    <style type="text/css">
    #page {
        width:760px;
        margin:auto;
        text-align:left;
        background:red;
    }
    </style>
    </head>
    <body>
    <div id="page">
        <h1>Centred page content goes here</h1>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
    </body>
    </html>
    Remember the ads at the side must not be background images as they may hold real html content such as ad scripts etc.

    The technique used could also be used to overlay graphic images that swirl onto the page and then onto the background without incurring a vast scrollbar.


    Quiz 2: (brought to you by Erik J)

    You know when people say that "CSS can't do that" and we then prove them wrong - well this is another case in hand

    It is usually stated that if you want a fluid with menu with the items equally distributed across the full width of the menu (as in stretchy table-cells) then it can't be done in CSS unless you actually code the precise width of every item (and even this would break in a fluid layout). However if you are dynamically adding menu items on certain pages you can't code a specific width because some pages may have 2 items and some pages may have 5 items or more.

    Your task is to create a horizontal menu that will allow for any number of elements (say for 1 to 10) and those elements will always be equally distributed across the width of the menu.

    The menu itself will be a fluid width.

    Look at the attachment called equal-spread.png which shows a page with various items in the menu and how they are always equally distributed across the available width in the same manner that table cells would distribute them.

    Here is your starting code which you can edit the html and css as you wish. I should point out that the effect can be acccomplished without actually changing the html and css too much so don't make massive changes because it is likely you are doing it wrong.

    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>Distributed Horizontal Menu</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    .nav {
        margin:auto;
        border:3px outset #66f;
        padding:0;
        min-width:42em;
        width:95&#37;;
        height:44px;
        background:#039;
        font:bold 88%/1.1 verdana;
    }
    .nav li {
        float:left;
        list-style:none;
    }
    .nav li a {
        float:left;
        padding:13px 4px 0;
        height:31px;
        color:#ddd;
        text-decoration:none;
        text-transform:capitalize;
    }
    .nav li a:hover {
        margin:-3px;
        border:3px inset #66f;
        color:#ff6;
        background:#36c;
    }
    </style></head><body>
    
    <ul class="nav">
    <!--[test to comment out random items]
        <li><a href="#">netscape&nbsp;9</a></li>
    [the spacing should be distributed]-->
        <li><a href="#">internet&nbsp;explorer&nbsp;6-8</a></li>
        <li><a href="#">opera&nbsp;10</a></li>
        <li><a href="#">firefox&nbsp;3</a></li>
        <li><a href="#">safari&nbsp;4</a></li>
        <li class="last"><a href="#">chrome&nbsp;2</a></li>
    </ul>
    
    </body></html>
    Edit:


    This needs to work in ie6 - 8 and other modern browsers. (as shown in the attachment)


    Have Fun

    Quiz 3 (brought to you by Yurikolovsky )

    Quiz 3 is straight forward and you simply have to create a min-width routine that works in IE6. The page that I want you to create must have a minimum width of 1100px although the technique should work at sizes smaller than this also. The reason for the 1100px min-width will become apparent once you start coding this and doing your research

    No expressions or scripting allowed just straight forward html and css.

    Yurikolovsky has constructed a page showing this in efffect with some nice little buttons that you may want to copy id the mood takes you but the point of the quiz is the min-width effect that will work on an 1100px minimum width layout.

    See the attachment called min-width.png for a clearer view.

    Here is the startng code which you can adjust to suit.
    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>YuriKolovsky - CSS Quiz suggestion #2 -min-width in ie6 and moving buttons</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    /* for all browsers that understand min-width */
    .width {
        width:100%;
        min-width:1100px;
    }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    </style>
    <![endif]-->
    </head>
    <body>
    <div class="width"> </div>
    </body>
    </html>
    Quiz 4 (brought to you by Ryan)

    This is just a little fun quiz that we have touched on before and the task is to create some shadowed text that will work in all browsers.

    See attachment text-shadow.png which shows some text with a nice green shadow. Your task is to reproduce that for all browsers just using valid css and html.

    As the answer is quite simple I have added a second part to the quiz for the more advanced and you have to do exactly the same but you cannot change the html.

    See attachment text-shadow2.png for how the text looks in IE6 and then in Firefox as I will allow some differences.

    The html for the second part of the quiz must remain untouched although you can add as much properietary css as you like (no expressions or javascript as usual).

    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>Untitled Document</title>
    <style type="text/css">
    
    
    </style>
    </head>
    
    <body>
    <h1><span>This is the heading. It doesn't matter what font you use as long as you know this little trick behind it. A simple quiz if you understand the underlying concept. Must work in IE6-8, Opera, Safari, and FF.</span></h1>
    
    </body>
    </html>
    This needs to work in IE6+, FF2+, Opera 9.5+, Safari 3+

    That should be enough to keep you busy all week.

    Don't worrk about doing all quizzes just choose one that suits your ability. Some are easy and some are not so easy but none of them need masses of code.

    Do not post your answers here but PM them to me so that others can have a go without seeing your answers. (
    You must make sure that it works before you send it to me )

    Any questions or if anything is unclear just ask and remember this is just for fun

    Solutions to the quiz will be posted at the end of 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:test18 test 19:
    test 20 test 21: test 22:test 23 :
    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,565
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quiz 1 and 3 submitted. I did 4 so I can't submit that.

    Now for the fun one .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

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

    Number one was close but the ads need to hug the sides of the centred page and not sit at the edges of the viewport. They should remain centred as the viewport is widened just like you would expect for a normal page.

    Number 3 needs more work as you must allow the element to expand to 100&#37; width but only be limited to 1100px minimum size (exactly the same as the way that min-width works).

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Gary has a good solution for quiz 2 that works well for modern browsers and IE8 (not ie6/7). It will serve as an example of how easy this is with the right tools but for this quiz I need this working in IE6 and 7 as well

    Thanks for the entry and for making me clarify this point

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I have a solution from Erik J for quiz 1 which works everywhere except for a small glitch in IE6 which I'm sure is being rectified as I type

  6. #6
    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)
    Quote Originally Posted by Paul O'B View Post
    I have a solution from Erik J for quiz 1 which works everywhere except for a small glitch in IE6 which I'm sure is being rectified as I type
    Sorry I as in a hurry and missed the IE6 check, I have no opportunity to do more lazy stuff today. Too busy...
    Happy ADD/ADHD with Asperger's

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,565
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi Ryan,

    Number one was close but the ads need to hug the sides of the centred page and not sit at the edges of the viewport. They should remain centred as the viewport is widened just like you would expect for a normal page.

    Number 3 needs more work as you must allow the element to expand to 100% width but only be limited to 1100px minimum size (exactly the same as the way that min-width works).
    Ah you weren't clear about the ads .

    Gotcha about number 3.

    Edit:

    Redid quiz 1. submitted.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Ah you weren't clear about the ads .
    Sorry

    The page should look more or less like a 3 column fixed width centred layout except that the side columns do not incur a horizontal scrollbar on the bottom of the viewport when the window is closed. Only the middle section incurs the viewports horizontal scrollbar.

  9. #9
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Thanks for the entry and for making me clarify this point
    Bah! Scope creep. Are you sure you're not a client type?

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by gary.turner View Post
    Bah! Scope creep. Are you sure you're not a client type?

    cheers,

    gary
    lol - don't you like hitting moving targets It's more fun that way.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I have an entry for quiz 2 from Maleika (Kohoutec) similar to Gary's entry but again doesn't work for IE6/7. Good try anyway

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I have a fully working version for Quiz 1 from Erik J now. Well done Erik and thanks for the entry.

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,565
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sofia! View Post
    Hi Ryan!!
    Excelent Test!!
    Hi, thank you . I only have one and others have more interesting quizzes (IMO)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  14. #14
    SitePoint Member
    Join Date
    May 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i have some solutions for the above mentioned once.
    Last edited by Paul O'B; May 30, 2009 at 06:45. Reason: link removed

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by pradeepkha View Post
    i have some solutions for the above mentioned once.
    If you have solutions then PM them to me as mentioned in the instructions.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I have a solution from Gary for the min-width quiz so thanks Gary. It's not the optimal solution so I am still looking for more entries on this

  17. #17
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My attention to detail was also other than optimal.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,565
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I am afraid I don't have a monitor bigger then 1024/600 so I'm going to assume this works..
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    I am afraid I don't have a monitor bigger then 1024/600 so I'm going to assume this works..
    It doesn't

    There is a reason for the 1100px width which will become clear once you have worked out what method to use

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I have a solution for the min-width quiz 3 from Erik J that works exactly as required. Well done erik.

    I also have a partial solution for quiz 1 (the banner ads) form Eric Watson but there are a couple of glitches in IE6 to fix. Other browsers are fine

    Thanks to all that have had a go so far.

  21. #21
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    wait a min, i didn't know about this quiz, until now!!!

    pls let em run, i will definitely do em.


    edit:
    it seems that i checked your post paul, before you edited? it, and added the "new quiz" message, so i was waiting for a email notification that i never got xD (or i simply missed it)


    the quizzes look really useful, although really hard too.


    @ryan
    you have a small screen!
    do it at 1000px wide first, then try 1100, i think this is gonna make life easier for you.

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,565
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Ok Yuri tried with 500px width, got it working, then just changed the values to fit 1100px width and I submitted it.

    If iit doesn't work there must be some special thing about having 1100px width.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  23. #23
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,565
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I have my quiz, second part done, but not in IE6/7. Not going to submit it yet. Are you sure you worked out a way that will work in IE6/7 Paul? Not changing the HTML and replicating the effect in good browsers was easy.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  24. #24
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    yes indeed there is a special thing with the 1100 width
    this is why you should try it with the 1000px width first (i think it should fit your screen)

  25. #25
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,565
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Naw it won't. I tried. It induces a scrollbar. Oh well I think something is wrong with my IE because it seems to be acting up weird lately. I can only target code in IE6 specifically by using * html. It doesn't respond to a CC. I think it thinks its IE7..
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •