Liquid pres

306 views
253 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
306
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide









  • Liquid pres

    1. 1. CREATING A LIQUID THREE LAYOUT Ryan Neves Philippe Roy Solanje Sellier
    2. 2. WHAT IS A LIQUID LAYOUT? All containers are based on the viewport rather than the initial containing block. A liquid layout will move in and out when you resize your browser window.*
    3. 3. OBJECTIVE Create a liquid Layout with three columns using the following layout: The layout should - 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 300px - Make sure you use padding and margin to create the same text flow as in the example.
    4. 4. DESIGN Step 1. Layout Step 2. Containers Step 3. Attributes
    5. 5. CONTAINERS • Createone container to div.container { house all other containers width:100%; margin:0px; border:1px solid gray; background: white; } • Add Header & Footer div.header,div.footer { padding:0.5em; color:white; background-color:gray; clear:both; }
    6. 6. CONTAINERS • Add inner containers div.left { float:left; width:266px; margin:0px; padding:1em; } div.right { float:right; width:266px; margin:0; padding:1em; text-align:right; background:url(../images/guymagglass.jpg) no-repeat left top; } div.content { margin-left:298px; margin-right:298px; border-left:1px solid gray; border-right:1px solid gray; padding:1em; font-family:Arial,Helvetica,sans-serif; }
    7. 7. ATTRIBUTES h1,h2.head { padding:0; margin:0; text-align:left; font-family:Arial,Helvetica,sans-serif; } div.left { float:left; • Position a background image in the right hand column away width:266px; from the text margin:0px; padding:1em; } div.right • Align the text in the Header to the left { float:right; width:266px; margin:0; padding:1em; • Align the text in the right hand column to the right text-align:right; background:url(../images/guymagglass.jpg) no- repeat left top; } div.content • Remove the line under all links, change their color to { margin-left:298px; a color of your choice. margin-right:298px; border-left:1px solid gray; border-right:1px solid gray; padding:1em; • Specify the width of the right and left column to be font-family:Arial,Helvetica,sans-serif; 300px } a:link,a:visited { font-weight:bold; color:#FFFFFF; • Make sure you use padding and margin to create the background-color:#ff9900; same text flow as in the example. text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover, a:active { background-color:#ff6600; }
    8. 8. RESOURCES • http://www.maxdesign.com.au/articles/liquid/ * • http://www.yourhtmlsource.com/stylesheets/ cssbackgrounds.html • http://www.w3schools.com/css/default.asp
    9. 9. Website

    ×