CSS Test your Skills - Archived Quizzes

[Paul O'B]

QUIZ ARCHIVE

Due to several requests I have now documented and linked to the previous CSS quizzes with a short snippet of the task required.

Some of the old quizzes are a bit long in the tooth and there are better methods around today but I will document them anyway.

Quiz1 - May 9 2004

In good browsers you can set bottom:0 and top:180px and keep your element at the bottom of the page and always 180px from the top. This allows the bottom element to reduce as the window is made smaller in height but preserves the top part of the page.

However IE6 won't let you set dimensions of an element by using the positioning properties alone...........

Quiz 2 - May 15 2004

All I want is for you to reproduce this layout so that it works in IE6 and mozilla/firefox. At the moment it is only displaying correctly in firefox so you will need that browser to look at it. Its simply a dashed border that alternates between red and blue dashes.........

Quiz 3 - May 18 2004

Your task is to produce the following rollover vertical list that would usually require javascript to accomplish:

http://www.pmob.co.uk/temp/images/sp...zlistimage.gif

Easy you may say - but wait where's the catch?

The catch is that as you roll your mouse down the list each list item in turn will change its background and text to match the already highlighted item. No catch there you say - that's just a normal list! The real catch is that the already highlighted item (link 1) must also switch off as you scroll down the list..............

Quiz 4 - May 24 2004

There are two simple tasks this week and can be seen in the attached image.

http://www.pmob.co.uk/temp/multicolouredtext.gif

The first task is to re-create some text that is red on the top half and blue on the bottom half. This will introduce you to the css positioning properties and will allow you to gain experience in placing your layout.

The second task is in much the same vein and is just the alphabet with alternating coloured text of red and blue. In this test you are not allowed to use lots of spans.............

Quiz 5 - May 31 2004

Take a look at the link below which shows a simple table layout.

http://www.pmob.co.uk/temp/fourcellstable.htm

There are 4 cells that take up the 100% width and each cell will expand in height and equalise with the cell that contains the most content. The background colour will expand to be consistent with the longest cell. I have put the longest text in each different cell so that you can see the full effect.

While this is a simple job to do in tables it has previously been though almost impossible to replicate with css alone..............

Quiz 6 - June 7 2004

So this week your task (as suggested by a sitepoint member) is to create a 3 column layout that has a full width header, sub header and footer but you are not allowed to use any divs or spans or classes or id's. The html must in fact remain untouched and of course as semantically correct as possible.......

Quiz 7 - Dec 23 2006

The test sounds very simple but will require a little bit of lateral thinking and there may indeed be a number of solutions. All I want you to do is to place the image supplied 50px inside the right edge of a container using only the html that I supply.........

Quiz 8 - Jan 8 2007

I had some spare time so I devised another quick quiz that shouldn't tax you too much . This time I want you to create the famous "holy grail" 3 column layout.

The left and right columns are 250px wide and touch the viewports side edge on both sides. The middle column merely fills the space between these 2 columns as required. Then of course we have the obligatory 100% wide footer that spans all 3 columns at the bottom and must stay below all columns irrespective of the content in each column. (That means absolute positioning is out of the question).

Here is an image of what I want.

Here is the image with a few simple instructions added...............

Quiz 9 - Jan 10 2009

Here is a screenshot of a layout I have produced. Now all you have to do is create the look of that page. I am not worried about you making the exact positions but the series of boxes when completed must look the same as the screenshot above and overlap in the same way.......

Quiz 10 - Jan 18 2009

Look carefully at the attachment to this post which shows a screenshot of a layout I have produced. Now all you have to do is create that coloured box. I am not worried about you making the exact positions etc or using the same colours but the effect should be the same including partially coloured text background and borders.

Note also that this box is a fluid width ...............

Quiz 11 - Jan 23 2009

Look carefully at the attachment which shows actual screenshots of the layout at different screen sizes required. I am not worried about you making the dimensions exactly the same but every element must be perfectly centred in the viewport................

Quiz 12 - Jan 30 2009

Part 1:
Look at the attachment called logo.png and you will see some screenshots of the Sitepoint logo that Erik and I have produced just using CSS. You may think that it is quite easy but no images have been used to create this and as you can see from the screenshots the text size can be bumped up and down and the logo sized accordingly along with the text...............

Part 2:
This is a quiz suggested by Luki be and if you look at the attached file called boxes.png you will see a layout constructed with CSS. Just replicate that layout using css and html and make it work in modern browsers...............

Quiz 13 - Feb 6 2009

After the tricks of previous quizzes we are now going to concentrate on a real world CSS example and create an organisational chart that follows the usual tree structure. This will be created using semantic html kindly supplied by Tommy (AutisticCuckoo)...............

Quiz 14 - Feb 16 2009

In the attachment the default state is as shown in the default screenshot with the three headings across the top the students listed below. This is how the page should look before anything is hovered..............

When you pass your cursor over the "Reading" heading then in the blue list underneath the first, second and third students will be highlighted along with their position number...............

Quiz 15 - Feb 23 2009

Have a look at the attachment and you will see 12 little screenshots of a calendar I have constructed showing the months from January to December. (This exercise took me about 2 hours from start to finish so you will need a long coffee break to attempt this - Note the deliberate mistake where November seems to have more days than it should ;))............

