SitePoint Sponsor

User Tag List

Results 1 to 25 of 63

Threaded View

  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    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


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
  •