Your SlideShare is downloading. ×
0
How to create a liquid layout
By Stephanie Redmond & Samantha
Totera
In your new HTML file create 5 divs:
(container header left right main footer)
Create a corresponding style sheet, making sure your
HTML file is linked to it. Then to make your left and
right column 30...
To align text use the text-align:left/right
property in the respected div in your CSS file
To make links to other pages just use the links
code <a href="url">Link text</a> and place it
in the column div you want i...
To style links refer back to your css style sheet. For example to remove line
under your links use a:link {color:#000000; ...
To make an image in the right column:use the <img class="name"
src="images/picture.jpg> code.. class is the name you will ...
We used web based tutorials on
http://www.w3schools.com/
Liquidlayout
Upcoming SlideShare
Loading in...5
×

Liquidlayout

155

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
155
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Liquidlayout"

  1. 1. How to create a liquid layout By Stephanie Redmond & Samantha Totera
  2. 2. In your new HTML file create 5 divs: (container header left right main footer)
  3. 3. Create a corresponding style sheet, making sure your HTML file is linked to it. Then to make your left and right column 300px use the float property, and width:300px property
  4. 4. To align text use the text-align:left/right property in the respected div in your CSS file
  5. 5. To make links to other pages just use the links code <a href="url">Link text</a> and place it in the column div you want it to appear in.
  6. 6. To style links refer back to your css style sheet. For example to remove line under your links use a:link {color:#000000; text-decoration:none;} a:visited {color:#000000; text-decoration:none;} a:hover {color:#FF0; text- decoration:none;} a:active {color:#000000; text-decoration:none;}
  7. 7. To make an image in the right column:use the <img class="name" src="images/picture.jpg> code.. class is the name you will refer to in your css so you can position it in CSS use the float property again
  8. 8. We used web based tutorials on http://www.w3schools.com/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×