Professional Documents
Culture Documents
Lecture 11 - Advanced CSSP
Lecture 11 - Advanced CSSP
A Short Review
Nested boxes
Floating layout
Float: moves box to left or right margin
of parent!!!
Other content wraps around it .myclass { float: left; } or #myid { float: right; } or h1 { float: none; }
Using Float
floats boxes to the left or right, and other content contained in the same box wraps around
.imagebox { float: left; }
http://www.cs.cornell.edu/lagoze/
Float Details
See result
Jello!
Relative positioning
Relative positioning
Moves element based on where it otherwise would have been
.myclass { position: relative; right: 10%; } #myclass { position: relative; top: 20px; } h1 { position: relative; bottom: 10em; }
Use with width & height to specify layout Leaves hole where element was: i.e., there is a shadow box at the regular position (box size properties affect shadow box)
Lets do it!
Next:
Absolute positioning Layering elements Fixed positioning
Absolute positioning
Because, after all, you are the designer There is a way to control the exact position of any (element) box. position: absolute; And something like top: 280px; left: 40px; Specifies the position of your element with respect to the containing box.
Some Poker:
Seeing is believing!
One disadvantage:
With absolute positioning the element is removed from the flow completely
Consequence:
You CANT use clear with absolute positioning. Instead: you have to control margins or position of surrounding elements explicitly.
Layering elements
Layering elements
CSS positioning (esp. absolute) makes it possible to cover stuff up.
DEMAND THIS.
Position: fixed
What does it do? It simply fixes the position of the element relative to the window (or viewport) position: fixed top: 400px; left: 300px; * Does not work on IE6.0 or earlier! Try it!
Use tools like firebug Turn on borders * { border: solid 1px black; } Test in multiple browsers!!!!! Test with multiple window sizes!!!!
Caveat on CSS
Go slowlythinkhave patience