SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 40
-
May 18, 2009, 14:01 #1
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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 6-8, FF 3, Opera 10, Safari 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>
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%; 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 6-8, FF 3, Opera 10, Safari 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>
Originally Posted by erik
Edit:
Originally Posted by erik
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:Last edited by Paul O'B; May 26, 2009 at 11:12. Reason: clarification
-
May 19, 2009, 00:26 #2
- 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
-
May 19, 2009, 01:29 #3
- 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
-
May 19, 2009, 04:52 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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.
-
May 19, 2009, 08:37 #5
- Join Date
- Jan 2009
- Location
- Dallas
- Posts
- 990
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
May 19, 2009, 09:25 #6
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Interesting quiz. I'm in
.
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
May 19, 2009, 12:15 #7
- 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"
-
May 19, 2009, 14:43 #8
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Thanks Gary that's a good solution
-
May 19, 2009, 23:20 #9
- Join Date
- May 2007
- Location
- Countryside, Sweden
- Posts
- 3,407
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Happy ADD/ADHD with Asperger's
-
May 20, 2009, 00:42 #10
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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
-
May 20, 2009, 02:12 #11
- Join Date
- Aug 2008
- Posts
- 1
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I am in,
Please check your inbox
-
May 20, 2009, 03:17 #12
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Thanks for your entry itspook I have replied by PM. Keep trying though
-
May 20, 2009, 15:52 #13
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
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. FMLLast edited by RyanReese; May 20, 2009 at 17:29.
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
May 21, 2009, 00:43 #14
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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.
-
May 21, 2009, 09:58 #15
- 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
-
May 21, 2009, 09:59 #16
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Answer submitted...had to use one extra <li> though
.
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
May 22, 2009, 05:46 #17
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Answer is in your inbox
.
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
May 22, 2009, 07:57 #18
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi Ryan,
That's pretty close now
-
May 22, 2009, 10:08 #19
- 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.
-
May 22, 2009, 11:41 #20
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
May 22, 2009, 16:13 #21
- Join Date
- Jan 2009
- Location
- Dallas
- Posts
- 990
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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,
garyAnyone 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
-
May 22, 2009, 18:45 #22
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
I think I'll go with Memorial day
..
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
May 22, 2009, 21:31 #23
- 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,
garyAnyone 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
-
May 23, 2009, 05:06 #24
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 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.
-
May 23, 2009, 05:59 #25
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by Gary
Bookmarks