1. Tutorial 6 Creating Fixed-Width Layouts

2. Objectives Create a two-column layout
Use id selectors to create styles
Create page structure with the div element
Determine fixed column widths using pixels
New Perspectives on Blended HTML, XHTML, and CSS

3. Objectives Understand document flow Center an image
Determine how specificity resolves conflicts
Create a faux column effect
New Perspectives on Blended HTML, XHTML, and CSS

4. Understanding Web Page Layouts
There is no standard method for creating Web page layouts
Layouts take planning
Broken layouts do not appear on the screen as planned
Column drop occurs when there isn’t enough horizontal space to display all of the columns in your layout
Fixed-width layouts
Fluid layouts
Consider items that might reduce the viewing area
Widget sidebars
New Perspectives on Blended HTML, XHTML, and CSS, 2e

5. Creating a Two-Column Fixed Layout
Horizontal header row
Horizontal navbar
Sidebar
Main content area
Footer
New Perspectives on Blended HTML, XHTML, and CSS, 2e

6. Understanding Web Page Layouts
The div element defines a division in an XHTML document
The universal selector is used to select all of the elements on the Web page
New Perspectives on Blended HTML, XHTML, and CSS, 2e

7. Understanding Web Page Layouts
Creating the container div serves as a large box that contains other boxes
New Perspectives on Blended HTML, XHTML, and CSS, 2e

8. Understanding Web Page Layouts
To create boxes with rounded corners, use design software to create four or more images for the corner effects
New Perspectives on Blended HTML, XHTML, and CSS, 2e

9. Determining the Content Width
To determine the value for the width property of a div element to be used for column content:
If a div such as a header or footer div spans the entire row, subtract the sum of the left and right margins, the border, and the padding values from the width of its parent container to determine the content width.
For side-by-side columns, choose an appropriate content width for each column. Columns of secondary importance, such as sidebar and section columns, should be narrow. The column of primary importance, such as the main column, should be the widest.
New Perspectives on Blended HTML, XHTML, and CSS, 2e

10. Determining the Content Width
New Perspectives on Blended HTML, XHTML, and CSS, 2e

11. Determining the Content Width
Next, create styles for the navbar, sidebar, main column, and footer
New Perspectives on Blended HTML, XHTML, and CSS, 2e

12. Determining the Content Width
New Perspectives on Blended HTML, XHTML, and CSS, 2e

13. Using the Positioning Properties
The document flow describes how the contents of the page are recognized by the browser
Absolute positioning
Relative positioning
The left property positions an element a certain distance from the left edge of the screen
The top property positions an element a certain distance from the top edge of the screen
The z-index property stacks elements on top of each other
New Perspectives on Blended HTML, XHTML, and CSS, 2e

14. Creating a Three-Column Layout
The source order is the order of the content in the document flow
Browser normally reads from top to bottom and left to right
Floated divs must appear before nonfloated divs
You may need to modify the source order
Create styles for the header, sidebar column, and main column
Flanking columns are columns that appear to the left or the right of the main column
New Perspectives on Blended HTML, XHTML, and CSS, 2e

15. Creating a Three-Column Layout
The layout plan for the main column:
New Perspectives on Blended HTML, XHTML, and CSS, 2e

16. Creating a Three-Column Layout
Create styles for the Section id selector
New Perspectives on Blended HTML, XHTML, and CSS, 2e

17. Creating a Three-Column Layout
New Perspectives on Blended HTML, XHTML, and CSS, 2e

18. Creating a Three-Column Layout
Centering an Image:
To center an image, use the declaration:
img.classname {
display: block;
margin: auto; }
where img is the image element and classname is the name of the class.
Apply the class to the image to be centered.
To center all images, use the same declarations for the image element selector.
New Perspectives on Blended HTML, XHTML, and CSS, 2e

19. Creating a Three-Column Layout
Creating Styles for the Footer Div:
New Perspectives on Blended HTML, XHTML, and CSS, 2e

20.
rule allows users to import style rules from other style sheets
Must come after CSS comments and before any of the styles code in the style sheet
New Perspectives on Blended HTML, XHTML, and CSS, 2e

21. Understanding Specificity
Specificity determines priorities and uses a weighting method to calculate which style rule will prevail if there are conflicting rules in the same source
Generally, the style farthest down in the list will prevail
The W3C has a weighting methodology for calculating the specificity of particular selectors
Weighting values will help determine which style will prevail
New Perspectives on Blended HTML, XHTML, and CSS, 2e

22. Creating Faux Columns
The CSS overflow property with a value of “auto” adds a vertical scroll bar as needed
Faux columns add a background image to create the illusion that the columns have equal height
New Perspectives on Blended HTML, XHTML, and CSS, 2e

23. Creating Faux Columns
New Perspectives on Blended HTML, XHTML, and CSS, 2e

24. Creating Faux Columns
New Perspectives on Blended HTML, XHTML, and CSS, 2e

25. Creating Faux Columns
New Perspectives on Blended HTML, XHTML, and CSS, 2e