1. Web Authoring: Using Cascading Style Sheets ITNW 6030

2. Introductions: What is your name? What is your experience with web design? What is your experience with CSS? Is there anything specific you would like to make sure we cover? Class Structure Housekeeping

3. Going the Extra Mile: Absolute & Relative Positioning Within CSS you can position where items will appear in the browser. This is done by either one of two ways. An absolute position, where you are defining exactly where within the browser that the item should appear. A relative position, where an item is placed within the browser based on its relationship to another item already in the browser output.

4. Going the Extra Mile: Absolute Positioning If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact pixel you specify. Say I wanted a graphic to appear 46 pixels from the top of the page and 80 pixels in from the right, I could do it. The CSS code you'll need to add into the image is img {position: absolute; top: 46px; right: 80px; } You can add the CSS directly into the tag using the style attribute, or you can use classes and ids and put them into your stylesheet.

5. Going the Extra Mile: Relative Positioning When you position something relatively, you are modifying its position from where it would have been if you hadn't changed anything. some words

6. Going the Extra Mile: z-index When using relative or absolute positioning you can aslo use z-index. The z-index property refers to the 'stacking order' of an element - enabling the items with a greater stack order to appear 'on top of' items with a lower stack order. img { position:absolute; left:0px; top:0px; z-index:10; } img { position:absolute; left:0px; top:0px; z-index:5; } would appear 'above' *

7. Going the Extra Mile: Working with Lists The display property is used to define an element with one of four values: block (a line break before and after the element) inline (no line break before and after the element) none (no display) Each element typically is given a default display value by the browser, based on suggested rendering in the HTML specification. The display property can be dangerous because of its ability to display elements in what would otherwise be an improper format. The use of the value none will turn off display of the element to which it is assigned, including any children elements.

8. Going the Extra Mile: Working with Lists The white-space property will determine how spaces within the element are treated. This property takes one of three values: normal (collapses multiple spaces into one) pre (does not collapse multiple spaces) nowrap (does not allow line wrapping without a tag)

9. Going the Extra Mile: Working with Lists The list-style-type property specifies the type of list-item marker, and is used if list-style-image is none or if image loading is turned off. Examples: LI.square { list-style-type: square } UL.plain { list-style-type: none } OL { list-style-type: upper-alpha } /* A B C D E etc. */ OL OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */ OL OL OL { list-style-type: lower-roman } /* i ii iii iv v etc. */

10. Going the Extra Mile: Working with Lists The list-style-image property specifies the image that will be used as list- item marker when image loading is turned on, replacing the marker specified in the list-style-type property. Examples: ul.check { list-style-image: url(/li-markers/checkmark.gif) } ul li.special { list-style-image: url(special.png) }

11. Going the Extra Mile: Working with Lists The list-style-position property takes the value inside or outside, with outside being the default. This property determines where the marker is placed in regard to the list item. If the value inside is used, the lines will wrap under the marker instead of being indented.

12. Going the Extra Mile: Working with Lists Syntax: list-style: Possible Values: || || Initial Value: Not defined Applies to: Elements with display value list-item Inherited: Yes The list-style property is a shorthand for the list-style-type, list-style- position, and list-style-image properties. Examples: LI.square { list-style: square inside } UL.plain { list-style: none } UL.check { list-style: url(/LI-markers/checkmark.gif) circle } OL { list-style: upper-alpha } OL OL { list-style: lower-roman inside }

13. Going the Extra Mile: Working with Tables TABLE border-width (px) 1px 2px 3px 4px 5px thin medium thick 0px border-spacing 2px 1px 3px 4px 5px 0px border-style outset none hidden dotted dashed solid double ridge groove inset border-color gray white blue green black red custom border-collapse separate collapse background-color white #FFFFF0 #FAF0E6 #FFF5EE #FFFAFA custom: TD/TH border-width (px) 1px 2px 3px 4px 5px thin medium thick 0px padding 1px 2px 3px 4px 5px 0px border-style inset none hidden dotted dashed solid double ridge groove outset border-color gray white blue green black red custom: background-color white #FFFFF0 #FAF0E6 #FFF5EE #FFFAFA custom:

