SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 27 of 27
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,289
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    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 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.
    Quiz 30 - Nov 22 2009

    There 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 31 - Dec 19 2009

    The 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 32 : Jan 10 2010

    For 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...
    Quiz 33 - March 23 2010

    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


    Your 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.
    Quiz 35 - October 24 2010

    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.
    The 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.
    Quiz 37 May 14 2011

    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.

    Take 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 38 - May 22 2011
    Hot 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.
    Quiz 39 - Aug 14 2011

    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

    Using 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.
    Quiz 42 - float center revisited - July 2012

    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.
    Quiz 43 - Fixed right column in fluid layout? - October 2013
    The quiz is mainly concerned with created a fixed position block at the top of a right column in a responsive (fluid) layou
    Quiz 44 - Re-order content
    Flexbox makes the re-ordering of content a cinch as you can move elements visually up and down the page without breaking the flow of the document (as with absolute positioning). Your task is to mimic a part of this behaviour but without using flexbox and for it to work in IE8+.
    Last edited by Paul O'B; Nov 23, 2013 at 11:14.

  2. #27
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,289
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    What is a CSS reset?

    A "reset" is basically a means of removing certain defaults such as padding and margins from your elements so that all browsers start with a clean slate. Browsers all apply different defaults and a reset tries to address this issue so that there is a level playing field to start with.

    Browsers have their own internal stylesheets that apply defaults to html elements such as deciding how much padding or margin should be applied by default. Indeed the internal stylesheet is quite comprehensive as it covers many aspects such as the look and feel of form controls and even which elements are actually visible or not (e.g. the elements in the head of the page).

    If you have Firefox on Windows XP then browse to the Firefox folder and then look for a folder called "res" (at least that's where the files are located on my system but other systems may vary) .

    Inside that folder you will find a number of css files that are used by the browser. The 2 most important ones are called html.css and forms.css. Open these up in your editor and you will see that your blank page comes with a variety of pre-applied styles before you even start to code.

    For example here are the styles for some heading tags from html.css:
    Code:
    h1 {
      display: block;
      font-size: 2em;
      font-weight: bold;
      margin: .67em 0;
    }
    
    h2 {
      display: block;
      font-size: 1.5em;
      font-weight: bold;
      margin: .83em 0;
    }
    
    h3 {
      display: block;
      font-size: 1.17em;
      font-weight: bold;
      margin: 1em 0;
    }
    
    h4 {
      display: block;
      font-weight: bold;
      margin: 1.33em 0;
    }
    
    h5 {
      display: block;
      font-size: 0.83em;
      font-weight: bold;
      margin: 1.67em 0;
    }
    
    h6 {
      display: block;
      font-size: 0.67em;
      font-weight: bold;
      margin: 2.33em 0;
    }
    As you can see the font-size and margins are all defined before you get them.

    The problem with this is that all browsers apply different defaults. For example IE rarely applies a top margin to any element but applies a bottom margin only. the font-size and the amount of the margin differ also.

    Multiply this problem by the number of browsers there are and you can see that before you start to code a single line you have a mountain of differences to overcome before you even start.

    What's the best method.


    Once upon a time it was commonplace for authors to place a global reset into their stylesheet as follows:

    Code:
    * {margin:0;padding:0}
    The universal selector was used to target all the elements in the page and then to set their margins and padding to zero.

    This was a simple method that worked well but apart from 2 main flaws.
    1)The first and main problem was that it destroyed the look of certain form elements such as selects and submit buttons in a way that couldn't be re-instated. Buttons would lose their depressed look when clicked and the button on the select would look odd in various browsers.

    Once you target a form element you lose the ability to put back the original styling for some parts of the control.

    If you don't believe me then set a background color for a submit button and then try to reverse it back to default.

    2)A second problem with this method is that you are addressing all elements in the document and on large documents there could be speed implications in making the browser do this. Although in reality this argument would only be true for extreme cases and in most cases the loss of speed would not be noticeable to the user.
    Some users would also take the reset a step further and apply many more properties to the rule such as borders and font-sizes and colours etc. This would have the effect of exacerbating problem 2 but also ruined inheritance in some cases.

    Authors would do things like this:

    Code:
    *{color:#000}
    Then later on in the stylesheet they would define a colour for a section:
    Code:
    div{color:blue}
    Then using well formed code they would do this:
    Code:
    <div><p>Why am I black?</p></div>
    The text then would be black and not blue because the universal selector had killed the inheritance from the parent element.

    Eric Meyer

    Therefore authors looked for a better reset and Eric Meyer jumped in to the rescue first with his explanation of "Really undoing html" followed later by his "reset reloaded" article.

    This was a comprehensive reset that addressed most html elements without harming form controls. A lot of authors (including me at the time) jumped on the bandwagon and immediately started using the reset in all their projects.

    Later on I began to realise that perhaps this was overkill and I was ending up defining certain elements twice. Once for the reset and then once with the real margin or padding that I wanted.

    Why didn't I just do it right in the first place and just do it once?

    This was the biggest argument against this reset in that it was overkill and indeed the latest version is smaller than the original but still contains too many elements that don't really need to be there.

    Gary Turner wrote a good thread on why he thought the reset was bad and I'll let you read it and make up your own mind.

    Whether you use a reset is up to you as some people like them and some people hate them. I think they are unnecessary if you know what you are doing because you can simply address the elements you are using at the time you are using them.

    Beginners latch on to resets because it seems to sort their problems out for them rather than understanding what is actually going on.

    Most authors use some sort of default or starting point so it's best that you do understand the implications of what you are using and make your own choices.
    Last edited by Paul O'B; Mar 14, 2010 at 15:05.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •