COS 125
DAY 20
Agenda

Assignment 5 corrected




Assignment 6 is posted


3 A’s, 4 B’s, 1 D and 1 F’s
4 late turn-ins @ -20 points per day
Time of submission is the later of the time when
assignment file is uploaded in blackboard or the last
time the file on the web server is modified
Due April 15 @ 2PM (Next Class)
Left to do

2 Assignments (8 total)




One per week
1 Quiz
Capstone projects
Lecture/Discuss Layout with Styles
Tips for Assignment #6



For assignment #6 I gave you a xHTML page with
lots of text and various elements
You cannot modify the xHTML page other than
associating with different style sheets
You will have create several different style sheets
to format this page


Style sheets will be IAW formatting rules I give you
You will have to produce a menu that shows the
same pages formatted with each different style
sheet
Layout with Styles
Allows for more possibilities than xHTML
layout
 Can create Liquid layouts that expand or
contract with browser window
 Separate layout from Content allowing you
to change layout without re-coding
WebPage
 Examples of everything in this lecture
available at

http://perleybrook.umfk.maine.edu/samples/StyleLayout.htm
Structuring Your Pages
Divide your page in logical sections using
the <div> element
 Name each division using the id attribute


id=“daName”
Put the sections in order in your XHTML
page
 Use headers (h1, h2, h3 etc ) in a
consistent fashion

The Box Model

For CSS, every element is in an invisible
Box that has the following




Content (middle)
Padding (between Content & Border)
Border (around element)
Margin (Between element border and next
element)
Boxes are either block level (new
paragraph) or inline (on same line)
 xHTML flow from top to bottom with line
breaks around block level elements

Box Model (inline)
Margin
Border
Margin
Border
Content
Padding
Content
Padding
Box Model (block)
Margin
Border
Content
Padding
Margin
Border
Content
Padding
Changing backgrounds


Every element including the page itself can have its own background
To set background color


To use a background image



background-position: x y
To do all at once


background-attachment:fixed or scroll
To specify position of background


background-repeat:repeat or repeat-x or repeat-y or no-repeat
To fix background relative to element


selector{background-image:url(image.gif)}
If you use both color and image the color will be used until the image is loaded
and will be seen through any transparent parts of the image
To repeat background image


selector{background-color:”blue” or “#336677” or rgb(200,100,34) or
transparent}
background:url(image.gif) repeat-x fixed bottom left;
Default setting

