SitePoint Sponsor

User Tag List

Results 1 to 25 of 40

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,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)

    CSS - Test Your CSS Skills Number 23

    CSS - Test Your CSS Skills Number 23 : Quiz ended - Solution posted in post #30

    This quiz is brought to you courtesy of Erik J.

    Have a look at the attachment called "centred-menu-screenshot.jpg" as Erik has included pictures of what you need to achieve and the instructions.

    The menu must be both vertically and horizontally centred in the red bordered blue container but the menu itself has no actual widths defined at all and must be fluid to cater for any amount of text.

    The blue navbar-container must have fluid dimensions and be vertically and horizontally centred on screen also.

    You must construct the menu using the provided html and you can only add extra CSS. The html itself cannot be changed or added to. You are allowed to use conditional comments for IE.

    The menu should work in IE6- 8, Firefox3, Safari3+ and Opera 9.5+.

    There can be slight variations between browsers as long as the effect is much the same.

    Here is the starting code:

    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>Nested Centering Test</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    
    <style type="text/css">
    
    
    </style>
    
    <!--[if lt IE 8]>
    <style type="text/css">
    
    </style>
    <![endif]-->
    
    </head><body>
    
    <h1>Centering a Floated Widthless Navbar. Tested in IE&nbsp;6-8, FF&nbsp;3, Opera&nbsp;10, Safari&nbsp;4.</h1>
    <ul id="navbar">
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link Two</a></li>
        <li><a href="#">Link Three</a></li>
        <li><a href="#">Link Four</a></li>
        <li><a href="#">Link Five</a></li>
    </ul>
    <p>The menu above must be both vertically and horizontally centred in the red bordered blue container. 
    This blue navbar-container must have fluid lengths and be vertically and horizontally centred on screen. 
    No change to the html allowed, just add the required css are. (Conditional comments also allowed for IE).</p>
    
    </body></html>
    Remember you can't change the html but only add your own css.

    Edit:



    For those that need a helping hand to start then Erik has provided this CSS as a starting point.

    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>>Nested Cenering Test</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    
    <style type="text/css">
    html,
    body{
        margin:0;
        padding:0;
        width:100&#37;;
        height:100%;
        background:#ccf;    
    }
    ul{
        margin:0;
        padding:0;
    }
    h1,
    p{
        margin:0;
        padding:10px 0;
        text-align:justify;
        font-size:100%;
    }
    #navbar{
        padding-right:.15em; /* padding is to soak up the negaive margin on the last item */
    }
    #navbar li{
        float:left;
        margin:0 -.15em -.15em 0; /* negative margin is to soak up the border to the adjacent item */
        border:.15em solid #000;
        list-style:none;
    }
    #navbar a{
        float:left;
        padding:.6em;
        background:#33f;
        color: #fff;
        text-decoration:none;
    }
    #navbar a:hover {
        background: #fff;
        color: #009;
    }
    </style>
    
    <!--[if lt IE 8]>
    <style type="text/css">
    /*** Style for IE6-7 ***/
    </style>
    <![endif]-->
    
    </head><body>
    
    <h1>Centering a Floated Widthless Navbar. Tested in IE&nbsp;6-8, FF&nbsp;3, Opera&nbsp;10, Safari&nbsp;4.</h1>
    <ul id="navbar">
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link Two</a></li>
        <li><a href="#">Link Three</a></li>
        <li><a href="#">Link Four</a></li>
        <li><a href="#">Link Five</a></li>
    </ul>
    <p>The menu above must be both vertically and horizontally centered in the red bordered blue container. 
    This blue navbar-container must have fluid lengths and be vertically and horizontally centred on screeen. 
    Changes to the html are not allowed, but all supported css are. So also IE conditional comments.</p>
    
    </body></html>
    There is also some clarification.
    Quote Originally Posted by erik
    Maybe add or clarify one rule; the heading text should be placed close above the blue box and the paragraph text be placed close below the blue box. At least I had a problem achieving that because it affected the solution.

    So for achieving the text placed like in the images I should give extra points to the solver.

    Also:
    Edit:

    Quote Originally Posted by erik
    To give the blue container a percentage height of its parent is the most fun part I think in this problem






    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 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:
    Attached Images Attached Images
    Last edited by Paul O'B; May 26, 2009 at 11:12. Reason: clarification


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
  •