14. Going the Extra Mile: The Box Model To understand positioning in CSS you must first understand the box model. For display purposes, every element in a document is considered to be a rectangular box which has a content area surrounded by padding, a border and margins. The illustration below shows these various parts.

15. Going the Extra Mile: The Box Model Margins are always transparent. Borders come in various styles. Background settings for an element apply to the the area just inside the borders which includes both the padding and content areas. Margins, borders and padding are all optional but for purposes of calculating positions and sizes they are given a default width of zero if not specified. Different widths can be set for each individual side (top, right, bottom and left) if desired. Margins can even have negative values. The width and height of each box is equal to the width and height of the outer margin box. Note that this is not the necessarily the same as the width and height of the content area. A box can contain any number of other boxes, creating a hierarchy of boxes that corresponds to the nesting of page elements. The browser window serves as the root element for this hierarchy.

16. Going the Extra Mile: Box Types There are two basic types of boxes, block and inline. Block boxes are generated by elements such as P, DIV or TABLE. Inline boxes are generated by tags such as B, I or SPAN and actual content like text and images. The box type may also be set using the display property. Setting a value of block on an inline element, for example, will cause it to be treated as a block element. Note that if you set the display to none, no box is created. The browser acts as if the element did not exist. Likewise, any nested elements are ignored as well, even if they specifically declare some other display value. There are other types of boxes which apply to special elements like lists and tables. However, these are ultimately treated as block or inline boxes for positioning purposes. As such, these other box types not covered here.

17. Going the Extra Mile: Containing Boxes Block boxes act as a containing block for any boxes within them. For example, in this code: This is the first sentence. This is the second sentence. the DIV element establishes a containing block for both the first string of text and the P element. The P element in turn creates a containing block for the second text string.

18. Going the Extra Mile: Containing Boxes While the text of the first sentence generates an inline box, there is considered to be block box surrounding it. These "anonymous" block boxes are used to simplify the positioning process. The result is that a block box will only contain either all inline boxes or all block boxes, even if some of those block boxes only act as a wrapper for an inline box. This containing block is used in determining both the position of the boxes within it and in some cases, the dimensions of those boxes. For example, if an element has a style setting of width:50%; its width will be set to half the width of its containing block.

19. Going the Extra Mile: Creating space Elements in an html document can be styled with attributes affecting the alignment or spacing to other elements. There is the normal flow of items - and there are additional attributes that can be styled. width height float clear padding margin border

20. Going the Extra Mile: Creating space - width Each block-level or replaced element can be given a width, specified as a length, a percentage, or as auto. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) The initial value for the width property is auto, which results in the element's intrinsic width (i.e., the width of the element itself, for example the width of an image). Percentages refer to the parent element's width. Negative values are not allowed. This property could be used to give common widths to some INPUT elements, such as submit and reset buttons. input.button {width: 120px;}

21. Going the Extra Mile: Creating space - height Each block-level or replaced element can be given a height, specified as a length or as auto. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) The initial value for the height property is auto, which results in the element's intrinsic height (i.e., the height of the element itself, for example the height of an image). Negative lengths are not allowed. As with the width property, height can be used to scale an image: img.announce {width: 60px; height: 40px;} In most cases, authors are advised to scale the image in an image editing program, since browsers will not likely scale images with high quality, and since scaling down causes the user to download an unnecessarily large file.

22. Going the Extra Mile: Creating space - float The float property allows authors to wrap text around an element. This is identical in purpose to HTML 3.2's ALIGN=left and ALIGN=right for the IMG element, but CSS1 allows all elements to "float," not just the images and tables that HTML 3.2 allows.

23. Going the Extra Mile: Creating space - clear The clear property specifies if an element allows floating elements to its sides. A value of left moves the element below any floating element on its left; right acts similarly for floating elements on the right. Other values are none, which is the initial value, and both, which moves the element below floating elements on both of its sides. #footer {clear:both;}

24. Going the Extra Mile: Creating space - padding The padding-top property describes how much space to put between the top border and the content of the selector. The padding-right property describes how much space to put between the right border and the content of the selector. The padding-bottom property describes how much space to put between the bottom border and the content of the selector. The padding-left property describes how much space to put between the left border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

