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


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.


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>


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.


Embedded CSS:

XHTML <span> Element Example

<style type="text/css">

.companyname { font-weight: bold;
font-family: Georgia, "Times New Roman", serif; font-size: 1.25em; }


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



◦ Text & web page elements in the container

The Box Model

◦ Area between the content and the border

◦ Between the padding and the margin

◦ Determines the empty space between the element and adjacent elements


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

Use CSS to configure a line on one or more sides of an element
◦ ◦ ◦ ◦ border-bottom border-left border-right border-top

Configuring Specific Sides of a Border

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:

Use CSS to configure padding on one or more sides of an element
◦ ◦ ◦ ◦ padding-bottom padding-left padding-right padding-top

Configuring Padding on Specific Sides of an Element

h2 { border: 2px solid #ff0000; background-color: #cccccc; padding-left: 5px; padding-bottom: 10px; padding-top: 10px;}

Two numeric values or percentages

CSS padding Property Shorthand: two values

◦ 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; }


Normal Flow

Browser display of elements in the order they are coded in the Web page document

Type static relative absolute Description default position offset from its normal static position a fixed position within its browser window/containing element

Relative Positioning

h1 { background-color:#cccccc; padding:5px; color: #000000; } #myContent { position: relative; left:30px; font-family:Arial,sans-serif; }

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


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; }


Absolute Positioning Example

float Property

h1 { background-color:#cccccc; padding:5px; color: #000000; } p { font-family:Arial,sans-serif; } #yls {float:right; margin: 0 0 5px 5px; border: solid; }

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.


The h2 text is displayed in normal flow.

clear Property
 

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


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 zindex values rendered on the same area of the page.


Checkpoint 1

Describe the difference between relative and absolute positioning.



Page Layout Design Techniques

Ice Design

◦ AKA rigid or fixed design ◦ Fixed-width, usually at left margin ◦ Page content typically centered ◦ Often configured with a fixed or percentage width such as 80%
◦ Page expands to fill the browser at all resolutions.

Jello Design

Liquid Design


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;

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;

Two Column Page Layout

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; }

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.


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




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) 2) 3) 4) 5) Important declarations with user origin Important declarations with author origin Normal declarations with author origin Normal declarations with user origin Any declarations with browser (or other user agent) origin In-line style Id Selector Class Selector Element Selector


1) 2) 3) 4)


Position: Essentially, later has precedence over earlier

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
In-line style, Id, Class, Element
p{} div p { } .sith div p.sith { } #sith body p {} {0,0,0,1} {0,0,0,2} {0,0,1,0} {0,0,1,2} {0,1,0,0} {0,0,0,2} 1 (one element selector) 2 (two element selectors) 10 (one class selector) 12 (two element selectors and a class selector) 100 (one id selector) 2 (two element selectors)

p {} ul li { }
ul ol li .red { }

{0,0,0,1} {0,0,0,2}

1 (one element selector) 2 (two elements)
13 (one class, three elements)



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.


Sign up to vote on this title
UsefulNot useful