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

3
Objectives

• Understand document flow
• Center an image
• Determine how specificity resolves conflicts
• Create a faux column effect

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 isnt 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

5
Creating a Two-Column Fixed Layout

• Horizontal header row
• Horizontal navbar
• Sidebar
• Main content area
• Footer

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

7
Understanding Web Page Layouts

• Creating the container div serves as a large box
  that contains other boxes

8
Understanding Web Page Layouts

• To create boxes with rounded corners, use design
  software to create four or more images for the
  corner effects

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.

10
Determining the Content Width
11
Determining the Content Width

• Next, create styles for the navbar, sidebar, main
  column, and footer

12
Determining the Content Width
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

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

15
Creating a Three-Column Layout

• The layout plan for the main column

16
Creating a Three-Column Layout

• Create styles for the Section id selector

17
Creating a Three-Column Layout
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.

19
Creating a Three-Column Layout

• Creating Styles for the Footer Div

20
Using _at_import

• The _at_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

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

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

23
Creating Faux Columns
24
Creating Faux Columns
25
Creating Faux Columns