25. Going the Extra Mile: Creating space - padding The padding property is a shorthand for the padding-top, padding- right, padding-bottom, and padding-left properties. Between one and four values are given, where each value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted. If four values are given, they apply to top, right, bottom, and left padding, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side. For example, the following rule sets the top padding to 2em, the right padding to 4em, the bottom padding to 5em, and the left padding to 4em: BLOCKQUOTE { padding: 2em 4em 5em }

26. Going the Extra Mile: Creating space - margin The margin-top property describes how much space to clear beyond the top border. The margin-right property describes how much space to clear beyond the right border. The margin-bottom property describes how much space to clear beyond the bottom border. The margin-left property describes how much space to clear beyond the left border. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are permitted.

27. Going the Extra Mile: Creating space - margin The margin property is a shorthand for the margin-top, margin-right, margin-bottom, and margin-left properties. Between one and four values are given, where each value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are permitted. If four values are given, they apply to top, right, bottom, and left margin, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side. For example, the following rule sets the top and bottom padding to 2em, the right and left padding to 4em: BLOCKQUOTE { margin: 2em 4em }

28. Going the Extra Mile: Creating space - border The border-top property describes the width, style, and color of an element's top border. The border-right property describes the width, style, and color of an element's right border. The border-bottom property describes the width, style, and color of an element's bottom border. The border-left property describes the width, style, and color of an element's left border. p {border-top: 5px solid red;}

29. Going the Extra Mile: Creating space - border The border-width property is used to set the border width of an element by specifying between one and four values, where each value is a keyword or a length. Negative lengths are not permitted. If four values are given, they apply to top, right, bottom, and left border width, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side. This property is a shorthand for the border-top-width, border-right- width, border-bottom-width, and border-left-width properties.

30. Going the Extra Mile: Creating space - border The border-style property specifies what type of border to use. Keep in mind - none of the other border properties will be displayed unless border-style is set.

31. Going the Extra Mile: Creating space - border The border-color property sets the color of an element's border. Between one and four color values are specified. If four values are given, they apply to top, right, bottom, and left border color, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

32. Going the Extra Mile: Creating space - border The border property is a shorthand for setting the width, style, and color of an element's border. H2 { border: groove 3em } A:link { border: solid blue } A:visited { border: thin dotted #800080 } A:active { border: thick double red } The border property can only set all four borders; only one border width and border style may be given. To give different values to an element's four borders, an author must use one or more of the border-top, border-right, border-bottom, border- left, border-color, border-width, border-style, border-top-width, border-right-width, border-bottom-width, or border-left-width properties.

33. Going the Extra Mile: Review Absolute and relative positioning z-index inline vs. block Working with Lists Working with Tables Box Model

34. Implementation

35. Implementation: Creating menus Vertical Navigation Why use a List? At its most basic level, site navigation is simply a list of related items - or links to other pages - in the site. So, a standard HTML list is the ideal starting point. Home About Services Staff Portfolio Contact Sitemap

36. Implementation: Creating menus Styling the List To style the list, you will need to use selectors that target the,, and elements. To make sure you do not target every instance of these elements on the page, you will need to include the unique identifier, #navigation, within each selector. Here are some of the selectors you can use. ul#navigation {...} ul#navigation a {...} ul#navigation a:hover {...} ul#navigation li {...}

37. Implementation: Creating menus Styling the element Most browsers display HTML lists with left indention. To set this indentation, some browsers use padding and others use margins. To remove the left indention consistently across all browsers, set both padding-left and margin-left to 0 on the element. ul#navigation { margin-left: 0; padding-left: 0;}

38. Implementation: Creating menus To remove the list bullets, set the list-style-type to none. ul#navigation { margin-left: 0; padding-left: 0; list-style-type: none;}

39. Implementation: Creating menus Styling the Element Text links are generally only active when you mouse over the actual text area. You can increase this active area by applying display: block; to the element. This will change it from inline to block level and the active area will extend to the full width of the list item. To remove the underlines from the links, use text-decoration: none;. ul#navigation a { display: block; text-decoration: none;}

