Keynote 'Mr. Service - Composer & Conductor of Service Providing' V01.02.00
Liquid pres
1. CREATING A LIQUID THREE
LAYOUT
Ryan Neves Philippe Roy Solanje Sellier
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. 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.
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; }