CSS for Page Layout

Key Concepts

CSS Page Layout Advantages

Greater typography control

Style is separate from structure

Potentially smaller documents

Easier site maintenance

Increased page layout control

Increased accessibility

Ability to define styles for multiple media types

Support of the Semantic Web

2

CSS Page Layout Disadvantages

There still remain issues with the lack of uniform browser support of CSS

If you are already adept at designing page layout using XHTML tables, your productivity will temporarily drop as you learn to configure page layout with CSS.

3

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

4

Normal Flow

Browser display of elements in the order

they are coded in the Web page

document

Figure 6.5 Figure 6.6

Relative Positioning

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

6

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

7

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

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.

9

h1 { background-color:#cccccc;

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.

overflow Property Intended to configure the

display of elements on a Web

page.

However, it is useful to

“clear” or terminate a float

before the end of a container

element

Values are auto, hidden, and

scroll

The

background

does not

extend as far

as you’d

expect.

overflow: auto;

was applied to the div

that contains the image

and paragraph. Now the

background extends and

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

◦ You’ll work with the display property in Hands-On Practice

6.6 and in Chapter 7.

12

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.

13

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;

15

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

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.

17

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

18

CSS Debugging Tips

Manually check syntax errors

Use W3C CSS Validator to check syntax errors

◦ http://jigsaw.w3.org/css-validator/

Configure temporary background colors

Configure temporary borders

Use CSS comments to find the unexpected

/* the browser ignores this code */

Don’t expect your pages to look exactly the same in all browsers!

Be patient!

19

CSS Page Layout

Resources For additional study: http://glish.com/css/

◦ Large collection of CSS page layouts and links to tutorials

http://www.websitetips.com/css/index.shtml

◦ Comprehensive list of tutorials and CSS-related sites

http://www.meyerweb.com/eric/css/

◦ The web site of Eric Meyer, a leading-edge web developer

http://www.w3.org/Style/CSS/learning

◦ W3C’s list of CSS resources

http://www.bluerobot.com/web/layouts/

◦ A “reservoir” of CSS page layouts

http://www.blooberry.com/indexdot/css/

◦ CSS syntax reference list

20