Cascading Style Sheets Advanced Styles

Positioning Static – normal flow order Absolute – rel. to 1st positioned ancestor Fixed – rel. to browser window Relative – relative to "normal" position "left:20" adds 20 pixels to left margin © 2012 D. J. Foreman

Movement Controllable with JavaScript X, Y and Z axis movement Not required for pre-defined layouts Uses position properties left, right, top & bottom © 2012 D. J. Foreman

Multi-column layouts Create a style for each column Apply it to a div tag as an ID Add the ID attribute for JavaScript (if used) © 2012 D. J. Foreman

Example –the styles #leftcol {position: absolute; top: 5px; left: 1%; width:16%; background-color: black; border:5px blue solid} #mymaincol {position: absolute; top: 5px; left: 20%; height: 550px; width:58%} #rtcol {position:absolute; top: 5px; left: 80%; border:5px purple solid} © 2012 D. J. Foreman

Example - usage <div id='leftcol'> </div> My links for site navigation go here </div> <div id='mymaincol'> Document html & data goes here <div id='rtcol'> Miscellaneous data goes here © 2012 D. J. Foreman

What the %'s do First col is 1% from edge of window and 16% of window width. Total=17% Main col starts 20% from left edge (=> 3 % column margin). Uses 58% of window. (So 58%+20% = 78% used) Rtcol is 80% from left edge (2% col margin). Uses remaining width (22%) © 2012 D. J. Foreman

Diagram 80% 20% 16% 3% 58% 2% 1% © 2012 D. J. Foreman

Problems can occur Nothing prevents overlapping Text could be larger than layer Overflow:scroll allows for scrolling of layers w/o JavaScript © 2012 D. J. Foreman