+ Cascading Style Sheets Positioning for any XHTML container tag (selected by name, class or id)

+ The Fundamental Objects Elements nested within elements = boxes within boxes Size and position of each element is determined by its enclosing box

+ Sizing: width & height auto [Number]px [Number]% p{width:auto;} Block element box occupies full width of parent box. p{width:50em;} Block element box 50 ems wide. em{width:auto;} Inline element box takes only what their contents need within the parent. em{width: 40px;} Inline element contents will ignore unless positioned, but background and some other box-related attributes won’t. p{height: 80%;} Percentages are relative to parent dimensions

+ What is Positioning? Controlling the location of elements (boxes) on the screen

+ Default Flow vs. Positioning Browser-controlled Flow Follow order in which the elements appear in the code, inserting line breaks before and after blocks Positioning Make specific instructions to the contrary Stone in the stream? Cookie cutter cut-out? Collage? will be rewarded. Clean- Up Copy (cp, not mv) your project1 directory files (including style sheet) into the www/imm/project2 directory.

+ Float

+ Relative

+ Absolute

+ Simplest: float Want the element to hug a side with everything else flowing around it?.pict {float:right;} float: right; // Aligns element to the right (other elements wrap around it’s left) left right

+ Simplest: float Want the element to hug a side with everything else flowing around it?.pict {float:right; clear:right;} clear: right; // Don’t display element until right side is “clear” of other floaters left right both Without clear declaration

+ More Complex: position (with top, right, bottom, left) static: follow default flow within parent Inline just right of previous element Block just under previous element, width of parent relative: position relative to default location (0,0 = normal location) Does not change flow location for later elements absolute: position relative to parent location (0,0 = upper-left non-static parent corner) fixed: position relative to tag location (0,0 = upper-left window corner)

+ More Complex: position.parent { background:#cccc66; position: relative; float:right; width:400px; }.child {background: #66cccc; position: absolute; top: 50px; left: 20%; right: 30%; }

+ More Complex: position.parent { background:#66ccff; /* position: static; relative; */ float:right; width:400px; }.child { background: #6699cc; /* position: static; relative; absolute; fixed; */ top: 50px; //from top left: 20%; //from left right: 30%; //from right } s s s or r r s a r a r f No fixed right edge to be relative to

+ Did you see those overlaps? Several elements can stack on top of each other in space Elements appearing later in the code go on top

+ Positioning Effects: Overflow What happens to a child box within a parent box when the child box is too big?.parent {overflow:hidden;} // visible hidden scroll hidden scroll visible

+ Positioning Effects: Display & Visibility Control if a box displays as a block, inline or not at all a {display:block; width:200px;} // block inline list-item none Make box transparent (same flow)..ghost {visibility:hidden;} // visible hidden collapse

+ Positioning - typical layout Column A is here. Column B is here. Column A is here. Column B is here.

+ Positioning - typical layout.columnA {width: 45%;}.columnB {margin-left: 55%;} Column A is here. Column B is here.

+ Positioning - typical layout.columnA {width: 45%; float: left; }.columnB {margin-left: 55%;} Column A is here. Column B is here.

+ Positioning - getting crazy shadow front some stuff caption shadow some stuff front caption

+ Positioning - getting crazy.shadow {position: relative;}.front {position: absolute; top: -10px; left: -10px;} shadow some stuff front caption

+ Positioning - getting crazy.shadow {position: relative;}.front {position: absolute; top: -10px; left: -10px;}.caption {position: relative; top: -70px;} shadow some stuff front caption

+ Random Useful Stuff

+ CSS Pseudo Classes a.snowman:link { color: blue; } a.snowman:visited { color: purple; } a.snowman:active { color: red; } a.snowman:hover { text-decoration: none; color: blue; background-color: yellow; } Suggested order: link for an unvisited link. visited for a link that has already been visited. active for when a link gains focus (tabbed to or clicked on). hover for when the cursor is held over a link (not keyboard interactions).

+ CSS Properties I’ve known & loved white-space: normal | pre | nowrap display: block | compact | inline | list-item | none max-width: 50em; min-width: 100px; text-transform: capitalize; line-height 1.2; Also fun… letter-spacing and word-spacing When I want a truly clean slate for spacing around blocks, * { padding: 0; margin:0; border: 0;} If you want set-width content to be centered in container, margin: 0 auto; Also, having items belong to more than one class can be handy, split- personality disorder

+ & elements Eric Meyer wrote: What's so interesting to me is that the guys who decided to focus on the positive went out and did something; those who want to mix in the negative seem to have nothing to offer except complaints. An excellent contrast between those who want to build new things and those who want to tear them down.

+ & elements Eric Meyer wrote: What's so interesting to me is that the guys who decided to focus on the positive went out and did something; those who want to mix in the negative seem to have nothing to offer except complaints. An excellent contrast between those who want to build new things and those who want to tear them down.

+ & elements Eric Meyer wrote: What's so interesting to me is that the guys who decided to focus on the positive went out and did something; those who want to mix in the negative seem to have nothing to offer except complaints. An excellent contrast between those who want to build new things and those who want to tear them down.

+ Conversation in XHTML Costello Well then who's on first? Abbott Yes. Costello I mean the fellow's name. Abbott Who. Costello The guy on first. Abbott Who.