1. 1 CSS more details Reasons to use CSS for page layoutReasons to use CSS for page layout Relative and absolute positioningRelative and absolute positioning The CSS Box ModelThe CSS Box Model Configuring single column page layouts using CSSConfiguring single column page layouts using CSS Configuring two column page layouts using CSSConfiguring two column page layouts using CSS Configuring three column page layouts using CSSConfiguring three column page layouts using CSS Configuring navigation using listsConfiguring navigation using lists Styling for print mediaStyling for print media CSS page layout resourcesCSS page layout resources

2. 2 CSS Page Layout Overview The idea of using CSS for page layout is not new The idea of using CSS for page layout is not new W3C Recommendations for CSS level 2 published in 1998 W3C Recommendations for CSS level 2 published in 1998 In the past year or so --- In the past year or so --- An increasing number of commercial sites are using CSS for page layout Wired http://www.wired.com http://www.wired.com ESPN http://www.espn.com http://www.espn.com TruGreen http://www.trugreen.com http://www.trugreen.com

3. 3 CSS Page Layout Advantages Greater typography control Greater typography control Style is separate from structure Style is separate from structure Potentially smaller documents Potentially smaller documents Easier site maintenance Easier site maintenance Increased page layout control Increased page layout control Increased accessibility Increased accessibility Ability to define styles for multiple media types Ability to define styles for multiple media types Support of the Semantic Web Support of the Semantic Web

4. 4 CSS Page Layout Disadvantages There is one large disadvantage – the use of this technology is not yet uniformly supported by browsers. There is one large disadvantage – the use of this technology is not yet uniformly supported by browsers. This current disadvantage will be less of an issue in the future people stop using old browsers and the newer browsers comply with standards. Examples in the text have been tested with Internet Explorer 6, Netscape 7, Opera 7.5, and Firefox 1.5, and Mozilla 1.7. This current disadvantage will be less of an issue in the future people stop using old browsers and the newer browsers comply with standards. Examples in the text have been tested with Internet Explorer 6, Netscape 7, Opera 7.5, and Firefox 1.5, and Mozilla 1.7.

5. 5 The Box Model Content Content Text & web page elements in the containerText & web page elements in the container Padding Padding Area between the content and the marginArea between the content and the margin Border Border Between the padding and the marginBetween the padding and the margin Margin Margin Determines the empty space between the element and adjacent elementsDetermines the empty space between the element and adjacent elements

