COS 125

DAY 11

Agenda Assignment 4 corrected

8 A’s & 2 B’s Assignment 5 Due Assignment 6 will be posted after break Quiz 1 corrected

1 A, 5 B’s, 4 C’s Left to do

5 Assignments (10 total) 2 Quizzes Capstone projects

Discussion about course time line Ahead of schedule

Finish course on April 28?

Lecture/Discuss Layout with Styles

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

Padding

Content

Margin

Border

Padding

Content

Box Model (block)Margin

Border

Padding

Content

Margin

Border

Padding

Content

Changing backgrounds Every element including the page itself can have its own background To set background color

selector{background-color:”blue” or “#336677” or rgb(200,100,34) or transparent}

To use a background image 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

background-repeat:repeat or repeat-x or repeat-y or no-repeat To fix background relative to element

background-attachment:fixed or scroll To specify position of background

background-position: x y To do all at once

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}

X = size in px (10px) or relative (2em) or percentage (10%)

Can also set margin by side 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

Content, padding, border, margin Selector{padding:x}

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

Padding

Content

Setting the Border Every element can have a border Border-style: type

Type can be dotted, dashed, solid, double, groove, ridge, inset, or outset

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

http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_examples/css-effects/rolloverbuttons.html

image “pop-ups” 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/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/imagereplacement.html More effects

http://www.dynamicdrive.com/style/