Lab2: CSS

Last modified by Administrator on 2010/03/04 12:59

References

Standard

Tools

Pure CSS design

Practice

Try your hand at CSS with the following practical assignments.

Comments

From the html in comments.html, produce the following output. No changes are allowed in the HTML, no images are allowed. The result should look the same on all browsers (FF3.0+, Opera, Chrome/Safari, IE 6,7,8). 

comments.png

Collapsible comments *

From the html in comments-colapsible.html, by adding only the appropriate href values for the show and hide links, implement the hide and show functionality on click on the appropriate buttons, as suggested by the following images. No other changes allowed in the HTML, no images are allowed. Do not use Javascript code in the href attribute. The solution is only required to work in Mozilla Firefox 3.5+.

comments-collapsible-hide.png

And after clicking the "show" link:

comments-collapsible-show.png

CSS Star *

Using the star.html file, write the CSS rules that create the following image. No changes allowed in the HTML. The solution is only required to work in Mozilla Firefox 3.5+.

star.png

Pure CSS Menus *

Design the XHTML and CSS to create a drop down menu, using only CSS and no javascript. It should unveil new options on hover, something like the following image suggests:

menu.png

Note: Solution is not required to work on Internet explorer browsers (smaller than IE7 inclusive).

CSS Side column *

Using the csscolumn.html and initial csscolumn.css, create a layout that meets the following requirements:

  • The header and footer must have 100% width and their heights can vary.
  • The side column must have a fixed width (200px) with a 16px padding and a 10px horizontal distance from other elements.
  • The whole ensemble (content + side column) fills the entire window width.
  • Write 2 CSS files:
    • The first one for places the side column on the left of the content:
            [ col ] [ the content ]
    • The second places the side column on the right of the content
            [ the content ] [ col ]

Note: No changes allowed in the HTML.

Tags:
Created by Administrator on 2010/03/03 21:41

This wiki is licensed under a Creative Commons 2.0 license
XWiki Enterprise 2.2.1.27354 - Documentation