40. Implementation: Creating menus To set the background color you can use the shorthand rule background: #036;. This color can be changed to set your needs. ul#navigation a { display: block; text-decoration: none; background: #036;}

41. Implementation: Creating menus To set a padding for an element you can use a shorthand declaration. For example if we want a.2 em top padding and.5em bottom padding. This will give the user a bigger area in which to select the link. ul#navigation a { display: block; text-decoration: none; background: #036; padding:.2em.5em;}

42. Implementation: Creating menus Setting Border To provide some space in between the list items, you can add a border on the bottom of each list item you can use: border-bottom: 1px solid #fff This color of #fff will help distinguish the different links. ul#navigation a { display: block; text-decoration: none; background: #036; padding:.2em.5em; border-bottom: 1px solid #fff;}

43. Implementation: Creating menus You can set the width of the element by adding width: 6em to your code. Of course this width can be changed to suit your needs. ul#navigation a { display: block; text-decoration: none; background: #036; padding:.2em.5em; border-bottom: 1px solid #fff; width: 6em;}

44. Implementation: Creating menus Adding A Hover Effect To this set the background to #69C and the color to #000 to ul#navigation a:hover {...} ul#navigation a:hover { background: #69C; color: #000;}

45. Implementation: Creating menus Styling the element You might notice there are some slight gaps between the list items in some versions of IE or Opera. This can be overcome by setting the element to display: inline.

46. Implementation: Creating menus Going horizontal: We will use the same code we have been using and change the code in order to make it horizontal. ul#navigation {...} ul#navigation a {...} ul#navigation a:hover {...} ul#navigation li {...} Home About Services Staff Portfolio Contact Sitemap

47. Implementation: Creating menus To remove indentation you can use: ul#navigation { margin-left: 0; padding-left: 0;} To remove the list bullets, set the list-style-type to none. ul#navigation { margin-left: 0; padding-left: 0; list-style-type: none;}

48. Implementation: Creating menus Add a background: ul#navigation { margin-left: 0; padding-left: 0; list-style-type: none; background: #036;}

49. Implementation: Creating menus To float the, use float: left. You will also need to set a width. In this case, we will use 100% because we want the list to spread across the full width of the page. ul#navigation { margin-left: 0; padding-left: 0; list-style-type: none; background: #036; float: left; width: 100%}

50. Implementation: Creating menus Styling The Element To make sure the list items are displayed in a single line, the element must be set to display: inline;. ul#navigation li { display: inline; }

51. Implementation: Creating menus Styling the Element You can increse the active area of text links by applying display: block; to the element. This will change it from inline to block level and allow you apply padding to all sides of the element. Set the element to display: block; so that padding can be applied to all sides. This will give the element additional width and height, increasing the clickablae area. The element should then floated, so that each list item moves into a sing line butting againg the previous item. ul#navigation a { display: block; float: left;}

52. Implementation: Creating menus Styling the Element Next add some padding using the padding delcaration. You can use.2em for top and bottom padding and 1em for left and right padding. ul#navigation a { display: block; float: left; padding:.2em.9em;}

53. Implementation: Creating menus Styling the Element To seperate each list item, a white line divider will be added to the end of each item This is done by adding a white border to the right side of each list item, using border-right: 1px solid #fff;. ul#navigation a { display: block; float: left; padding:.2em.9em; border-right: 1px solid #fff;}

54. Implementation: Creating menus Styling the Element Adding A Hover Effect To this set the background to #69C and the color to #000 to ul#navigation a:hover {...} ul#navigation a:hover { background: #69C; color: #000;}

55. Implementation: Page layouts CSS layout uses style sheets to define the placement of elements on a web page. Typically CSS layout replaces tables, which are currently the most popular method of placing page elements. CSS allows you to separate the structure and presentation of documents. The separation of structure and presentation is a principle that governs (or should govern) all markup languages, such as HTML. HTML is intended to structurally organize the content of a document so that it's clear what the conceptual relationship is between various portions of a document. The markup language is NOT intended to define the display of the document, although display and structure are often tightly connected.

56. Implementation: Page layouts The separation of structure and presentation results in the following benefits: A semantic web: the future of web documents and the definition of well structured markup; open to all audiences Ease of redesign Degradable code: making sure your code works on older browsers.

