the box model & page layout

The Box Model & Page Layout

Chapter 3 & 6.2

from Textbook

Chapter 6from Web development and Design Foundations with XHTML

Learning Outcomes

In this chapter, you will learn about:

◦ New XHTML elements

◦ The CSS Box Model

◦ Relative and absolute positioning

◦ Configuring basic page layouts using CSS

◦ Configuring two column page layouts using

CSS

2

New XHTML elements

To start with page layout two elements

are needed:

◦ div

◦ span

XHTML

<div> element A block-level element

Purpose: configure a specially formatted division or area of a Web page

◦ There is a line break before and after the division.

◦ Can contain other block-level and inline elements

Useful to define an area that will contain other block-level tags (such as paragraphs or spans) within it.

4

XHTML

<div> Element Example Configure a page footer area

Embedded CSS:

<style type="text/css">

.footer { font-size: small;

text-align: center; }

</style>

XHTML:

<div class=“footer">Copyright © 2009</div>

5

XHTML

<span> element An inline-level element

Purpose:

◦ configure a specially formatted area displayed in-line with other elements, such as within a paragraph.

There is no line break before and after the span.

6

XHTML

<span> Element Example Embedded CSS:

<style type="text/css">

.companyname { font-weight: bold;

font-family: Georgia, "Times New Roman", serif;

font-size: 1.25em;

}

</style>

XHTML:

<p>Your needs are important to us at <span class=“companyname">Acme Web Design</span>.We will work with you to build your Web site.</p>

7

THE BOX MODEL

The Box Model Content

◦ Text & web page

elements in the

container

Padding

◦ Area between the

content and the border

Border

◦ Between the padding

and the margin

Margin

◦ Determines the empty

space between the

element and adjacent

elements

9

The CSS border Property

Configures a border on the top, right, bottom,

and left sides of an element

Consists of

◦ border-width

◦ border-style

◦ border-color

h2 { border: 2px solid #ff0000 }

CSS Borders:

Block / Inline Elements Block element

◦ default width of element content extends to browser margin (or specified width)

Inline element

◦ Border closely outlines the element content

h2 { border: 2px solid #ff0000; }

a { border: 2px solid #ff0000; }

Browser Display Can Vary

Configuring Specific

Sides of a Border Use CSS to configure a line on one or more

sides of an element

◦ border-bottom

◦ border-left

◦ border-right

◦ border-top

h2 { border-bottom: 2px solid #ff0000 }

The CSS padding Property

Configures empty space between the content of

the XHTML element and the border

Set to 0px by default

h2 { border: 2px solid #ff0000;

padding: 5px; }

No padding configured:

Configuring Padding on

Specific Sides of an Element Use CSS to configure padding on one or more

sides of an element

◦ padding-bottom

◦ padding-left

◦ padding-right

◦ padding-top


background-color: #cccccc;

padding-left: 5px;

padding-bottom: 10px;

padding-top: 10px;}

CSS padding Property Shorthand:

two values Two numeric values or percentages

◦ first value configures top and bottom padding

◦ the second value configures left and right padding



padding: 20px 10px;

}

Four numeric values or percentages

◦ Configure top, right, bottom, and left padding


width: 250px;


padding: 30px 10px 5px 20px;

}

CSS padding Property Shorthand:

four values

POSITIONING

Normal Flow

Browser display of elements in the order

they are coded in the Web page

document

Positioning

Type Description

static default position

relative offset from its normal static position

absolute a fixed position within its browser

window/containing element

Relative Positioning

Changes the location of an element in relation to where it would otherwise appear

21

h1 { background-color:#cccccc;

padding:5px;

color: #000000;

}

#myContent { position: relative;

left:30px;

font-family:Arial,sans-serif;

}

Absolute Positioning

Precisely specifies the location of an element in the browser window

22


padding:5px;

color: #000000;

}

#content {position: absolute;

left:200;

top:100;

font-family:Arial,sans-serif;

width:300;

}

Absolute Positioning Example

float Property

Elements that seem to

“float" on the right or

left side of either the

browser window or

another element are

often configured using

the float property.

24


padding:5px;

color: #000000;

}

p { font-family:Arial,sans-serif;

}

#yls {float:right;

margin: 0 0 5px 5px;

border: solid;

}

clear Property

Useful to “clear” or

terminate a float

Values are: left, right,

and both

The h2 text

is displayed

in normal

flow.

clear: left; was

applied to the h2. Now

the h2 text displays

