Tutorial 6 Creating Fixed-Width Layouts

1. Tutorial 6Creating 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. Using @import • The @import 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