SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 63
Hybrid View
-
May 27, 2009, 06:56 #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 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>
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%; 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 9</a></li> [the spacing should be distributed]--> <li><a href="#">internet explorer 6-8</a></li> <li><a href="#">opera 10</a></li> <li><a href="#">firefox 3</a></li> <li><a href="#">safari 4</a></li> <li class="last"><a href="#">chrome 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>
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>
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 :Last edited by Paul O'B; Jun 15, 2009 at 02:53.
-
May 27, 2009, 16:01 #2
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Quiz 1 and 3 submitted. I did 4 so I can't submit that.
Now for the fun one.
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
May 28, 2009, 02:38 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi Ryan,
Number one was close but the ads need to hug the sides of the centred page and not sit at the edges of the viewport. They should remain centred as the viewport is widened just like you would expect for a normal page.
Number 3 needs more work as you must allow the element to expand to 100% width but only be limited to 1100px minimum size (exactly the same as the way that min-width works).
-
May 28, 2009, 04:51 #4
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
May 28, 2009, 02:41 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Gary has a good solution for quiz 2 that works well for modern browsers and IE8 (not ie6/7). It will serve as an example of how easy this is with the right tools but for this quiz I need this working in IE6 and 7 as well
Thanks for the entry and for making me clarify this point
-
May 28, 2009, 11:19 #6
- 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 28, 2009, 16:06 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
May 28, 2009, 03:33 #8
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I have a solution from Erik J for quiz 1 which works everywhere except for a small glitch in IE6 which I'm sure is being rectified as I type
-
May 28, 2009, 04:23 #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 28, 2009, 05:21 #10
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Ah you weren't clear about the ads.
The page should look more or less like a 3 column fixed width centred layout except that the side columns do not incur a horizontal scrollbar on the bottom of the viewport when the window is closed. Only the middle section incurs the viewports horizontal scrollbar.
-
May 29, 2009, 02:13 #11
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I have an entry for quiz 2 from Maleika (Kohoutec) similar to Gary's entry but again doesn't work for IE6/7. Good try anyway
-
May 29, 2009, 09:05 #12
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I have a fully working version for Quiz 1 from Erik J now. Well done Erik and thanks for the entry.
-
May 29, 2009, 15:38 #13
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
May 30, 2009, 00:10 #14
- Join Date
- May 2009
- Posts
- 3
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
i have some solutions for the above mentioned once.
Last edited by Paul O'B; May 30, 2009 at 06:45. Reason: link removed
-
May 30, 2009, 06:46 #15
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
May 30, 2009, 06:50 #16
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I have a solution from Gary for the min-width quiz so thanks Gary.
It's not the optimal solution so I am still looking for more entries on this
-
May 30, 2009, 08:01 #17
- Join Date
- Jan 2009
- Location
- Dallas
- Posts
- 990
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
My attention to detail was also other than optimal.
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 30, 2009, 08:59 #18
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
I am afraid I don't have a monitor bigger then 1024/600 so I'm going to assume this works..
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
May 30, 2009, 09:30 #19
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
May 31, 2009, 03:16 #20
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I have a solution for the min-width quiz 3 from Erik J that works exactly as required. Well done erik.
I also have a partial solution for quiz 1 (the banner ads) form Eric Watson but there are a couple of glitches in IE6 to fix. Other browsers are fine
Thanks to all that have had a go so far.
-
May 31, 2009, 07:58 #21
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
wait a min, i didn't know about this quiz, until now!!!
pls let em run, i will definitely do em.
edit:
it seems that i checked your post paul, before you edited? it, and added the "new quiz" message, so i was waiting for a email notification that i never got xD (or i simply missed it)
the quizzes look really useful, although really hard too.
@ryan
you have a small screen!
do it at 1000px wide first, then try 1100, i think this is gonna make life easier for you.
-
May 31, 2009, 12:21 #22
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Ok Yuri tried with 500px width, got it working, then just changed the values to fit 1100px width and I submitted it.
If iit doesn't work there must be some special thing about having 1100px width.Always looking for web design/development work.
http://www.CodeFundamentals.com
-
May 31, 2009, 12:35 #23
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
I have my quiz, second part done, but not in IE6/7. Not going to submit it yet. Are you sure you worked out a way that will work in IE6/7 Paul? Not changing the HTML and replicating the effect in good browsers was easy.
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
May 31, 2009, 12:36 #24
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
yes indeed there is a special thing with the 1100 width
this is why you should try it with the 1000px width first (i think it should fit your screen)
-
May 31, 2009, 12:39 #25
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Naw it won't. I tried. It induces a scrollbar. Oh well I think something is wrong with my IE because it seems to be acting up weird lately. I can only target code in IE6 specifically by using * html. It doesn't respond to a CC. I think it thinks its IE7..
Always looking for web design/development work.
http://www.CodeFundamentals.com
Bookmarks