Scribd
Upload
39 views

CSS For Page Layout: Key Concepts

This document discusses CSS page layout techniques. It outlines several advantages to using CSS for page layout, including greater typography control, smaller page sizes, and easier maintenance. Some disadvantages include browser inconsistencies and a learning curve for those familiar with table-based layouts. The document then covers key CSS page layout concepts like the box model, normal and positioned flows, floats, clears, and debugging techniques. Examples are provided for common layouts like two-column pages. Overall resources for further CSS page layout study are also listed.

Uploaded by

Nermin Begić
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
39 views

CSS For Page Layout: Key Concepts

This document discusses CSS page layout techniques. It outlines several advantages to using CSS for page layout, including greater typography control, smaller page sizes, and easier maintenance. Some disadvantages include browser inconsistencies and a learning curve for those familiar with table-based layouts. The document then covers key CSS page layout concepts like the box model, normal and positioned flows, floats, clears, and debugging techniques. Examples are provided for common layouts like two-column pages. Overall resources for further CSS page layout study are also listed.

Uploaded by

Nermin Begić
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

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

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.

Content
Text & web page
elements in the
container

The Box Model

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

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

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.

The
background
does not
extend as far
as youd
expect.

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

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

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

body {margin: 0;
font-family: Verdana, Arial, sans-serif; }

#wrapper { background-color :#e8b9e8;


color: #000066;
width: 100%;

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

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

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

You might also like