k/k 1212 Cascading Style Sheets Part three Marko Boon marko/cursusCSS.

Cascading Style

SheetsPart three

Marko Boonhttp://www.win.tue.nl/~marko/

cursusCSS

Positioning

• Margins• Padding• Dimensions• Positioning• Layers and Visibility• Pseudo-Classes• Connection to JavaScript

Part 3

Margins

Property Values

margin-leftmargin-rightmargin-topmargin-bottom

autolength%

Margins define the space around elements.

Margins - Example

body { margin-top:10px; margin-bottom:10px; margin-left:10%; margin-right:auto;}

Padding

Property Values

padding-leftpadding-rightpadding-toppadding-bottom

length%

Padding defines the space between theelement border and the element content.

Padding - Example

td { padding-left:3px; padding-right:3px; padding-top:3px; padding-bottom:3px;}

Padding, Margin and Border shortcutstd { 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;}

Dimensions

Property Values

heightwidth

autolength%

line-height normalnumberlength%

Dimensions - Example

body { line-height:1.5;}img { width:60%; border-width:1px; border-style:solid;}

Positioning

Property Values

float left, rightnone

position staticabsoluterelative

Positioning (position = absolute/relative)Property Values

leftrighttopbottom

auto%length

Positioning - Example

<img src="leftupper.jpg" style= "position:absolute;left:5px;top:5px">

<img src="rightupper.jpg" style= "position:absolute;right:5px;top:5px">

Layers and Visibility

Property Values

z-index autonumber

visibility visiblehidden

clip autorect(top right bottom left )

Layers and Visibility - Example 1



Necessary! Otherwisez-index is disregarded!

Text

Text

Text

Text

Text

Text

Text

Text

TextClipping needsabsolute position!(but no top, left, …)

Text

Text

Pseudo-Classes

Used in CSS to add different effects to some selectors, or to a part of some selectors

Pseudo-Classes

selector:pseudo-class { property:value;}

Pseudo-Classesa { text-decoration:none; color:blue;}a:hover { text-decoration:underline; color:blue;}

Other pseudo-classes: a:active a:visited

How to link JavaScript to StyleSheets

Any HTML tag that has an ID, is an object inJavaScript.

TextHTML:

JavaScript:

p = document.getElementById("par1")

Every HTML object in JavaScript, has thestyle property. This property, which is anobject itself, enables you to use any CSSstyle command:

CSS: border-width, font-sizeJavaScript: borderWidth, fontSizeetc.


Example of CSS in JavaScript:



Some text in a paragraph. 

p = document.getElementById("par1");

indent = parseInt(p.style.left);

p.style.left = indent + 10;

Content of the tags P, DIV, SPAN, H2 etc. can be changed in the following way:als volgt gewijzigd worden:<div id="div1">Text </div>

p = document.getElementById("div1");

p.innerHTML = "New text";

There is a method that returns all elementswith a given tag name:

pArray =

document.getElementsByTagName("p");

for (i = 0; i < pArray.length; i++)

pArray[i].style.left = 10;

Example: Menus1. Create the menus in a 2 × n table

File Edit Help

Example: Menus2. Add an invisible span

(visibility=hidden) in every lower table cell. Give each span a unique id.File Edit Help

Example: Menus3. Add a table in each span,containing

the menu items.

File Edit Help

Open

Save

Save As

Close

Copy

Cut

Paste

Index

Contents

About

Example: Menus4. Add JavaScript event handlers to the

menus:<a href='javascript:clickMenu(0)' onmouseover='overMenu(0)'>File Edit Help

Open

Save

Save As

Close

Copy

Cut

Paste

Index

Contents

About


spans:

File Edit Help

Open

Save

Save As

Close

Copy

Cut

Paste

Index

Contents

About

spans:

Example: Menus

5. Add event handlers to the menu items:<a href='javascript:clickMenuItem(0, 0)'>Open</a>File Edit Help

Open

Save

Save As

Close

Copy

Cut

Paste

Index

Contents

About

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}

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"; }

Example: Menus

Result in an HTML file:• Click here if you downloaded

everything on your local disk• Click here if you have an Internet connection

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!

k/k 1212 Cascading Style Sheets Part three Marko Boon marko/cursusCSS.

Documents

Transcript of k/k 1212 Cascading Style Sheets Part three Marko Boon marko/cursusCSS.