Chapter 4: Positioning Elements

Chapter 4: Positioning Elements

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.

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.

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).

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.

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.

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;}

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> <img src=“distortingfloatedpicture.jpg” alt=“This pic was distorted, but will now be ok because it was cleared with the above div.” />

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.

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

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;}

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;}

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;}

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;}

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>

Chapter 4: Positioning Elements