SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 40
  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

  2. #2
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    looks simple by looking at the screen shots, but i bet it isn't

  3. #3
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you should make it a multilevel dropdown too, to add to the fun

  4. #4
    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)
    I've edited the first post to add some clarification and some starting CSS for those that may need it.

    It may look easy but it's not as straight forward as it looks.

  5. #5
    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
    It may look easy but it's not as straight forward as it looks.
    It's as straight forward as it looks. (Well, it is when you've already dealt with the issue before.)

    Solution is in your in-box.

    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

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

  7. #7
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    im in, but later, now work, and ill do this when i have "relax time"

  8. #8
    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)
    Thanks Gary that's a good solution

  9. #9
    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 peach View Post
    you should make it a multilevel dropdown too, to add to the fun
    To give the blue container a percentage height of its parent is the most fun part I think in this problem.

    Good luck css contenders!
    Happy ADD/ADHD with Asperger's

  10. #10
    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)
    I have an entry from Maleika (Kohoutec) which is horizontally centred nicely but also needs to be vertically centred. Well done so far anyway

  11. #11
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am in,
    Please check your inbox

  12. #12
    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)
    Thanks for your entry itspook I have replied by PM. Keep trying though

  13. #13
    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)
    Does it really matter what height we set (like I just set a height like 50&#37; on the container just to make it fluid)?

    Just need vertical of the <li>'s and I'm done. Fun quiz.

    Edit:

    Wowww..left it at school. FML
    Last edited by RyanReese; May 20, 2009 at 17:29.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  14. #14
    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)
    I don't think it matters what height as long as its centred and a percentage of the parent.

  15. #15
    SitePoint Member
    Join Date
    May 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    looks simple by looking at the screen shots, but i bet it isn't

    Thanks Regards
    Hen

  16. #16
    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 submitted...had to use one extra <li> though .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  17. #17
    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 is in your inbox .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  18. #18
    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)
    Hi Ryan,

    That's pretty close now

  19. #19
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    when is this gona end?
    i wana know until when i got time.

  20. #20
    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)
    Quote Originally Posted by YuriKolovsky View Post
    when is this gona end?
    i wana know until when i got time.
    I'll let it run over the holiday weekend (Monday's a holiday here) and I'll post results on Tuesday.

  21. #21
    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
    I'll let it run over the holiday weekend (Monday's a holiday here) and I'll post results on Tuesday.
    And which holiday would that be?

    May 25 Oral Roberts sees 900 foot tall Jesus Christ, Tulsa OK, 1980 (Now, that's just weird.)
    May 25 Successful test of the limelight in Purfleet, England, 1830 (A thespian high holy day?)
    May 25 African Freedom Day in Zimbabwe
    May 25 African Liberation Day in Chad, Mauritania and Zambia
    May 25 Anniversary of the Revolution of 1810 in Argentina (And, the Falklands two weeks later?)
    May 25 Independence Day in Jordan
    May 25 Memorial Day in New Mexico & Puerto Rico
    May 25 Revolution in the Sudan in Libyan Arab Republic
    May 25 International Towel Day, in honour of Douglas N. Adams (This sounds like a good reason to celebrate. )
    May 25 Aujourd'hui, c'est la St(e) Sophie.
    May 25 Memorial Day in USA (Last Monday of May-that's our excuse to shut down for a long weekend.)
    May 25 The belgian government moves to France, 1940 (Wow! Now that's a smooth move, but no reason to celebrate.)

    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

  22. #22
    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 think I'll go with Memorial day ..
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  23. #23
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I looked it up. It's the spring bank holiday. All you Brits enjoy your lollygagging. Our Memorial Day holiday is a time to remember and honor those who died in service to the country. I plan to get some lollygag time, too. Ryan, you can use the time to finish the quiz.

    I like my list better. How do you get a warm fuzzy feeling about a bank holiday? Now the Belgians running to France for protection from the Germans, that's funny, and a reason for taking a day off.

    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

  24. #24
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I remember when Wallace and Grommit needed to think of something to do for their Bank Holiday... weird. My husband works for a British company and they're always telling him "have a great holiday weekend" and we're like, what holiday? I like International Towel Day. I'd pick that one.

    But we just had Jesus Goes Back To Heaven holiday, and next weekend is Pinkster (two days of Pinkster!) -- one for when God tells Moses what the Jews should do, and then another day when the Holy Ghost sets the Apostles on Fire.

    These holidays sure sound better than they are though. I'm still waiting for the government to add Muslim holidays too. Then we'd have a whole month of holiday.

  25. #25
    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)
    Quote Originally Posted by Gary
    All you Brits enjoy your lollygagging.
    I don't think I've ever lollylagged


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
  •