The Box Model & Page Layout

Chapter 3 & 6.2

from Textbook
Chapter 6
from 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 &copy; 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
 Content

◦ Text & web page
The Box Model
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

h2 { border: 2px solid #ff0000;

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

h2 { border: 2px solid #ff0000;

background-color: #cccccc;
padding: 20px 10px;
}
 CSS padding Property Shorthand:
four values
 Four numeric values or percentages
◦ Configure top, right, bottom, and left padding

h2 { border: 2px solid #ff0000;

width: 250px;
background-color: #cccccc;
padding: 30px 10px 5px 20px;
}
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

h1 { background-color:#cccccc;
padding:5px; Changes the location of
an element in relation to
color: #000000; where it would
} otherwise appear
#myContent { position: relative;
left:30px;
font-family:Arial,sans-serif;
}
21
 Absolute Positioning
Precisely specifies the location of an
element in the browser window

h1 { background-color:#cccccc;
padding:5px;
color: #000000;
}
#content {position: absolute;
left:200;
top:100;
font-family:Arial,sans-serif;
width:300;
} 22
Absolute Positioning Example
 float Property

h1 { background-color:#cccccc;  Elements that seem to

padding:5px; “float" on the right or
color: #000000; left side of either the
}
p { font-family:Arial,sans-serif;
browser window or
} another element are
#yls {float:right; often configured using
margin: 0 0 5px 5px; the float property.
border: solid;
}

24
The h2 text
is displayed
clear Property
in normal
flow.  Useful to “clear” or
terminate a float
 Values are: left, right,
and both

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
body {margin: 0;
font-family: Verdana, Arial, sans-serif; }
#wrapper { background-color :#e8b9e8;
color: #000066;
width: 100%;
Page Layout
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
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

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

40
 Example: Specificity
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)

41
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