• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Liquid pres
 

Liquid pres

on

  • 272 views

 

Statistics

Views

Total Views
272
Views on SlideShare
272
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Liquid pres Liquid pres Presentation Transcript

  • CREATING A LIQUID THREE LAYOUT Ryan Neves Philippe Roy Solanje Sellier
  • 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.*
  • 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.
  • DESIGN Step 1. Layout Step 2. Containers Step 3. Attributes
  • 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; }
  • 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; }
  • 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; }
  • RESOURCES • http://www.maxdesign.com.au/articles/liquid/ * • http://www.yourhtmlsource.com/stylesheets/ cssbackgrounds.html • http://www.w3schools.com/css/default.asp
  • Website