AFTER the floated

image.

Display Property

Configures how and if an element is displayed

◦ display:none ;

The element will not be displayed.

◦ display:block ;

The element is rendered as a block element – even if it is

actually an inline element,

such as a hyperlink.

◦ display:inline;

The element will be rendered as an inline element – even

if it is actually a block element – such as a <li>.

26

Z-Index Property

Modifies the stacking order of

elements on a Web page.

default z-index value is “0”

Elements with higher z-index

values will appear stacked on

top of elements with lower z-

index values rendered on the

same area of the page.

27

Checkpoint 1

Describe the difference between relative

and absolute positioning.

28

PAGE LAYOUT

Page Layout Design Techniques

Ice Design◦ AKA rigid or fixed design

◦ Fixed-width, usually at left margin

Jello Design◦ Page content typically centered

◦ Often configured with a fixed or percentage width such as 80%

Liquid Design◦ Page expands to fill the browser at all resolutions.

31

CSS Page Layout

Example

Except for imagelogo, all elements

on this page follow normal flow

Two Column

Page Layout

wrapper contains the two columns – sets default background color

Left-column navigation

◦ float: left;

◦ width:100px;

Right-column content

◦ margin-left: 100px;

floatright (flower photo)

◦ float: right;

33

Two Column

Page Layout

body {margin: 0;

font-family: Verdana, Arial, sans-serif; }

#wrapper { background-color :#e8b9e8;

color: #000066;

width: 100%;

min-width :800px; }

#leftcolumn { float: left;

width: 100px; }

#rightcolumn { margin-left :100px;

background-color :#ffffff;

color :#000000; }

#logo { background-color :#eeeeee;

color: #cc66cc;

font-size :x-large;

border-bottom: 1px solid #000000;

padding: 10px; }

.content {padding :20px 20px 0 20px; }

#floatright {margin :10px;

float: right; }

#footer {font-size: xx-small;

text-align: center;

clear: right;

padding-bottom: 20px; }

div#leftcolumn a { text-decoration :none;

margin: 15px; display :block; } 34

Deciding to Configure a class or id

Configure a class:

◦ If the style may apply to more than one element on a

page

◦ Use the . (dot) notation in the style sheet.

◦ Use the class attribute in the XHTML.

Configure an id:

◦ If the style is specific to only one element on a page

◦ Use the # notation in the style sheet.

◦ Use the id attribute in the XHTML.

35

Choosing a Name for a class or an id

A class or id name should be descriptive of the purpose:◦ such as nav, news, footer, etc.

◦ Bad choice for a name: redText, bolded, blueborder, etc.

The 10 most commonly used class names are:

footer, menu, title, small, text, content, header, nav, copyright, and button

Source: http://code.google.com/webstats

36

http://code.google.com/webstats

CONFLICT RESOLUTION

The

Cascade

This “cascade” applies the styles in the order of precedence.

Site-wide global styles can be configured in the external CSS.

Styles can be overridden when needed for a specific page or element.

Precedence Rules

From highest to lowest

a) Document level

1) In-line style sheets. 2) document style sheets. 3) external style sheets

b) Origins & weight

1) Important declarations with user origin

2) Important declarations with author origin

3) Normal declarations with author origin

4) Normal declarations with user origin

5) Any declarations with browser (or other user agent) origin

c) Specificity

1) In-line style

2) Id Selector

3) Class Selector

4) Element Selector

d) Position: Essentially, later has precedence over earlier

Specificity

40

In-line style ,Id, Class, Element

0,0,0,1--- one element

0,0,1,1 ---, one class, one element

0,1,0,3--- one id, three elements

Example: Specificity

41

In-line style, Id, Class, Element

p { } {0,0,0,1} 1 (one element selector)

div p { } {0,0,0,2} 2 (two element selectors)

.sith {0,0,1,0} 10 (one class selector)

div p.sith { } {0,0,1,2} 12 (two element selectors and a class selector)

#sith {0,1,0,0} 100 (one id selector)

body p {} {0,0,0,2} 2 (two element selectors)

p {} {0,0,0,1} 1 (one element selector)

ul li { } {0,0,0,2} 2 (two elements)

ul ol li .red { } {0,0,1,3} 13 (one class, three elements)

Summary

This chapter introduced you to using Cascading

Style Sheets to configure page layouts.

Be patient with yourself and plan on reviewing

the CSS resources material.

It takes a while to grasp this technology.

42

the box model & page layout

Documents