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
Quiz 2 - May 15 2004In 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 3 - May 18 2004All 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.........
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 5 - May 31 2004There are two simple tasks this week and can be seen in the attached image.
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 6 - June 7 2004Take a look at the link below which shows a simple table layout.
Test your CSS skills - Number 5
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 7 - Dec 23 2006So 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 8 - Jan 8 2007The 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 9 - Jan 10 2009I 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 10 - Jan 18 2009Here 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 11 - Jan 23 2009Look 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 ...............
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
Quiz 13 - Feb 6 2009Part 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...............
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 14 - Feb 16 2009After 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 15 - Feb 23 2009In 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 16 - Feb 28 2009Have 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 17 - Mar 8 2009Part 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...........
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 18 - Mar 16 2009
Quiz 19 Mar 28 2009A)
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............
Quiz B supplied by Roobear will put a smile on your face
Have a look at the attachment called quiz18b-face.png .................
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
Quiz 28 - Sep 25 2009
Quiz 29 - Oct 14 2009
Erik J's Transparent image replacement quiz.
Quiz 30 - Nov 22 2009This 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.
Quiz 31 - Dec 19 2009There are two quizzes this month and the first is to create multi columns from a single unordered list and the second quiz is vertical-align multiple images in the viewport......
Quiz 32 : Jan 10 2010The challenge is basically to take 3 column layout and make it display vertically when the screen is reduced to 320px wide and the content is aligned nicely in one column without the need to scroll sideways.
Quiz 33 - March 23 2010For the first quiz in 2010 I am going to allow you some creative leeway and rather than set a specific puzzle for you to solve I want you to come up with your own CSS only animation effect.
This could be some sort of simple interactive game, image trick or an effect caused by moving the mouse or moving the browser window...
In this quiz we are going to solve a real life problem that affects IE7 and IE6 (and is a real pain at times).
All we have is a parent that is floated to the left but without a width so that it shrinks wraps its content. Then we place a fixed width element such as an image into the mix. Lastly we float two elements, one left and one right to line up with the element above's side edges.
All is well in all browsers except IE7 and IE6 and the problem is that a right floated element in a width-less left floated parent will stretch the element to 100% width. The effect is ruined in completely in IE7 and the first element is stretched 100% wide but rather more strangely the second and third elements are broken in a different way to the first.
Quiz 34 - April 06 2010
Quiz 35 - October 24 2010Your task is to create a centred "Fixed footer" using position:fixed that works in IE7 and above. (IE6 doesn't understand position:fixed so we won't bother with coding for that although in real life examples you would probably give IE6 alternative code to have just a normal footer (although there are a number of hacks to give it a fixed footer if needed).
Although a fixed footer is relatively easy to do the task is complicated by the fact that there is a "back to top" link on the right side of this fixed footer that needs to remain in view when the screensize is smaller than the container.
2 quizzes this month.
The first is to cure the white space bug when using inline-block especially in webkit browsers.
The second quiz is to attempt to style an input type="file".
Quiz 36 - December 21 2010
A nice little quiz for Christmas.
Quiz 37 May 14 2011The task this week is to take a fluid height element (such as a banner or various ads) that sits near the end of the html and make it show first when the page is displayed. This is easy to accomplish if the element is a fixed height but generally thought to be impossible if the element is a fluid or dynamic height.
Create a crosshair effect when you hover over a link and sets of horizontal and vertical parallel lines stretch out to all edges of the viewport.
Quiz 38 - May 22 2011Take a lot at the attachment (crosshair) and you will see a nice little list sitting in the window. The top screenshot (1) shows the menu in its standard state and there is nothing special here. Just a normal list that you've done hundreds of times.
The second and third screenshots (2 and 3) shows what happens when you rollover the menu and parallel horizontal and vertical lines appear (almost like a cross-hair) and stretch to the edges of the viewport.
As you run down the menu the lines follow accordingly but most importantly as soon as you leave the blue menu area the lines disappear.
Quiz 39 - Aug 14 2011Hot on the heels of the last quiz I have another task for you to complete. Look at the attachment and you will see a simple tab menu which has normal round corners at the top and inverted round corners at the bottom.
Your task is to create that tab menu.
CSS - Test Your CSS Skills Number 39 - dropdown arrows:
On my CSS "wishlist" is the "parent selector" that would give you the ability to style the parent of a child using the child as the reference. Or similarly the ability to style a parent element based on the child element that it contains. Alas there is no such thing in CSS - yet.
That's all well and good but where is that leading us?
In this quiz I will be asking you to perform the above feat in some respects in that I want you to automatically add indicator arrows to show that the item contains a dropdown menu. Essentially if a list element contains a dropdown menu then show an arrow.
Quiz 40 - Dead Centre Aug 24 2011
You have an image gallery that displays random images from your database. The images are all various sizes and you have no control over what size the image will be.
The design calls for the images to be shown in a 200px x 200px square regardless of the size of the image however the image should not be resized.
What the task requires is that all images be centred horizontally and vertically within the 200px x 200px square which means that small images will be centred nicely and very large images will just show the centre portion of the image which in most cases is likely to be the important part of the image rather than just a flash of sky at the top.
QUIZ 41 Two Expanding Divs - June 2012
Quiz 42 - float center revisited - July 2012Using only CSS (no scripting or expressions allowed but css3 is necessary) the task is two take two divs that occupy 50% of the page and then when clicking on an appropriate link one div will expand to 80% and the other div will shrink to 20% (and vice versa) while both remaining in the flow of the page.
Using only CSS (no scripting or expressions) the task is to float a fixed height and width image so that it spans two separate columns and the text is displaced accordingly in each column. The columns may be a fixed width or a fluid width but the technique should work for either.