57. Implementation: Page layouts The separation of structure and presentation results in the following issues: Layout limitations: there are strengths and weaknesses to css layouts, just as there are with tables based layouts Differences in browser display Switching from tables to css

58. Implementation: Page layouts Absolute Positioning {position: absolute; top: 30px; /* 30 pixels from the top of the page */ left: 80px; /* 80 pixels from the left hand side */ width: 100px; /* Always set a width for absolute positioned block level elements, such as divs */ border: 1px solid red; /* So we can see what is happening */ } The key things to note are that a width is, while not required, a very good idea, and that you can use any pair of positioning properties. You could, for example, use top: 30px and right: 10px to have an element appear in the top right hand corner of the screen. Technically you can use both a right and a left property and leave the width as auto. But unfortunately IE does not support this.

59. Implementation: Page layouts Relative Positioning {position: relative; top: 30px; /* 30 pixels from the top of the page */ left: 80px; /* 80 pixels from the left hand side */ border: 1px solid red; /* So we can see what is happening */ } The main thing to keep in mind with relative positioning is that you are modifying the position of the element relative to where it would have been otherwise.

60. Implementation: Page layouts Absolute Positioning Using position: absolute, simple but powerful layouts of both two and three columns can be easily achieved. The key trick to creating layouts with absolute positioning is that you do not need to use position: absolute on everything. Instead, you can create space on the page by applying margins, then use absolute positioning to "fill" that space.

61. Implementation: Page layouts 2 Column Layout - absolute positioning div#main {margin-left: 20%; /* Create space on the page for the menu */ } div#menu { position: absolute; top: 1em; left: 1%; width: 17%; /* Must be less than 20% or the menu may overlap the content */ } Some Content goes here content goes here content goes here the menu

62. Implementation: Page layouts 3 Column Layout - absolute positioning div#main {margin-left: 15%; /* Space for the left menu */ margin-right: 15%; /* Space for the right menu */ } div#menu1 {position: absolute; top: 1em; left: 1%; width: 13%; } div#menu2 { position: absolute; top: 1em; right: 1%; /* Because top and right are defined, appears in top right*/ width: 13%'}

63. Implementation: Page layouts 3 Column Layout - absolute positioning content goes here content goes here content goes here the left hand menu the right hand menu

64. Implementation: Page layouts Watch out for overlaps! The single biggest potential problem with absolute positioning is that, if you aren't careful, absolute positioned elements can overlap unpositioned (or even other positioned) elements on the page.

65. Implementation: Page layouts Advantages of Absolute Positioning Full control over where elements are positioned on the page - much more control than is possible with tables. The order of the divs in the HTML source code doesn't matter - once something is absolute positioned it is "pulled out of the flow" of the document, so it can be placed pretty much anywhere in that document. This allows you to have your content before your navigation structures, which is good for accessibility and good for search engine optimisation. Disadvantages of Absolute Positioning Elements can end up overlapping if due care is not taken - especially when the user dramatically resizes the page. The footer problem. If you have a layout which uses absolute positioning for one of the columns, there is no way of creating a footer that spans the whole of the bottom of the page without risk of it being overlapped by the absolutely positioned column should that column be longer than the non- positioned column.

66. Implementation: Page layouts Float basics - What is a float? When you float an element it becomes a block box. This box can then be shifted to the left or right on the current line. The markup options are "float: left", "float: right" or "float: none". A floated box is laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content can flow down the right side of a left-floated box and down the left side of a right-floated box.

67. Implementation: Page layouts

70. Implementation: Page layouts Where will a floated element move to? Floated boxes will move to the left or right until their outer edge touches the containing block edge or the outer edge of another float.

71. Implementation: Page layouts If there isn't enough horizontal room on the current line for the floated box, it will move downward, line by line, until a line has room for it.

72. Implementation: Page layouts Elements above and below floated elements Block level elements above a floated element will not be affected by it. However, elements below will wrap around the floated element:

73. Implementation: Page layouts Borders, background images and background color While content will wrap around a floated element, border, background image and background color will extend underneath.

