Liquid layout (mpm17) group 9 presentation By: Iphiah, Daniel, and Matt!(1)good

663 views

Published on

Liquid layout powerpoint

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

  • Be the first to like this

No Downloads
Views
Total views
663
On SlideShare
0
From Embeds
0
Number of Embeds
78
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Liquid layout (mpm17) group 9 presentation By: Iphiah, Daniel, and Matt!(1)good

  1. 1. Liquid Layout <ul><li>What is it? </li></ul>Presentation by Daniel, Iphia & Matt
  2. 2. <ul><li>It is when all containers on the page have their widths defined in percents – meaning that they are completely based on the viewport rather than the initial containing block. A liquid layout will move in and out when you resize your browser window. </li></ul><ul><li>Example: http://www.maxdesign.com.au/articles/liquid/liquid-sample1/ </li></ul>So let’s start this.......
  3. 3. What's the secret behind a liquid layout? <ul><li>Create a basic grid layout before coding </li></ul><ul><li>Ensure columns don't spread too wide by including gutters </li></ul><ul><li>Use percentage units for widths of containers </li></ul><ul><li>Allow for browser rendering issues by not defining containers that use full width of a page </li></ul>
  4. 4. How to achieve a liquid layout: (1) Start by sketching on paper or imaging software a rough layout grid for your web page
  5. 5. What's the secret behind a liquid layout? <ul><li>(2) Leave some free space on the page to account for browser errors. For example, leaving &quot;gutter &quot; undefined, so there is 3% of free space at the right of the layout. </li></ul><ul><li>Column percentage width </li></ul><ul><li>Gutter 1 3% </li></ul><ul><li>Column 1 48% </li></ul><ul><li>Gutter 2 3% </li></ul><ul><li>Column 2 20% </li></ul><ul><li>Gutter 3 3% </li></ul><ul><li>Column 3 20% </li></ul><ul><li>Gutter 4 undefined </li></ul><ul><li>Total 97% </li></ul>
  6. 6. <ul><li>(3) Making the containers, convert columns into <div> containers. Apply a width, &quot;margin-left&quot; and &quot;float: left” </li></ul><ul><li>Column margin-left column width total width </li></ul><ul><li>Column 1 3% 48% 51% </li></ul><ul><li>column 2 3% 20% 23% </li></ul><ul><li>Column 3 3% 20% 23% </li></ul><ul><li>Total 97% </li></ul><ul><li>(4) Fix Internet browser bugs </li></ul>What's the secret behind a liquid layout?
  7. 7. (5) Add a header and footer HTML <body> <div id=&quot;header&quot;></div> <div id=&quot;col1&quot;></div> <div id=&quot;col2&quot;></div> <div id=&quot;col3&quot;></div> <div id=&quot;footer&quot;></div> </body> CSS #header { margin-bottom: 10px; } #col1 { float: left; width: 48%; margin-left: 3%; display: inline; ; } margin-left: 3%; } #col2 { float: left; width: 20%; margin-left: 3%; } #col3 { float: left; width: 20%; margin-left: 3%; } #footer { clear: both; } What's the secret behind a liquid layout?
  8. 8. <ul><li>(6) Adding text within columns. You must apply padding to the containers, it is better to pad the items within a container than the container itself. </li></ul><ul><li>Advantages of CSS liquid layouts </li></ul><ul><li>Decreases the HTML/body text ratio </li></ul><ul><li>Flexibility </li></ul><ul><li>Increases accessibility and usability </li></ul><ul><li>Works well on modern browsers and on some older browsers. Proves to be usable on text-only browsers. </li></ul><ul><li>Looks as good if not better than table layouts once it's ready. </li></ul><ul><li>http://www.maxdesign.com.au/articles/liquid/liquid-sample5/ </li></ul>What's the secret behind a liquid layout?

×