CSS - Test Your CSS Skills Number 23

**Paul O'B** · May 18, 2009 14:01

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.

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:

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:

**YuriKolovsky** · May 19, 2009 00:26

looks simple by looking at the screen shots, but i bet it isn't

**peach** · May 19, 2009 01:29

you should make it a multilevel dropdown too, to add to the fun

**Paul O'B** · May 19, 2009 04:52

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.

**gary.turner** · May 19, 2009 08:37

Originally Posted by Paul O'B

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

**RyanReese** · May 19, 2009 09:25

Interesting quiz. I'm in

.

**YuriKolovsky** · May 19, 2009 12:15

im in, but later, now work, and ill do this when i have "relax time"

**Paul O'B** · May 19, 2009 14:43

Thanks Gary that's a good solution

**Erik J** · May 19, 2009 23:20

Originally Posted by peach

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!

**Paul O'B** · May 20, 2009 00:42

I have an entry from Maleika (Kohoutec) which is horizontally centred nicely but also needs to be vertically centred. Well done so far anyway

**itspook** · May 20, 2009 02:12

I am in,
Please check your inbox

**Paul O'B** · May 20, 2009 03:17

Thanks for your entry itspook I have replied by PM. Keep trying though

**RyanReese** · May 20, 2009 15:52

Does it really matter what height we set (like I just set a height like 50% 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

**Paul O'B** · May 21, 2009 00:43

I don't think it matters what height as long as its centred and a percentage of the parent.

**guccihand** · May 21, 2009 09:58

looks simple by looking at the screen shots, but i bet it isn't

Thanks Regards
Hen

**RyanReese** · May 21, 2009 09:59

Answer submitted...had to use one extra <li> though

.

**RyanReese** · May 22, 2009 05:46

Answer is in your inbox

.

**Paul O'B** · May 22, 2009 07:57

Hi Ryan,

That's pretty close now

**YuriKolovsky** · May 22, 2009 10:08

when is this gona end?
i wana know until when i got time.

**Paul O'B** · May 22, 2009 11:41

Originally Posted by YuriKolovsky

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.

**gary.turner** · May 22, 2009 16:13

Originally Posted by Paul O'B

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

**RyanReese** · May 22, 2009 18:45

I think I'll go with Memorial day

..

**gary.turner** · May 22, 2009 21:31

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

**Stomme poes** · May 23, 2009 05:06

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.