1 / 11

Chapter 5: Basic Page Layout From Stylin book

Chapter 5: Basic Page Layout From Stylin book. Multi-Column Layouts. Basic use of columns is to organize a list of navigation links down the left or right side of the page next to a main content area. (Fig. 1)

courtney
Download Presentation

Chapter 5: Basic Page Layout From Stylin book

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 5: Basic Page Layout From Stylin book

  2. Multi-Column Layouts • Basic use of columns is to organize a list of navigation links down the left or right side of the page next to a main content area. (Fig. 1) • Another common use is a three column site, typically with left navigation, content in the middle, and right column for advertisements. (Fig. 2) (Fig. 1) (Fig. 2)

  3. Floated vs. Absolute Layouts • Two basic approaches to creating columns in a page layout: • Floated  Side-by-side • Absolutely positioned  Fix the width and locations of the columns • Floated are easy to implement, but you must be careful to ensure that you don’t accidentally cause the total width of the columns to exceed the width of the layout. • Absolutely positioned columns are removed from the document flow and have no sense of their relationship to one another. The columns are entirely independent and don’t interact with one another. • Use floated column approach when possible.

  4. Sample Layout 1 • Link to example 1 <div id=“content”> <div id=“content_innner”> <h1>My text style...</h1> <p>A brief paragraph...</p> </div> </div> <div id=“footer”> <div id=“footer_inner”> <p>This is the footer.</p> </div> </div> </div> </body> <body> <div id=“main_wrapper”> <div id=“header”> <div id=“header_inner”> <h1>The header area</h1> </div> </div> <div id=“nav”> <div id=“nav_inner”> <ul> <li>Nav1</li> <li>Nav2</li> </ul> </div> </div>

  5. Sample Layout 1 • We have four div’s, each with their respective “_inner” div’s: header, nav, content, footer. Let’s look at part of the style sheet. (Link to style sheet). #main_wrapper { width:840px; -- width of columns will change proportionally as this is changed. margin-left:auto; -- centers layout in browser margin-right:auto; -- centers layout in browser text-align:left; } #header {} #nav { width:22%; -- this width + nav width must total 100% float:left; -- floats on nav and content make them sit side-by-side } #content { float:left; -- floats on nav and content make them sit side-by-side width:78%; -- this width + nav width must total 100% top:0px; } #footer {clear:both;} – makes the footer sit below whichever col. is larger • The inner divs allow for the application of padding and margins without increasing the width of the outer divs (shrink the content), remember?).

  6. Sample Layout 1 • In the style declaration #header_inner, #nav_inner, #content_inner, #footer_inner the overflow property is set to hidden. This makes sure the floated elements won’t break if their width is automatically expanded by a large piece of content (image larger than the width of the box, for example). • To make the layout liquid (able to more closely fit any monitor’s width), simply remove the width:840px; from the main_wrapper div. • Having unlimited liquid changes though can be a problem. Shrinking the screen down to a width of 100px will overlap the columns, and enlarging it too far will put all the content on one incredibly long line. • Specify max and min width constraints to fix this: max-width:960px; min-width:720px;

  7. Sample Layout 2 • This will demonstrate a sample 3-column layout. • Only difference: add another column div, float it, then share the 100% width among the three columns to our liking. • Link to example 2 <div id=“content”> <div id=“content_innner”> <h1>My text style...</h1> <p>A brief paragraph...</p> </div> </div> <div id=“promo”> <div id=“promo_inner”> <ul> <li>Nav1</li> <li>Nav2</li> </ul> </div> </div> <div id=“footer”> <div id=“footer_inner”> <p>This is the footer.</p> </div> </div> </div> </body> <body> <div id=“main_wrapper”> <div id=“header”> <div id=“header_inner”> <h1>The header area</h1> </div> </div> <div id=“nav”> <div id=“nav_inner”> <ul> <li>Nav1</li> <li>Nav2</li> </ul> </div> </div>

  8. Sample Layout 2 • We’ll change the widths a bit to accommodate for the 5th div. #main_wrapper { width:840px; margin-left:auto; margin-right:auto; text-align:left; } #header {} #nav { width:18% float:left; } #content { float:left; width:60%; top:0px; } #promo { width:22%; float:left; } #footer {clear:both;} Link to style sheet

  9. Extending Columns • By using div layouts, unlike tables, you will notice that the boxes are only as tall as the content within them. You may want to, for prettiness sake, elongate the columns. There are two ways to extend them: • Faux Columns  Adding a background graphic to the wrapper div of the page that is the same width and color as the column we want to extend. • Programmatically extend the div  Adds a javascript function that finds the height of the longest column as the page loads and instantly sets the other columns to this height.

  10. Faux Columns • The example we’ll be using is named 2_col_liquid_faux.html • style sheet #main_wrapper { max-width:960px; /* sets max layout width */ min-width:720px; /* sets min layout width */ margin-left:auto; /* centers layout in browser */ margin-right:auto; /* centers layout in browser */ text-align:left; /* resets the centering hack for IE6 on the body tag */ background:url(../../../stylin2_chapters/chapter_5/images/2_col_faux_art.gif) repeat-y; } repeat-y makes the graphic repeat as many times as needed in order to fill the container. ** It’s important to remember that if you’re using this technique, everything should have a background color so the faux graphic doesn’t show through where you don’t want it to.

  11. Programmatically Extended Columns • This concept relies on JavaScript determining through the DOM (Document Object Model) which column is longest, and setting the other columns to that length. • A popular technique uses code named NiftyCorners by Alessandro Fulciniti to achieve the trademark “Web 2.0” look of rounded corners as well as programmatically extended columns.

More Related