74. Implementation: Page layouts Floats and "clear" Elements following a floated element will wrap around the floated element. If you do not want this to occur, you can apply the "clear" property to these following elements. The four options are "clear: left", "clear: right", "clear: both" or "clear: none". clear: left The element is moved below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.

75. Implementation: Page layouts clear: right The element is moved below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.

76. Implementation: Page layouts clear: both The element is moved below all floating boxes of earlier elements in the source document.

77. Implementation: Basic Design Examples Basic Three Column with Header Basic Three Column Basic Two Column with Header Basic Two Column

78. Implementation: Floating a column to the right

79. Implementation: Floating a column to the right Step 1 - Start with two paragraphs of text For this exercise, we want to force a paragraph over to the right to allow the content to flow alongside it. We also want to add margins to the left and bottom sides of the column where the paragraph will be held, to push the content away. Finally, we want to add a border around the column. We start with 2 paragraphs of text. Insert the tags for the name column around one of the paragraphs.

80. Implementation: Floating a column to the right Step 2 - Apply float: right to the column To force the column over to the right edge, "float: right" is applied to the column using an id selector. In this case, the name of the id is "#column" but any name can be used. A width is needed in this instance as the column needs to have direction in order to keep its size or else the text would determine the size of the div. #column { float: right; width: 200px; }

81. Implementation: Floating a column to the right Step 3 - Add margin Margins can be added to push the content away from the left and bottom sides of the column. A single shorthand rule can be used - "margin: 0 0 10px 10px;". Keep in mind that shorthand values are applied in a clockwise order; top, right, bottom, left. margin: 0 0 10px 10px;

82. Implementation: Floating a column to the right Step 4 - Add a border To add a border to the image, use "border: 1px solid #666;" border: 1px solid #666;

83. Implementation: Floating a column to the right Step 5 - Add padding If you want the border to sit slightly off the edge of the image, use padding. padding: 2px;

84. Implementation: Floating a column to the right Step 6 - Background color background-color: #00B4DC;

85. Implementation: Floating a column to the right Final CSS CODE #column { float: right; border: 1px solid #666; padding: 2px; background-color: #00B4DC; width: 200px; margin-top: 0; margin-right: 0; margin-bottom: 10px; margin-left: 10px; }

86. Implementation: Liquid 2 Column Layout with Header & Footer

87. Implementation: Liquid 2 Column Layout with Header & Footer Step 1 - Start with the semantically marked up code To lay out a page into two columns, you need to start with the basic page structure. In this case we will use some dummy content to create a two column template. The page has been grouped into five separate divs, and each of these div's has been been given a unique ID selector. The divs are labeled; "containerex" (wrapped around the entire page's content), "top" (for the top banner), "leftnav" (for the smaller, left column), "contentex" (for the main content) and "footer" (for the footer across the bottom of the page).

88. Implementation: Liquid 2 Column Layout with Header & Footer Step 2 - Add width and margin to the container To get the content to sit in from the edge of the browser window we need to set width and margins on the main div that wraps around the content. In this case we will use a width of 90% so the CSS declaration used is: "width: 90%". Any width could be used, including 100%, which would force the content to the left and right edges of the viewport. To center the div in the viewport, we apply "auto" margins to left and right. To move the div away from the top and bottom of the viewport we use a margin of 10px. These can be combined into one shorthand CSS declaration: "margin: 10px auto". This will apply a margin of 10px to the top and bottom and auto margins to the left and right.

89. Implementation: Liquid 2 Column Layout with Header & Footer Step 2 - Add width and margin to the container #containerex { width: 90%; margin: 10px auto; } Some browsers do not support the auto left and right margins, so... body {text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */}

90. Implementation: Liquid 2 Column Layout with Header & Footer Step 3 - Add color, background color and border To add color and background color to the main div, use "background-color: #fff;" and "color: #333;". To apply a border to the div, use "border: 1px solid gray;". #containerex { width: 90%; margin: 10px auto; background-color: #fff; color: #333; border: 1px solid gray; }

91. Implementation: Liquid 2 Column Layout with Header & Footer Step 4 - Add line height To increase readability, you can increase the overall line-height of text. If it is applied to this main div, it will cascade down throughout all divs below. The rule can be written as "line-height: 130%;". line-height: 130%;

