1. /k/k 1212 Cascading Style Sheets Part three Marko Boon http://www.win.tue.nl/~marko/cursusCSS

2. /k/k 1212 Positioning Margins Padding Dimensions Positioning Layers and Visibility Pseudo-Classes Connection to JavaScript Part 3

3. /k/k 1212 Margins PropertyValues margin-left margin-right margin-top margin-bottom auto length % Margins define the space around elements.

4. /k/k 1212 Margins - Example body { margin-top:10px; margin-bottom:10px; margin-left:10%; margin-right:auto; }

5. /k/k 1212 Padding PropertyValues padding-left padding-right padding-top padding-bottom length % Padding defines the space between the element border and the element content.

6. /k/k 1212 Padding - Example td { padding-left:3px; padding-right:3px; padding-top:3px; padding-bottom:3px; }

7. /k/k 1212 Padding, Margin and Border shortcuts td { padding-left:1px; padding-right:2px; padding-top:3px; padding-bottom:4px; } Also applies to: border-color border-width margin td { padding:3px 2px 4px 1px; }

8. /k/k 1212 Dimensions PropertyValues height width auto length % line-heightnormal number length %

9. /k/k 1212 Dimensions - Example body { line-height:1.5; } img { width:60%; border-width:1px; border-style:solid; }

10. /k/k 1212 Positioning PropertyValues floatleft, right none positionstatic absolute relative

11. /k/k 1212 Positioning (position = absolute/relative) PropertyValues left right top bottom auto % length

12. /k/k 1212 Positioning - Example <img src= " leftupper.jpg " style= " position:absolute;left:5px;top:5px " > <img src= " rightupper.jpg " style= " position:absolute;right:5px;top:5px " >

13. /k/k 1212 Layers and Visibility PropertyValues z-indexauto number visibilityvisible hidden clipauto rect(top right bottom left )

14. /k/k 1212 Layers and Visibility - Example 1 <span style="width:200;height:100; background-color:blue; position:relative;z-index:5"> Necessary! Otherwise z-index is disregarded!

15. /k/k 1212 Layers and Visibility - Example 1

16. /k/k 1212 Layers and Visibility - Example 1 <span style="width:200;height:100; background-color:red; position:relative;left:-100;top:50">

17. /k/k 1212 Layers and Visibility - Example 1 <span style="width:200;height:100; background-color:red; position:relative;left:-100;top:50">

18. /k/k 1212 Layers and Visibility - Example 1 <span style="width:200;height:100; background-color:red; position:relative;left:-100;top:50; z-index:4">

19. /k/k 1212 Layers and Visibility - Example 1 <span style="width:200;height:100; background-color:red; position:relative;left:-100;top:50; z-index:4">

20. /k/k 1212 Layers and Visibility - Example 2 Text Text

21. /k/k 1212 Layers and Visibility - Example 2 Text Text

22. /k/k 1212 Layers and Visibility - Example 2 Text

23. /k/k 1212 Layers and Visibility - Example 2 Text Text

24. /k/k 1212 Layers and Visibility - Example 2 Text Text Clipping needs absolute position! (but no top, left, …)

25. /k/k 1212 Layers and Visibility - Example 2 Text Text

26. /k/k 1212 Pseudo-Classes Used in CSS to add different effects to some selectors, or to a part of some selectors

27. /k/k 1212 Pseudo-Classes selector:pseudo-class { property:value; }

28. /k/k 1212 Pseudo-Classes a { text-decoration:none; color:blue; } a:hover { text-decoration:underline; color:blue; } Other pseudo-classes: a:active a:visited

29. /k/k 1212 How to link JavaScript to StyleSheets Any HTML tag that has an ID, is an object in JavaScript. Text HTML: JavaScript: p = document.getElementById("par1")

30. /k/k 1212 Every HTML object in JavaScript, has the style property. This property, which is an object itself, enables you to use any CSS style command: CSS: border-width, font-size JavaScript: borderWidth, fontSize etc. How to link JavaScript to StyleSheets

31. /k/k 1212 Example of CSS in JavaScript: <p style="position:relative;left:0" id="par1"> Some text in a paragraph. p = document.getElementById("par1"); indent = parseInt(p.style.left); p.style.left = indent + 10;

32. /k/k 1212 Content of the tags P, DIV, SPAN, H2 etc. can be changed in the following way: als volgt gewijzigd worden: Text p = document.getElementById("div1"); p.innerHTML = "New text"; How to link JavaScript to StyleSheets

33. /k/k 1212 There is a method that returns all elements with a given tag name: pArray = document.getElementsByTagName("p"); for (i = 0; i < pArray.length; i++) pArray[i].style.left = 10; How to link JavaScript to StyleSheets

34. /k/k 1212 Example: Menus 1.Create the menus in a 2 × n table FileEditHelp

35. /k/k 1212 Example: Menus 2.Add an invisible span ( visibility=hidden ) in every lower table cell. Give each span a unique id. FileEditHelp

36. /k/k 1212 Example: Menus 3.Add a table in each span,containing the menu items. FileEditHelp Open Save Save As Close Copy Cut Paste Index Content s About

37. /k/k 1212 Example: Menus 4.Add JavaScript event handlers to the menus: FileEditHelp Open Save Save As Close Copy Cut Paste Index Content s About

38. /k/k 1212 Example: Menus 5.Add JavaScript event handlers to the spans: FileEditHelp Open Save Save As Close Copy Cut Paste Index Content s About

39. /k/k 1212 Example: Menus 5.Add JavaScript event handlers to the spans:

40. /k/k 1212 Example: Menus 5.Add event handlers to the menu items: Open FileEditHelp Open Save Save As Close Copy Cut Paste Index Content s About

41. /k/k 1212 Example: Menus 6.Write the JavaScript code: function clickMenu(n) { } function clickMenuItem(n, m) { outMenu(n); // whatever you want to do // e.g. open a new page }

42. /k/k 1212 Example: Menus 6.Write the JavaScript code: function overMenu(n) { hideMenus(); m = document.getElementById("menu"+n); m.style.visibility="visible"; } function outMenu(n) { m = document.getElementById("menu"+n); m.style.visibility="hidden"; }

43. /k/k 1212 Example: Menus Result in an HTML file: Click here if you downloaded everything on your local diskClick here Click here if you have an Internet connectionClick here

44. /k/k 1212 Warnings almost none of this works in Netscape 4 there can (and will) always be little differences between Netscape 6+ and Internet Explorer Test everything in multiple browsers!