Exercise 5: CSS layout

In groups of 4, research how to and then create create a Liquid three column layout

Post on your individual blogs a link to a presentation (multimedia based, such as powerpoint) that demonstrates the steps necessary to create a common layout for a website using CSS.

Create a liquid layout with three columns using the following layout:

css layout

Your layout has to

– Load the same background image in three different pages.

– Position a background image in the right hand column away from the text

– Align the text in the Header to the left

– Align the text in the right hand column to the right

– Remove the line under all links, change their color to a color of your choice.

– Specify the width of the right and left column to be 300 px

– Make sure you use padding and margin to create the same text flow as in the example.

—-

As a group create the layout and develop a presentation that explains how you did it.

Post your answer as a comment to this post.

Adapt the layout created by the group and start using for your own website.

Advertisements
Comments
  1. miannacci43 says:

    Daniel Ku, Iphiah Henry, Matt Iannacci: liquid layout presentation:

    http://miannacci43.wordpress.com/2010/10/13/exercise-3-css-layout/

  2. robmidpit7 says:

    here is our liquid layout presentation for Nick Tiringer, JD Shippel, and Robin Nicholls
    http://robmidpit7.wordpress.com/?attachment_id=25

  3. ashleywilden says:

    here is our presentation! (link to final layout at end of presentation)

    -Ashley Wilden, Michael Nguyen, and Mark Valmores

    http://ashwilden.wordpress.com/2010/10/19/exercise-3-css-liquid-layout/

  4. danelon says:

    Here is the adaptation for my bio page on my website:
    http://imagearts.ryerson.ca/cdanelon/bio/index.html

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s