Tutorial 7 Creating Liquid Layouts INTRODUCTORY

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 CSS 2

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 CSS 3

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 CSS 4

Creating a Two-Column Liquid Layout

New Perspectives on Blended HTML, XHTML, and CSS 5

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 CSS 6

Creating a Two-Column Liquid Layout

New Perspectives on Blended HTML, XHTML, and CSS 7

Creating a Two-Column Liquid Layout

New Perspectives on Blended HTML, XHTML, and CSS 8

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 CSS 9

Creating a Two-Column Liquid • Layout Using styles to create a horizontal navbar from an unordered list

New Perspectives on Blended HTML, XHTML, and CSS 10

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 CSS 11

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 CSS 12

Creating Nested Divs

New Perspectives on Blended HTML, XHTML, and CSS 13

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 CSS 14

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 CSS 15

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 CSS 16

Creating Three-Column Liquid Layouts

New Perspectives on Blended HTML, XHTML, and CSS 17

Creating Three-Column Liquid Layouts

New Perspectives on Blended HTML, XHTML, and CSS 18

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 CSS 19

Modifying the Layout Width

New Perspectives on Blended HTML, XHTML, and CSS 20

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 the @page rule to set the page size and margin

New Perspectives on Blended HTML, XHTML, and CSS 21

Using Print Styles

New Perspectives on Blended HTML, XHTML, and CSS 22