6. 6 CSS Positioning Properties (1) Relative Relative Use to slightly change the location of an element in relation to where it would otherwise appearUse to slightly change the location of an element in relation to where it would otherwise appear h1 { background-color:#cccccc; padding:5px; color: #000000; } #myContent { position: relative; left:30px; font-family:Arial,sans-serif; }

7. 7 CSS Positioning Properties (2) Absolute Absolute Use to precisely specify the location of an element in the browser windowUse to precisely specify the location of an element in the browser window h1 { background-color:#cccccc; padding:5px; color: #000000; } #content {position: absolute; left:200; top:100; font-family:Arial,sans-serif; width:300; }

8. 8 CSS Positioning Properties (3) Float Float Elements that seem to “float" on the right or left side of either the browser window or another element are often configured using the float property.Elements that seem to “float" on the right or left side of either the browser window or another element are often configured using the float property. h1 { background-color:#cccccc; padding:5px; color: #000000; } p { font-family:Arial,sans-serif; } #yls {float:right; margin: 5px; border: solid; }

9. 9 CSS Positioning Properties (4) Display Display The display property configures how and if an element is displayed.The display property configures how and if an element is displayed. An element configured with display:none will not be displayed. This is sometimes used when configuring styles to print a web pageAn element configured with display:none will not be displayed. This is sometimes used when configuring styles to print a web page An element configured with display:block will be rendered as a block element (even if it is actually an inline element, such as an anchor tag.An element configured with display:block will be rendered as a block element (even if it is actually an inline element, such as an anchor tag.

10. 10 CSS Positioning Properties (5) Z-index Z-index Used to modify the stacking order of elements on a web page. The default z-index value is “0". Elements with higher z- index values will appear stacked on top of elements with lower z- index values rendered on the same position of the page.

11. 11 CSS Properties Used with Page Layout & Formatting See Table 10.1 in your text for an alphabetical listing. See Table 10.1 in your text for an alphabetical listing. Also see the Web Developer’s Handbook on the Student CD Also see the Web Developer’s Handbook on the Student CD

12. 12 Questions 1. State three reasons to use CSS for page layout on a commercial site being developed today. 2. Describe the difference between relative and absolute positioning. 3. In the following code snippet the logo appears under instead of over the images. Explain why. (See your textbook for the code snippet.)

13. 13 Two Column Page Layout A common design for a web page is a two-column layout with left-column navigation and right-column logo and content.

14. 14 body {margin:0px; font-family:Verdana, Arial, sans-serif; } font-family:Verdana, Arial, sans-serif; } #leftcolumn { float:left; width:100px; background-color:#eeeeee; height:400px; } height:400px; } #rightcolumn { } #logo{background-color:#eeeeee; color: #cc66cc; font-size:x-large; color: #cc66cc; font-size:x-large; border-bottom: 1px solid #000000; border-bottom: 1px solid #000000; padding:10px; } padding:10px; }.content {padding:20px 0px 0px 150px; } #floatright {margin:10px; float:right; }.footer {font-size:xx-small; text-align:center; clear:right; } text-align:center; clear:right; }.navBar{color:#000066; text-decoration:none; text-decoration:none; padding:3px; margin: 15px; padding:3px; margin: 15px; display:block; } a.navBar:link {color:#000066; } a.navBar:visited {color:#000000; } a.navBar:hover {color:#cc66cc; } Two Column Page Layout

15. 15 Navigation Layout Using Lists Navigation link areas are actually “lists" of links Navigation link areas are actually “lists" of links Some web design gurus argue that Navigation links should be configured using XHTML list elements Some web design gurus argue that Navigation links should be configured using XHTML list elements Use the list-style-image property to configure the “bullet" Use the list-style-image property to configure the “bullet" list-style-image:url(arrow.gif).

16. 16 CSS & XHTML Navigation List CSS: CSS:.navBar{color:#000066; text-decoration:none; text-decoration:none; padding:3px; margin: 15px; display:block; } XHTML: XHTML: Home Home Spring Spring Summer Summer Fall Fall Winter Winter </ul>

17. 17 Three Column Page Layout Often a web page layout will consist of a header across the top of the page with three columns below: navigation, content, and sidebar. Often a web page layout will consist of a header across the top of the page with three columns below: navigation, content, and sidebar. If you are thinking about this layout as a series of boxes—you’re thinking along the right lines for configuring pages using CSS! If you are thinking about this layout as a series of boxes—you’re thinking along the right lines for configuring pages using CSS!

18. 18 Three Column Layout Review the CSS on threecolumn.htm Review the CSS on threecolumn.htm threecolumn.htm

19. 19 Questions 1. The two column and three column page layouts you created in the Hands-On Practice did not use absolute positioning. Open the twocolumn.htm and threecolumn.htm pages in a browser. Resize the browser window. Describe what happens. What type of page design layout: ice, jello, or liquid is being used?

20. 20 Questions 2. State a reason to use an unordered list to configure navigation links. 3. Describe how to choose whether to configure a XHTML tag, create a class, or create an id when working with CSS.

21. 21 Using CSS to Style a Form Moderate Approach Moderate Approach Use a table to format the form but configure styles instead of XHTML table attributes. Use a table to format the form but configure styles instead of XHTML table attributes. table {border:solid 3px #000000;width:100%;} td {padding: 5px;margin: 0px;}.mylabel {text-align:right;}

22. 22 Using CSS to Style a Form “Pure" CSS Approach Do not use a table to format the form. Use CSS divs and spans with positioning properties to configure the page. Do not use a table to format the form. Use CSS divs and spans with positioning properties to configure the page. #myForm {border:3px solid #000000; padding:10px;margin:10px;}.myRow {height:30px;}.myRowComments {margin-bottom:20px;}.labelCol{float:left;width:100px; text-align:right;}

23. 23 CSS Styling for Print Create an external style sheet with the configurations for browser display. Create an external style sheet with the configurations for browser display. Create a second external style sheet with the configurations for printing. Create a second external style sheet with the configurations for printing. Connect both of the external style sheets to the web page using two tags. Connect both of the external style sheets to the web page using two tags.

24. 24 CSS Debugging Tips Manually check syntax errors Manually check syntax errors Use W3C CSS Validator to check syntax errors Use W3C CSS Validator to check syntax errors http://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/ Configure temporary background colors Configure temporary background colors Configure temporary borders Configure temporary borders Use comments to find the unexpected cascade Use comments to find the unexpected cascade Don’t expect your pages to look exactly the same in all browsers! Don’t expect your pages to look exactly the same in all browsers! Be patient! Be patient!

25. 25 CSS Page Layout Resources For additional study: For additional study: http://glish.com/css/ http://glish.com/css/ http://glish.com/css/ Large collection of CSS page layouts and links to tutorialsLarge collection of CSS page layouts and links to tutorials http://www.websitetips.com/css/index.shtml http://www.websitetips.com/css/index.shtml http://www.websitetips.com/css/index.shtml Comprehensive list of tutorials and CSS-related sitesComprehensive list of tutorials and CSS-related sites http://www.meyerweb.com/eric/css/ http://www.meyerweb.com/eric/css/ http://www.meyerweb.com/eric/css/ The web site of Eric Meyer, a leading-edge web developerThe web site of Eric Meyer, a leading-edge web developer http://www.w3.org/Style/CSS/learning http://www.w3.org/Style/CSS/learning http://www.w3.org/Style/CSS/learning W3C’s list of CSS resourcesW3C’s list of CSS resources http://www.bluerobot.com/web/layouts/ http://www.bluerobot.com/web/layouts/ http://www.bluerobot.com/web/layouts/ A “reservoir” of CSS page layoutsA “reservoir” of CSS page layouts http://www.blooberry.com/indexdot/css/ http://www.blooberry.com/indexdot/css/ http://www.blooberry.com/indexdot/css/ CSS syntax reference listCSS syntax reference list

26. 26 Questions 1. State an advantage of using CSS to style for print. 2. Describe a CSS display problem that you encountered and the steps you took to resolve it. 3. True or False. CSS that validates must always work.