Positioning Elements CHAPTER 3 1 CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) The Box Model The Box Model describes the rectangular boxes generated for each and every HTML element Boxes are laid out on the page according to the Visual Formatting Model (VFM) VFM is primarily controlled by three properties: position: defines the positional relationship between elements on the page display: determines whether elements stack on top of each other, sit side by side, and even if they are actually shown or not on the page float: provides additional positioning options, and can be used to organize elements into multi-column layouts 2 CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) How Does a Box Look Like? Using the developer toolbox, we saw how HTML elements occupy a rectangular space on the page, but we needed the toolbox to get any visual sense of the box, because: The background was transparent There were no borders to the box The main properties of the boxes are: border: is the marker of the edges of a box You can set the thickness, style, and color of a border padding: is the space between the border and the content of the box margin: is the space outside the box, separating this box from the other adjacent elements (boxes) Because a box has four sides, properties associated with borders, padding, and margin have four settings: top, bottom, right, and left E.g., margin-top, border-right, etc. You can set borders, margins, and padding, separately and differently for the four sides of the box CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 3 Border properties Borders have three properties: width: values can be: thin, medium, thick, or any non-negative width unit (except %) style: values can be: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, or outset color: values can be any legal construct for a color (see last chapter) To avoid having to write 12 rules for every box, we have shorthad: Use the main property with one, two, or four values (order is top, right, bottom, left i.e., clockwise from top) E.g., {border: 1px 2px 3px 4px} to set 4 different values for the for sides of the border E.g., {border: 1px 2px} when a value is missing, the value for the opposite side is assumed (top and bottom 1px, right and left 2 px) E.g., {border: 4px} when only one value is specified, it applies to all sides You can specify all three properties for all four sides (most common case) like this: E.g., {border: 2px dashed red} Lastly, more specific rules have priority, so you can set 3 sides of a box like this: {border: 2px dashed red} And: {border-right: 0} CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 4 Default Border Properties {border-style: none} thats why borders dont show by default {border-width:medium} the meaning of values like medium, thin, thick are browser dependent {border-color:black} So the simplest way to show a border is to add a rule that changes the style to something other than none E.g., say you wish to put a red border around special paragraphs containing a warning; Code p.warning {border:3px ridge red;} in the style section and Important Warning! to insert such a warning Notice the box extending to the full width of the window CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 5 Padding Unless you specify padding, content always touches the border (padding is set to 0 by default) When the border does not show, reasonable spacing does still appear, because of margins CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 6 Padding Example p.nopad {border:3px solid red; width:220px;} p.pad {border:3px solid red; padding:5px; width:220px;} Without any padding, the text touches the border. With padding, the text looks much nicer. Margins As opposed to padding, margins default to non-zero values The easiest way to understand them is to look at the example to the right: CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 7 Margin Collapse Vertical margins collapse: Margins overlap until one of the margins touches the border of the other element In other words, between two adjacent margins of different sizes, the smaller one disappears This happens so that a succession of boxes with the same margins, space the same with the first and last element Horizontal margins do not collapse The space between two adjacent horizontal boxes equals the sum of their respective margins CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 8 Neutralize margins and padding by having this line at the top of your style sheet (or section): * {margin:0; padding:0;} Then set padding and margins for different elements as you wish to see them. How Big Is a Box? If the width of an element is not specified, its box will expand to fill the widths of the containing element. Of course, the width property always exists, but it is set to the default value auto (for automatic) which gives us the default behaviour shown Adding borders, margins and padding, reduces the width for the element content correspondingly, possibly increasing the height Note: the style was completed with adding a background color, so that we can see the box even without a border p {margin:0; background-color:white;} CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 9 Setting the Width of a Box If the width of an element is specified, its content will always occupy the stated width {width:400px;} Adding borders, margins and padding, will increase the overall width of the element correspondingly CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 10 Document Flow So far, we learned that: All elements are rendered in a box Boxes can stack on top of each other, or go side by side This is known as the document flow Think of it as a conveyor belt delivering box after box the page creator, who simply places them in the space available according to the default rules for the type of box Clearly we need some ways to arrange boxes in more flexible ways Three ways to achieve that: Floating Positioning The display property CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 11 Floating Floating is a mechanism to remove a box from the document flow, and float it as if it would be located on a separate layer (imagine it like rendering on separate transparent sheets layered on top of each other). Essentially, floating pushes a box as far as possible to one side of its parents box (specified as we have seen earlier by the word values left and right) Floating also changes the behaviour of other elements: Elements following a floated element will move up right next to the floated element E.g., If you float an image, a paragraph following it will not stack below (as usual) but will go to the right of the image; if the text is long enough, once it exceeds the lower edge of the picture, it will again start from the left edge, creating the effect of a text floating around an image, hence the name of this technique You can revert elements to standard document flow placement by setting the clear property of the element CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 12 A Floating Example Styling an image element with: img {float:left; margin:0 4px 4px 0;} and a paragraph element with: p {margin:0; border:1px solid red} yields the image on the right In this case the parent is body The paragraph no longer succeeds the image, but it rather takes up the same position as the image (top left corner of the window), but it makes room for the image CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 13 When you float a box, you must set up its widths. Of course, images have a default width, so thats OK. Setting Up Columns If you float a paragraph following a floated element, it will not wrap around the image, but instead it will keep its defined width This creates a column structure to the page Style like this to create the image on the right: img {float:left; margin:0 4px 0 0;} p {float:left; width:200px; margin:0; border:1px solid red} Columnar layout: if a set of sibling elements: Are floated Have their width property set There is enough room they line up besides each other forming columns You can use sibling sections to create columns, which you can then fill with whatever you want CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 14 Side-effects of floating Floated elements are no longer contained in the box of their parent That can lead to unexpected (and unwanted) consequences CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 15 Three Ways to Enclose Floated Elements section {border:1px solid blue; margin:0 0 10px 0;} footer {border:1px solid red;} p {margin:0;} img {float:left;} It's fun to float. Here is the footer element that runs across the bottom of the page. Enclosing a floated element To avoid the unwanted side-effects we need to force the enclosure of a floated element into his parents box Three ways to do it: Specify {overflow:hidden;} in the parents style Float the parent too Add a non-floated, empty element as the last child, and set its clear property E.g., add an empty division like and set its style like.clear-me {clear:left;} There are other ways too, but well leave it at that (in the textbook, you can skip to the position property section) You need all three techniques, because all have their own side-effects If one technique does not work, try the others The last technique usually works best CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 16 Static Positioning The position property determines where a box is displayed relative to where it would normally appear in the document flow It has four values: static (default), relative, absolute, and fixed To illustrate, we will use a four paragraph page; default positioning is where the normal document flow dictates CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 17 Static Positioning p {font-size:24px; color:#555; font-family:Helvetica, Arial, sans-serif; background-color:#ccc; margin:10px 0;} body {background-color:#caebff;} p#special-para {color: red; background:#fff;} First paragraph Second paragraph Third paragraph (with ID) Fourth paragraph Positioning Context If you change the position property to anything other than the default value static, you are positioning the element relative to another element; this other element is known as positioning context. By default, the positioning context is the whole page (i.e., the body) The new position can also be adjusted using four position modifiers: top specifies an offset measured downwards from the top edge of the relevant enclosing box right specifies an offset measured to the right from the left edge of the relevant enclosing box bottom specifies an offset measured upwards from the bottom edge of the relevant enclosing box left specifies an offset measured to the left from the right edge of the relevant enclosing box Negative values do the same in the opposite direction CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 18 Relative Positioning Setting the position property to relative moves the box the specified amount(s), relative to where it would have gone with a default static positioning CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 19 Relative Positioning p {font-size:24px; color:#555; font-family:Helvetica, Arial, sans-serif; background-color:#ccc; margin:10px 0;} body {background-color:#caebff;} p#special-para {color: red; background:#fff; position:relative; top:25px; left:30px} First paragraph Second paragraph Third paragraph (with ID) Fourth paragraph Absolute Positioning Setting the position property to absolute moves the box the specified amount(s), relative to its positioning context CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 20 Absolute Positioning p {font-size:24px; color:#555; font-family:Helvetica, Arial, sans-serif; background-color:#ccc; margin:10px 0;} body {background-color:#caebff;} p#special-para {color: red; background:#fff; position:absolute; top:25px; left:30px} First paragraph Second paragraph Third paragraph (with ID) Fourth paragraph Fixed Positioning Setting the position property to fixed is the same as setting it to absolute, except: Fixed positioning is always relative to the whole page (i.e., body) Fixed positioning does not scroll the element off the page CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 21 Fixed Positioning p {font-size:24px; color:#555; font-family:Helvetica, Arial, sans-serif; background-color:#ccc; margin:10px 0;} body {background-color:#caebff;} p#special-para {color: red; background:#fff; position:fixed; top:25px; left:30px} First paragraph Second paragraph Third paragraph (with ID) Fourth paragraph (add a few more paragraphs like these) The display Property In the first class we stated that elements can be classified as: Block elements, which stack on top of each other vertically and use up the entire width of their parent Inline elements, which line up horizontally one after the other as long as there is space on the current line of elements This is known as the display property Default values depend on the element: p, blockquote, section, etc. have the default display property value of block img, a, span, etc. have the default display property value of inline You can change the value of the display property Another value you can use is none making this element, and all its children to be removed from the display, together with the space they occupy (as if they never existed in the HTML). Another property, {visibility:hidden;} achieves a similar outcome, except that in this case the space is maintained CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 22 Backgrounds Every elements box has two layers: Foreground, which is taken up by the actual contents of the element Background, which can be set to a color and an image Here is a tri-dimensional model of how this works CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 23 Background styling {background-color:red;} sets the background of the box to the specified color {background-image:url(photo.jpg);} lays the photo specified on top of the background color If the photo is smaller than the box, the image is repeated left to right, then down, to fill the box, very much like tiling a wall On the right and bottom edges, the image may be truncated You can change that by setting: {background-repeat:repeat-x;} to repeat the image only horizontally (in effect creating a fancy top border) {background-repeat:repeat-y;} to repeat the image only vertically (in effect creating a fancy left border) {background-repeat:norepeat;} to not repeat the image at all (in effect creating a corner image) {background-repeat:round;} to resize the image such that it will fill the box in complete rows and columns of the image {background-repeat:space;} to space the repeated images such that they distribute evenly across both dimensions of the box CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 24 Background Position The background-position property defines the origin point of the image used as background, relative to the element, using two properties For horizontal positioning, use right, left, or center For vertical positioning, use top, bottom, or center By default, the element and the image are aligned top left (i.e., the tiling begins from the top left corner, and continues right and down) The order of the words is interchangeable (top left is the same as left top) center center can be abbreviated as center You can also use numbers to place the first tile at the given offset from the top left corner You can also use % values (too complicate to make it worthwhile) CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 25 Background Position Examples Here is the outcome of different background-position values using a blue circle as the background image. CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 26 Background Size When you use an image as a background, the image file has an implicit size in pixels, and that is the size used for tiling the box. You can also specify different values for image size: {background-size: 50%;} sets the size to fill 50% of the box {background-size: 100px 50px;} sets the size as specified {background-size: cover;} sets the size to fill the box {background-size: contain;} sets the size so that the image fits inside the box Obviously, some of these values make more sense for no repeat backgrounds The image to the right shows the effect of these size settings on a no repeat centered background image CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 27 Background Attachment By default, when you scroll a browser window, any backgrounds move with the scroll You can change that by setting the background-attachment property to fixed {background-attachment;fixed;} will keep the image in place while you are scrolling the contents It probably makes sense for the background of the entire body (it may look funny for a smaller box) All background properties can be shorthanded in a single rule, like this: body {background: url(watermark.jpg) center #fff no-repeat contain fixed;} Unspecified properties obviously take the default value There are a few other background related properties, but thay are relatively new, nor widely supported, and somewhat complex, so we will skip over them In the textbook you can skip the remainder of chapter 3 starting with the heading Other CSS3 Background Properties. CHARLES WYKE-SMITH: STYLIN WITH CSS: A DESIGNERS GUIDE (3 ND EDITION) 28