92. Implementation: Liquid 2 Column Layout with Header & Footer Step 5 - Styling the top banner To style the top div, we will set a background color, padding and a border across the bottom. The three declarations will be: "padding:.5em;" to add padding to the div, "background-color: #ddd;" to add a background color and "border-bottom: 1px solid gray" to apply a border to the bottom of the div. #top { padding:.5em; background-color: #ddd; border-bottom: 1px solid gray; }

93. Implementation: Liquid 2 Column Layout with Header & Footer Step 6 - Remove margins and padding from the h1 Inside the top banner there is an H1 tag. We want the words to sit.5em in from the top and left edge of the div. Browsers add different amounts of padding above an H1, it is easiest to remove all padding and margin from this H1 and let the div provide the padding. This is achieved by using a descendant selector - "#top h1 { padding: 0; margin: 0;}". #top h1 { padding: 0; margin: 0; }

94. Implementation: Liquid 2 Column Layout with Header & Footer Step 7 - Apply "float" to the leftnav To float the left nav, we need to use the rule: "#leftnav {float: left;}". When a div is set to float, a width must also be included, so we can add another declaration: "width: 160px;". #leftnav { float: left; width: 160px; }

95. Implementation: Liquid 2 Column Layout with Header & Footer Step 8 - Add margin and padding to the leftnav Next, we set the margin to "0", add 1em of padding (which will move the text away from the edges of the div). margin: 0; padding: 1em;

96. Implementation: Liquid 2 Column Layout with Header & Footer Step 9 - Setting margins to the "content" div This next step is the most important of the entire process. The "leftnav" div has been floated, so text from the "content" div will flow down its left edge and then wrap around under it. To make the text appear as it is in a new column, we apply margin-left to the "content" div, making sure that the width is greater than the overall width of the "leftnav" div. In this case, we will use "margin-left: 200px", which will give us 40px margin between the leftnav and the main content. We will also apply a border to the left of the "content" div. This could be a problem if the "leftnav" div is longer than the main content. If this is the case, the border can be applied to the right side of the "leftnav" div instead of the "content" div. #contentex { margin-left: 200px; border-left: 1px solid gray; }

97. Implementation: Liquid 2 Column Layout with Header & Footer Step 10 - Add padding to the "content" div To add padding to the content div use "padding: 1em;" padding: 1em; Step 11 - Styling the footer To style the footer, we first need to set it to "clear: both". This is critical, as it will force the footer below any floated elements above. We then add "padding:.5em" and "margin: 0". #footer { clear: both; margin: 0; padding:.5em; }

98. Implementation: Liquid 2 Column Layout with Header & Footer Step 12 - Add color and background color to the footer To add color and background color to the footer use the following declarations: "color: #333;" and "background-color: #ddd;" color: #333; background-color: #ddd; Step 13 - Add a border to the footer To add a border to the top of the footer use "border-top: 1px solid gray;" border-top: 1px solid gray;

99. Implementation: Liquid 2 Column Layout with Header & Footer Step 14 - Removing top margins To remove the space above content in the "leftnav" and "content" divs, use the following rules: "#leftnav p { margin: 0 0 1em 0; }" and "#content h2 { margin: 0 0.5em 0; }". Browsers use different amounts of margin above paragraphs and headings. It is safe to remove all top margins, as long as there are bottom margins to keep the paragraphs and headings separate from elements below them. #leftnav p { margin: 0 0 1em 0; } #contentex h2 { margin: 0 0.5em 0; }

100. Implementation: Liquid 2 Column Layout with Header & Footer Step 15 - Setting a maximum line length If you want to set a maximum width on your main content, you can do this by adding a new rule : "#content { max-width: 36em; }". Although IE browsers will ignore this rule, other standards compliant browsers will not allow the content area to go wider that 36em - keeping the line length to a comfortable width. #contentex { max-width: 36em; }

101. Implementation: Liquid 2 Column Layout with Header & Footer

102. Implementation: Review Benefits and Issues around CSS for page layout Options for spacing: padding, margin, border Options for placement: absolute, relative, float Using to build a navigation structure Basic page layouts

103. Questions?