Download CSS part 2

CSS more details
•
•
•
•
•
•
•
•
•
Reasons to use CSS for page layout
Relative and absolute positioning
The CSS Box Model
Configuring single column page layouts using CSS
Configuring two column page layouts using CSS
Configuring three column page layouts using CSS
Configuring navigation using lists
Styling for print media
CSS page layout resources
1
CSS Page Layout Overview



The idea of using CSS for page layout is not
new
W3C Recommendations for CSS level 2
published in 1998
In the past year or so --An increasing number of commercial sites are
using CSS for page layout
Wired http://www.wired.com
ESPN http://www.espn.com
TruGreen http://www.trugreen.com
2
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
3
CSS Page Layout
Disadvantages


There is one large disadvantage – the
use of this technology is not yet
uniformly supported by browsers.
This current disadvantage will be less
of an issue in the future people stop
using old browsers and the newer
browsers comply with standards.
Examples in the text have been
tested with Internet Explorer 6,
Netscape 7, Opera 7.5, and Firefox
1.5, and Mozilla 1.7.
4

Content
• Text & web page
elements in the
container

The Box Model
Padding
• Area between the
content and the
margin

Border
• Between the
padding and the
margin

Margin
• Determines the
empty space
between the
element and
adjacent elements
5
CSS Positioning
Properties (1)
h1 { background-color:#cccccc;
padding:5px;
color: #000000;
}
#myContent { position: relative;
left:30px;
font-family:Arial,sans-serif;
}

Relative
• Use to slightly
change the
location of an
element in
relation to where
it would
otherwise appear
6
CSS Positioning
Properties (2)

h1 { background-color:#cccccc;
padding:5px;
color: #000000;
}
#content {position: absolute;
left:200;
top:100;
font-family:Arial,sans-serif;
width:300;
}
Absolute
• Use to precisely
specify the
location of an
element in the
browser window
7
h1 { background-color:#cccccc;
padding:5px;
color: #000000;
}
p { font-family:Arial,sans-serif;
}
#yls {float:right;
margin: 5px;
border: solid;
}
CSS Positioning
Properties (3)

Float
• 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.
8
CSS Positioning
Properties (4)

Display
• The display property configures how
and if an element is displayed.
• An element configured with
display:none will not be displayed.
This is sometimes used when
configuring styles to print a web page
• An element configured with
display:block will be rendered as a
block element (even if it is actually an
inline element, such as an anchor tag.9
CSS Positioning
Properties (5)

Z-index
Used
to modify the
stacking order of
elements on a web page.
The default z-index
value is “0".
Elements with higher zindex values will appear
stacked on top of
elements with lower zindex values rendered on
the same position of the
page.
10
CSS Properties Used with Page
Layout & Formatting


See Table 10.1 in your text for an
alphabetical listing.
Also see the Web Developer’s
Handbook on the Student CD
11
Questions
1.
State three reasons to use CSS for
page layout on a commercial site
being developed today.
2.
Describe the difference between
relative and absolute positioning.
3.
In the following code snippet the
logo appears under instead of over
the images. Explain why. (See your
textbook for the code snippet.)
12
Two Column Page Layout
A common design for a web page is a
two-column layout with left-column
navigation and right-column logo and
content.
13
body {margin:0px;
font-family:Verdana, Arial, sans-serif; }
#leftcolumn { float:left; width:100px;
background-color:#eeeeee;
height:400px; }
#rightcolumn { }
#logo{background-color:#eeeeee;
color: #cc66cc; font-size:x-large;
border-bottom: 1px solid #000000;
padding:10px; }
.content {padding:20px 0px 0px 150px; }
#floatright {margin:10px; float:right; }
.footer {font-size:xx-small;
text-align:center; clear:right; }
.navBar{
color:#000066;
text-decoration:none;
padding:3px; margin: 15px;
display:block; }
a.navBar:link {color:#000066; }
a.navBar:visited {color:#000000; }
a.navBar:hover {color:#cc66cc; }
Two Column
Page Layout
14
Navigation Layout
Using Lists



Navigation link areas are actually
“lists" of links
Some web design gurus argue that
Navigation links should be configured
using XHTML list elements
Use the list-style-image property to
configure the “bullet"
list-style-image:url(arrow.gif).
15

CSS:
.navBar{

CSS & XHTML
Navigation List
color:#000066;
text-decoration:none;
padding:3px;
margin: 15px;
display:block; }
XHTML:
<ul class="navBar">
<li><a class="navBar" href="home.htm">Home</a></li>
<li><a class="navBar" href="spring.htm">Spring</a></li>
<li><a class="navBar"
href="summer.htm">Summer</a></li>
<li><a class="navBar" href="fall.htm">Fall</a></li>
<li><a class="navBar" href="winter.htm">Winter</a></li>
16
</ul>
Three Column
Page Layout


Often a web page layout will consist of
a header across the top of the page
with three columns below: navigation,
content, and sidebar.
If you are thinking about this layout
as a series of boxes—you’re thinking
along the right lines for configuring
pages using CSS!
17
Three Column
Layout

How would you create this…a start
.column-left{ float: left; width: 20%; }
.column-right{ float: right; width: 15%; }
.column-center{ display: inline-block; width: 65%; }
18
Questions
1. The two column and three column page layouts
you created in the Hands-On Practice did not
use absolute positioning.
Open the twocolumn.htm and threecolumn.htm
pages in a browser.
Resize the browser window.
Describe what happens.
What type of page design layout: ice, jello, or
liquid is being used?
19
Questions
2. State a reason to use an unordered list to
configure navigation links.
3. Describe how to choose whether to
configure a XHTML tag, create a class, or
create an id when working with CSS.
20
Using CSS
to Style a Form

Moderate Approach
• Use a table to format the form but
configure styles instead of XHTML
table attributes.
table {border:solid 3px
#000000;width:100%;}
td {padding: 5px;margin: 0px;}
.mylabel {text-align:right;}
21
Using CSS to
Style a Form
“Pure" CSS
Approach
• Do not use a table to
format the form. Use
CSS divs and spans with
positioning properties to
configure the page.
#myForm {border:3px solid #000000;
padding:10px;margin:10px;}
.myRow {height:30px;}
.myRowComments {margin-bottom:20px;}
.labelCol{float:left;width:100px; text-align:right;}
22
CSS Styling
for Print



Create an external style sheet
with the configurations for
browser display.
Create a second external style
sheet with the configurations
for printing.
Connect both of the external
style sheets to the web page
using two <link> tags.
<link rel="stylesheet" href="wildflower.css" type="text/css" media="screen" />
<link rel="stylesheet" href="wildflowerprint.css" type="text/css" media="print" />
23
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 comments to find the unexpected
cascade
Don’t expect your pages to look exactly the
same in all browsers!
Be patient!
24
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
25
http://www.blooberry.com/indexdot/css/
• CSS syntax reference list
Questions
1.
State an advantage of using CSS to style for
print.
2.
Describe a CSS display problem that you
encountered and the steps you took to resolve
it.
3.
True or False. CSS that validates must always
work.
26