COS 125

1. COS 125 DAY 20

2. Agenda • Assignment 5 corrected • 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 • Assignment 6 is posted • 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

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

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

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

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

7. Box Model (inline) Margin Margin Border Border Content Content Padding Padding

8. Box Model (block) Margin Border Content Padding Margin Border Content Padding

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

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

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

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

13. 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 Content Padding

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

29. How Print Style Sheets Differ • Can be the same or very different from screen version • Some suggestions • Use points instead of pixels for sizing • 12points instead of 15px • Hide sections like sidebars, banners or ads • 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

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

31. 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 } • 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 • Selector{page:legal;}

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