Chapter 4: Positioning Elements

1. Chapter 4: Positioning Elements

2. CSS provides a way to stray away from the traditional methods of using tables to lay out pages. • Success with this technique depends on understanding of the box model, the position property, and the display property. • Box Model  Describes the positioning controls that exist for every element in your markup. • Position property  Defines the positional relationship between these elements on the page. • Display property  Determines whether elements stack or sit side-by-side, or even display on the page at all.

3. The Box Model • Every element created in the markup produces a box on the page. • Three aspects of the box are able to be modified with CSS: • Border  Can set the thickness, style, and color. • Margin  Can set the distance between this box and adjacent ones. • Padding  Can set the distance between content and border.

4. The Box Border • Border has three associated properties: • Width. Values: thin, medium, think, or any unit. • Style. Values: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset. • Color. Values: any color value (RGB, hex, keyword). • p.warning {border-width:4px;} • p.warning {border-style:solid;} • p.warning {border-color:#F33;} • If you want to set all 4 sides with the same width, style, and color, you can use the shorthand “border” to specify them all in one fell swoop: • p.warning {border:4px solid #F33; padding:2px;} • Or if you want different widths on different sides: • p.warning{border-width:4px 2px 2px 4px;} – Will set the right and bottom borders 2px, while keeping the others 4px. (Order is clockwise).

5. Box Paddings & Margins • Padding adds space between the box’s border and its content. • Replaces the old, messy method of using spacer GIF’s. • p.warning {padding:4px;} • Margins add space between boxes. If the margin is 0, the boxes touch one another. • Good practice to put * {margin:0; padding:0;} at the very beginning of your style sheet. • Vertical Margins Collapse When a top margin of one element meets the bottom element of another margin, they overlap until one of the margins touches the border of the other element. Link to example.

6. Box Size Manipulation • Width  Sets the width of the element box. • Adding padding, borders, or margins to an element box with a defined width will increase in size to accommodate that width. • E.g. p {width:400px; padding:0 20px; border:#000 solid: border-width: 0 6px 0 6px; background-color:#CCC;} Total width of the element is: 6 + 20 + 400 + 20 + 6 = 452 If you wanted to increase the padding inside the box but not make it any bigger, use a div inside the p and increase the padding on that. That will keep the outer box at a constant width while allowing you to modify the inner content’s formatting. Link to example.

7. Floating and Clearing • Float  Moves an element out of the normal flow of the document. Elements that follow a floated one will move up and sit next to it if there’s room. • Clear  Stops elements from moving up next to a floated property. • img {float:left; margin:0 4px 4px 0;} You can use float to form columns by declaring them floating in style declarations. Adding float to the p tag in this example will put the paragraph beside the img: img {float:left; margin:0 4px 4px 0;} p {float:left; width:200px; margin:0;}

8. Floating and Clearing • Sometimes floating will distort the page. Adding a div before the distorting floated element with a class to “clear” will set the element below the floating ones. • .clearfloats {clear:both;} • <p>Some floated text</p> • <div class=“clearfloats”></div> • <imgsrc=“distortingfloatedpicture.jpg” alt=“This pic was distorted, but will now be ok because it was cleared with the above div.” />

9. Positioning • Position property determines the reference point for the positioning of each element box. • Four values for the position property: • Static  Each element is laid out one after the other • Absolute  Allows you to specify an exact position with respect to the top-level element. • Fixed  Same concept as absolute, though it will not move if the browser is scrolled. • Relative  Allows you to specify how much you want to move your element with respect to its previous position.

10. Static Positioning • The default. • Elements laid out one after another. #specialpara {position:static;} Link to example.

11. Relative Positioning • Move the paragraph with respect to its default position. • Can set its top, bottom, left, or right, but usually top and left are all that’s needed. #specialpara {position:relative; top:30px; left:20px;} Link to example.

12. Absolute Positioning • Move the paragraph with respect to the top level element (body). • Can set its top, bottom, left, or right, but usually top and left are all that’s needed. #specialpara {position:absolute; top:30px; left:20px;} Link to example.

13. Fixed Positioning • Move the paragraph with respect to the top level element (body), but affix it on the screen so it doesn’t move when the page is scrolled. • Can set its top, bottom, left, or right, but usually top and left are all that’s needed. #specialpara {position:fixed; top:30px; left:20px;} Link to example.

14. Positioning Cont’d • In order to set an element’s position with respect to a higher-up-the-tree element’s position, you must specify relative for the higher and absolute for the lower. • div#outer {position:relative; width:250px; margin:50px 40px; border-top:3px solid red;} • div#inner {position:absolute; top:10px; left:20px; background;#AAA;} Link to example.

15. Display Property • The display property can change elements from inline to block and vice versa. • Can also hide an element completely (and remove the space it held). • p {position:absolute; display:none; width:80px; left:96px; top:35px; border:1px solid gray; padding:.3em; background-color:$FFD;} • div {border:2px solid #069;} • div:hover p, p:hover {display:block;} • <div> • <p>This is some awesome text that just appeared out of no where!</p> • <h4>Hover your mouse over the box!</h4> • </div> Link to example.