background:transparent none repeat scroll top left
Changing the foreground color
selector{color:colorname or #rrggbb or
rgb(r,g,b) or rgb(r%, g%, b%)
 Foreground doesn’t work on image (img)
element

Setting the height and width of elements
You can set the height and width as a
absolute values or relative to parent
element
 Selector{width:w;height:h}
 Setting width or height to auto allows the
browser to calculate
 Exampes




#banner{width:100%; height:auto}
img{width:200px, height:auto}
a:link{width:100px height:50px}
Setting margins


Margins are outside of the border
Selector{margin:x}


Can also set margin by side



X = size in px (10px) or relative (2em) or percentage
(10%)
margin-top:x
margin-left:x
If two elements with margins touch, the space
between their borders is the larger of the two
margins and not the sum of the two margins
Adding padding

From inside out of an element


Selector{padding:x}


Content, padding, border, margin
X = size in px (10px) or relative (2em) or
percentage (10%)
Can also set padding by side


padding-top:x
padding-left:x
Margin
Border
Content
Padding
Setting the Border


Every element can have a border
Border-style: type


Border-width: Npx





If you give 4 values one value you can modify each side
Border-width: 2px 3px 4px 5px
Top = 2, right= 3, bottom = 4 , left = 5
Border-color: colorname or #rrggbb or rgb(r,g,b) or
rgb(r%,g%,b%)
Can also just effect one side using


Type can be dotted, dashed, solid, double, groove, ridge, inset,
or outset
border-top-style:
Shorthand

border-side-property: value(s)


Border-top-color:blue;
Border-right-style:groove;
Controlling the flow (position)

4 ways to position an element box





Static – with the flow
Absolute – in a fixed position relative to parent
element
Fixed – in a fixed position relative to browser
Relative – with respect to default position in
the flow
If boxes overlap you can control which
goes over which using z-index
Offsetting Elements in the Natural flow
Every element as a “natural” location
based on page flow
 You can moved the an element relative to
its natural position
 Does not effect any other element in page



Selector{Postion:relative; top:v; left:v;
bottom:v; left:v}
V is desired distance you want offset from
natural location in absolute (12px) or relative
values (1em, 1.5em) Can cause overlaps
Positioning Elements Absolutely


Elements in a xHTML web page flow in the order
they appear in the xHTML
You can take them out of the flow and position
them wherever you want with respect to their
parent

Selector{postion:absolute; top:v or bottom:v; left:v or
right:v}

Generally you use
 top or bottom
 left or right



V is desired distance you want offset from parent in
absolute (12px) or relative values (1em, 1.5em) or as a
percentage of parent (10%)
Can cause overlaps
Percentages create “liquid” layouts
Fixing an Element in the Browser
Windows
Cause an element to fixed..doesn’t move
when the page is scrolled
 Works in IE7, FireFox and Opera




Selector{Postion:fixed; top:v; left:v;
bottom:v; left:v}
V is desired distance you want offset from
browser in specific (12px) or relative to parent
values (1em, 1.5em) or as a percentage of
browser (10%)
Can (and most likely will) cause overlaps
Making elements float
You can make elements “float” in a “sea”
of text
 This property has buggy results
 Selector{float:left or right)



Elements “float” in the direction selected
If more than one element is floated in the
same direction they will stack in the order
they appear in xHTML
Float left
Float right
Controlling whether or not elements can
floats next to another

If you don’t want anything float to the left
right or both of a particular element


Selector{clear:left or right or both}
Example


#banner{clear:both}
#blockhouse{clear:left}
Positioning elements in 3D
You can effect in which “layer” each
element appears
 Very important when you have overlap
 selector{z-index:n}





The highest n goes on top
The lowest n goes to the bottom
Think of n as the elevation of the element
Children will assume the z-index of parent
first then will be in “Z” order versus their
siblings
Changing the cursor

You can set how the cursor looks in each element


Browser and O/S dependant
Selector{cursor:value}

Value can be








Pointer
default
crosshair
move
wait
help
text
x-resize
 X can be n, s e or w or combinations
Determining Overflow



What happens when the content of an element is
larger than the “box” you have created for it??
Condition can be controlled via overflow property
Selector{overflow:value}

Value can





Hidden (what ever doen’t fit becomes invisible)
Visible (makes the box fit the contents)
Scroll (forces scroll bars)
Auto (scroll bars only when necessary)
Problems with IE 6 works in IE7
Aligning Elements Vertically


Selector{vertical-align:value}
Value can be








baseline -- bottom of element lines up with bottom of
parent
middle -– middle of element lines up with middle of
parent
sub – lines up below parent
super –lines up above parent
text-top – top of element aligns to top of parent
text-bottom – align the bottom of element to bottom of
parent
top –aligns top of element to top of tallest element in
the same line
bottom- aligns bottom of element to bottom of lowest
element in the same line
Displaying and Hiding Elements

You can control how the browser display
an element using the property display:


h1{display:”value”}
Values can be




none hides the element
block displays element as block level
inline displays the element as inline
list-item displays the element as though you
has used <li> tag (covered later)
Cool CSS effects

Rollover buttons


image “pop-ups”



http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_
examples/css-effects/dropdownmenus-noformat.html
http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_
examples/css-effects/dropdownmenus.html
Replacing headers with Images (not for IE)


http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_
examples/css-effects/popups.html
Drop down menus


http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_
examples/css-effects/rolloverbuttons.html
http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_
examples/css-effects/imagereplacement.html
More effects

http://www.dynamicdrive.com/style/
Learning Objectives




Use Media-specific style sheets
Understand the difference between screen
and print styles
Specify when pages will break in a style
sheet for printing
Identify print-specific properties using the
@page rule.
Media-Specific Style Sheets



You can designate a stylesheets to be used only for
printing, for screen display or for both.
Use attribute “media=“print” or “screen” or “all” in the
open link or style tag
You can also import using


@import “print.css” print;
Example
<link rel=”stylesheet” media=“print” type=“text/css”
href=“print.css”>
<link rel=”stylesheet” media=“screen” type=“text/css”
href=“screen.css”>
How Print Style Sheets Differ


Can be the same or very different from screen
version
Some suggestions

Use points instead of pixels for sizing


Hide sections like sidebars, banners or ads






12points instead of 15px
display:none
Remove background colors and images
Adjust margins
Set page breaks
Let viewers know that printouts are different than
viewed pages
Test the print out (print preview) and adjust if
necessary
Controlling Page Breaks



WebPages can be very long
Use CSS to control where the contents are printed relative
to printer page
Where page breaks occur





Page-break-before:values
Page-break-after:values
Page-break-inside:values
Values are “auto” “always” or “avoid”
Examples


p{page-break-inside:avoid}
h1,h2,h3{page-break-before:always}
Other print Specific CSS properties


These do not work in IE or Netscape (yet!)
You can predefine printing pages


@page :left or :right or :first “name”{
Stuff can be







Size:w h w=width of page h=height of page
Margin:x
Marks:kind
Any other property:value pairs
Example

@print :first{size 8.5in 11in; margin:1in marks:none}
@print legal{size 8.5in 14in; margin 1in 0.5in 1in 0.5in}
Use predefined rule

stuff }
Selector{page:legal;}
Widows and Orphans



Orphan is a term used to describe a single word appearing
at the bottom of a paragraph or column.
A widow is a single word or short phrase appearing alone
at the top of column.
To modify using css




Selector{orphans:n}
Selector{widows:n}
N is minimum number of lines to appear at the top (widow)
or bottom (orphan) of a page
p{orphans:4;widows:4}