INTRODUCTORY Tutorial 7 Creating Liquid Layouts

XP Objectives Discern the differences among various types of layouts Create a liquid layout Create a nested div Conform the footer width to the main column width New Perspectives on Blended HTML, XHTML, and CSS2

XP Objectives Create a three-column layout Modify the layout width Create print styles Link a file to a print style sheet New Perspectives on Blended HTML, XHTML, and CSS3

XP Creating a Two-Column Liquid Layout Must decide between a portrait or landscape orientation A liquid layout is a design that expands or contracts in proportion to the size of the user’s viewport – Measurements are specified using percentages In an elastic layout, em values are used instead of percentage values In a hybrid layout, part of the content may have a liquid layout, and the remainder has a fixed-width layout New Perspectives on Blended HTML, XHTML, and CSS4

XP Creating a Two-Column Liquid Layout New Perspectives on Blended HTML, XHTML, and CSS5

XP Creating a Two-Column Liquid Layout To create a two-column liquid layout: – Decide the width (in percentages) of the narrower of the two columns. Generally, the sidebar column is narrow and the main column is wide. – Decide whether you want the sidebar column to appear on the left or the right – In the style sheet, enter the code for the sidebar and main id selectors. Assign a width (as a percentage) to the sidebar column. Do not assign a width to the main column – In the document body, enter start and end div tags for the sidebar and main divs – If you are not floating all the id selectors, change the source order so that the floated content appears before nonfloated content – If necessary, change the margins and cellpadding of your columns New Perspectives on Blended HTML, XHTML, and CSS6

XP Creating a Two-Column Liquid Layout New Perspectives on Blended HTML, XHTML, and CSS7

XP Creating a Two-Column Liquid Layout New Perspectives on Blended HTML, XHTML, and CSS8

XP Creating a Two-Column Liquid Layout To reposition the sidebar column, change the float property to right, and change the margin-left property to margin-right New Perspectives on Blended HTML, XHTML, and CSS9

XP Creating a Two-Column Liquid Layout Using styles to create a horizontal navbar from an unordered list New Perspectives on Blended HTML, XHTML, and CSS10

XP Creating a Two-Column Liquid Layout Creating a hover effect and a footer – The hover effect changes the appearance of an element when your mouse hovers over it New Perspectives on Blended HTML, XHTML, and CSS11

XP Creating Nested Divs A nested div is a div within another div – Used previously to create a structure with container and wrapper divs New Perspectives on Blended HTML, XHTML, and CSS12

XP Creating Nested Divs New Perspectives on Blended HTML, XHTML, and CSS13

XP Creating Three-Column Liquid Layouts Create a style for the universal selector to zero out padding and margins for all elements Style the body element New Perspectives on Blended HTML, XHTML, and CSS14

XP Creating Three-Column Liquid Layouts Enter the code and styles for the header and navbar – If necessary create a hover effect for the navbar New Perspectives on Blended HTML, XHTML, and CSS15

XP Creating Three-Column Liquid Layouts To create a three-column liquid layout: – Decide on the width (in percentages) for each of the narrower two sidebar columns – Decide how you want the sidebar columns to float – In the style sheet, enter the code for the sidebar and main id selectors. Assign widths to both sidebar columns. Do not assign a width to the main column – In the document body, enter start and end div tags for the sidebars and the main divs – If necessary, change the source order so that the floated content appears before nonfloated content New Perspectives on Blended HTML, XHTML, and CSS16

XP Creating Three-Column Liquid Layouts New Perspectives on Blended HTML, XHTML, and CSS17

XP Creating Three-Column Liquid Layouts New Perspectives on Blended HTML, XHTML, and CSS18

XP Modifying the Layout Width Add a start div tag for the container, just below the start body tag, and an end div tag just above the end body tag Style the container id selector New Perspectives on Blended HTML, XHTML, and CSS19

XP Modifying the Layout Width New Perspectives on Blended HTML, XHTML, and CSS20

XP Using Print Styles A print style is a style designated to create output for printed copy To create print styles: – Change the text color to black and the background color to white – Specify a font size in points – Specify the font family as a serif font – Style the navbar, banner, and images to have a display property value of none – Set the line height to 120% or greater – Use rule to set the page size and margin New Perspectives on Blended HTML, XHTML, and CSS21

XP Using Print Styles New Perspectives on Blended HTML, XHTML, and CSS22