Quiz 16 - Feb 28 2009

Part 1:
The first quiz has been supplied by Tommy (Autistic Cuckoo) and if you take a look at the attachment called graph.png you will see what needs to be done...........

Part 2:
This was suggested by Yurikolovsky and is a nice little rollover effect. Look at the attachment called rolloverbox.gif which is a simple fixed width and height box with text.

All you need to do is to change the box on hover as shown. Every part of the box should be active and point to the same location..............

Quiz 17 - Mar 8 2009

The first quiz (supplied by Erik J) is to create a drop down without using any absolute positioning at all!...........

The second quiz (supplied by Eric Watson) is more straight forward but will still send you around in circles..........

Quiz 18 - Mar 16 2009

A)
In my quiz we are going to invent a new CSS property called "float:center". Just like float:left and float right it allows text to wrap but in this case the element is floated in the centre of some text and the text will part and wrap on both sides of the element............

B)
Quiz B supplied by Roobear will put a smile on your face

Have a look at the attachment called quiz18b-face.png .................

Quiz 19 Mar 28 2009

Your task this week is to imitate a drop down menu that works when you click the top level menu to reveal the sub menu items. That sounds easy enough but you are not allowed to use any javascript or scripting...........

Quiz 20 Apr 11 2009

If you look at the first screenshot (opacity-faded.jpg) you will see that an attempt has been used to use the CSS "opacity" property on the background of the centred box with the unfortunate effect that not only has the background become transparent (as was required) but the inner foreground image and foreground text has also become transparent making the text hard to read and the image look bad.

Your task is to stop the inner content from becoming transparent and if you look at the second screenshot (opacity-full.jpg) you can see how it is supposed to look.............

Quiz 21 - Apr 19 2009

A "sticky footer" is a fixed height footer that sits at the bottom of the viewport, but only sits at the bottom of the viewport when there is not enough content to push it below the fold.

Quiz 22 - May 8 2009

Your mission is to create a data table where the header of the table remains fixed while the data in the table can scroll. This is especially useful for long tables as the header row always stays visible and above the data it refers to.

If you don't know what I mean then take a look at the attachment which clearly shows what I'm asking for.............

Quiz 23 - May 18 2009

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

Quiz 24 - May 27 2009

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

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

3) Quiz 3 is straight forward and you simply have to create a min-widthworks in IE6 routine that . 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............

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

Quiz 25 - Jul 11 2009

Look at the attachment called cross.png.

It is just a simple cross shaped container that holds some text as required. The text can be any length and the container can grow as in the screenshot.

The main rules for this quiz are that no absolute positioning is to be used and it must work in IE6 and IE7 as they are the ones that will exhibit some bugs that you need to squash. (It should also work in all other browsers anyway.).............

Quiz 26 - Aug 1 2009

Here is another short quiz (code wise) that can be in two parts due to browser differences. The task this week is similar to the age old image and caption question where following caption text should wrap at the limits of the image and not push wider than the image.........

Quiz 27 - Aug 30 2009

This week we have possibly the toughest quiz so far of all these quizzes and once again is something that was deemed impossible to do.

Yurikolovsky has come up with a way of making a single level drop down that works in IE6 without any javascript............

Quiz 28 - Sep 25 2009

Implement max-width in IE6 without using javascript or expressions

Quiz 29 - Oct 14 2009

Erik J's Transparent image replacement quiz.

This quiz is from an idea by Erik J and is your chance to have a go at a new and improved image replacement technique that will work with transparent images. Although as I always point out "this is just a quiz for fun" so please leave the semantics aside and just get on with the task . Using the html provided below you must replace the heading text with a transparent image.

[RyanReese]

Absoltuely great Paul. Great work!

[Paul O'B]

Thanks Ryan

[kohoutek]

Very nice overview and much, much easier to go through them.
Thanks for the hard work, Paul.

[YuriKolovsky]

Finally i have a quiz summary page to store in my bookmarks! and share with others!!!