CSS - Test Your CSS Skills Number 24

**Paul O'B** · May 27, 2009, 06:56

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>

Remember the ads at the side must not be background images as they may hold real html content such as ad scripts etc.

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&#37;;
    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&nbsp;9</a></li>
[the spacing should be distributed]-->
    <li><a href="#">internet&nbsp;explorer&nbsp;6-8</a></li>
    <li><a href="#">opera&nbsp;10</a></li>
    <li><a href="#">firefox&nbsp;3</a></li>
    <li><a href="#">safari&nbsp;4</a></li>
    <li class="last"><a href="#">chrome&nbsp;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>

Quiz 4 (brought to you by Ryan)

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>

This needs to work in IE6+, FF2+, Opera 9.5+, Safari 3+

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 :

**RyanReese** · May 27, 2009, 16:01

Quiz 1 and 3 submitted. I did 4 so I can't submit that.

Now for the fun one

.

**Paul O'B** · May 28, 2009, 02:38

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).

**RyanReese** · May 28, 2009, 04:51

Originally Posted by Paul O'B

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).

Ah you weren't clear about the ads

.

Gotcha about number 3.

Edit:

Redid quiz 1. submitted.

**Paul O'B** · May 28, 2009, 02:41

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

**gary.turner** · May 28, 2009, 11:19

Originally Posted by Paul O'B

Thanks for the entry and for making me clarify this point

Bah! Scope creep. Are you sure you're not a client type?

cheers,

gary

**Paul O'B** · May 28, 2009, 16:06

Originally Posted by gary.turner

Bah! Scope creep. Are you sure you're not a client type?

cheers,

gary

lol - don't you like hitting moving targets

It's more fun that way.

**Paul O'B** · May 28, 2009, 03:33

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

**Erik J** · May 28, 2009, 04:23

Originally Posted by Paul O'B

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

Sorry I as in a hurry and missed the IE6 check, I have no opportunity to do more lazy stuff today. Too busy...

**Paul O'B** · May 28, 2009, 05:21

Ah you weren't clear about the ads

.

Sorry

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.

**Paul O'B** · May 29, 2009, 02:13

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

**Paul O'B** · May 29, 2009, 09:05

I have a fully working version for Quiz 1 from Erik J now. Well done Erik and thanks for the entry.

**RyanReese** · May 29, 2009, 15:38

Originally Posted by Sofia!

Hi Ryan!!
Excelent Test!!

Hi, thank you

. I only have one and others have more interesting quizzes (IMO)

**pradeepkha** · May 30, 2009, 00:10

i have some solutions for the above mentioned once.

**Paul O'B** · May 30, 2009, 06:46

Originally Posted by pradeepkha

i have some solutions for the above mentioned once.

If you have solutions then PM them to me as mentioned in the instructions.

**Paul O'B** · May 30, 2009, 06:50

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

**gary.turner** · May 30, 2009, 08:01

My attention to detail was also other than optimal.

cheers,

gary

**RyanReese** · May 30, 2009, 08:59

I am afraid I don't have a monitor bigger then 1024/600 so I'm going to assume this works..

**Paul O'B** · May 30, 2009, 09:30

Originally Posted by RyanReese

I am afraid I don't have a monitor bigger then 1024/600 so I'm going to assume this works..

It doesn't

There is a reason for the 1100px width which will become clear once you have worked out what method to use

**Paul O'B** · May 31, 2009, 03:16

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.

**YuriKolovsky** · May 31, 2009, 07:58

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.

**RyanReese** · May 31, 2009, 12:21

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.

**RyanReese** · May 31, 2009, 12:35

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.

**YuriKolovsky** · May 31, 2009, 12:36

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)

**RyanReese** · May 31, 2009, 12:39

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..

The SitePoint Forums have moved.

User Tag List

Thread: CSS - Test Your CSS Skills Number 24

Thread Tools

Display

Hybrid View

CSS - Test Your CSS Skills Number 24

Bookmarks

Bookmarks

Posting Permissions