From techdaze

Contents 1 2.04 1.1 Afternoon 1.1.1 Resources 1.2 Morning 1.2.1 position: relative 1.2.2 position: absolute 1.2.3 Resources

2.04

Afternoon

Starting from the slider/infinite zoom code...

attachment:slider_simple.zip

The exercise is to create simple linear mapping with the slider code. This means, for instance, translating the slider value to a CSS position, and / or color and/or element size. We're using the prototype / scriptaculous libraries to make the link from JavaScript to HTML/CSS.

The completed "Infinite Zoom" project, with all versions: attachment:slider.zip

Resources

• http://www.prototypejs.org
• http://script.aculo.us/
• Slider Documentation

Morning

HTML/CSS Hand Coding Continues!

Positioning

position: relative

"Tweak" an elements position (so relative to where it "normally" would go). Element stays "in the flow".

position: absolute

Rips an element out of the flow (in essence, placing on a new "layer"). Position is then relative to the elements "positioning context" -- the first parent element that has a position attribute (either relative or absolute). (The default positioning context is the body tag (the page)).

• Positioning involves: left or right, top or bottom
• Units can be pixels (20px) or percentages (50%).

Resources

• http://www.w3.org/TR/1998/REC-CSS2-19980512/visuren.html#positioning-scheme