1. Page Layouts The next step in our development of our web page design is to implement page layouts – In 1996, W3C recommended what we call CSS Level 1 and in 1998 they recommended CSS Level 2 – they are currently working on CSS Level 3 – Most web browsers have only recently been able to handle CSS Level 2, which includes CSS-P properties for positioning, what we will cover in this chapter Why use CSS page layout? – Greater control on typography and page layouts – Style can be separated from structure (layout) – Could allow us to create smaller documents because formatting and page layout information are placed in separate files – Easier site maintenance and ability to make quicker changes to format – Increased accessibility, ability to utilize more multimedia – Support for the semantic web Our other options are to use HTML tables (we cover this in chapter 8), frames (we cover this separately) or nothing at all

2. XHTML Tables vs CSS One way to control the layout of items in a page is to place each item as an entry into a table – We will cover tables in chapter 8 Many web pages are created using tables, so why not use this approach rather than CSS? – One problem with CSS is that, if a browser is not set up to handle CSS2 and gracefully degrades, the result is a less-than-satisfying display of the web page content see for instance how figure 6.1 becomes figure 6.2 or 6.3 – Tables are a perfectly acceptable way to do things, but tables can be difficult to maintain and update and are a clunkier approach using CSS is more in line with the concept of having an explicit page layout tables require that you determine where everything must fit before you start

3. The Box Model We will call the various web page entries content areas – A content area can contain text, images, paragraphs, headings, lists, etc – An area will have a border and padding and will have four sides (top, bottom, left, right) default sizes are 0 – Surrounding each content area is a margin, which will always be transparent use the margin property to override the default size So far, this is the same as we saw before in chapter 4 using headings, paragraphs, divisions – In order to create a more elaborate format, we will now nest our statements – We will use the tag in order to display a defined style for a content area although we could use any of the types of region tags – this is just for the next examples, we can (and will) use other tags for our areas

4. Simple Example Here we see two kinds of flow, normal and nested.div1 { width: 200px; height: 200px; background-color: #666666; border: inset; padding: 5px; }.div2 { width: 100px; height: 100px; background-color: #ffffff; border: ridge; padding: 5px; margin: 10px; } This is one content area Here is another content area This is one content area Here is a nested or inner content area

5. Column-Based Example We can position our content areas – specifying that they have a position of absolute – using left and/or top to specify starting location in pixels.div1 { width: 200px; height: 200px; background-color: #666666; border: inset; padding: 5px; position: absolute; left: 0px; }.div2 { // from the previous slide // }.div3 { // same as with div1 position: absolute; left: 250px; } Column 1 content area Nested content area Column 2 content area Nested content area

6. Absolute vs. Relative Positioning Using absolute position requires that you know the exact spacing of elements – This may require guesswork and revision particularly if the content will change Relative positioning adjusts one area relative to another and so might be more useful – Relative position will change the location of an element slightly from where it would normally be – The element is positioned at its normal location but offset by a value you specify using top or bottom, left or right or both (e.g., top and left).div1 {background-color: #99FF00; position: absolute; left: 0px;}.div2 {background-color: #CCCCCC; position: relative; left: 50px;}

7. More Examples Here, we do not nest the statements, one follows the other. By using absolute for div2 notice how the text of div1 runs into div2 when we add top: 0px to both..div1 { background-color: #99FF00; position: absolute; left: 0px; top: 0px; }.div2 { background-color: #CCCCCC; position: absolute; left: 50px; top: 0px; } Changing position to relative for div2 gives us In this version, we make div1 relative with a top of 50px and div2 absolute with a top of -50px. The use of -50px forces div2 to appear 50px earlier than it should, thus it appears above div1

8. Example Layout We want to create a page with a layout as follows – A logo that runs across the top after the image – A navigation bar along the left hand side that consists of a few links – An area to the right of the navigation bar which consists of text followed by a row of images followed by another text area We will define each as a class as follows: – h1 heading for the logo – nav for the navigation bar – txt1 and txt2 for the two text areas – ims for the row of images We will use absolute positioning to locate each of these items – We will use tags to place our classes other than the header (although we could use or or other) We will define our css code in our html using the style tag

9. Style Definitions h1 { width: 300px;height: 50px; background-color: #333333; color: #ffffff; font-family: "Geneva", sans-serif; text-align: center; border: outset; padding: 10px 0px 10px 0px; position: absolute; top: 0px;left: 100px; }.ims {width: 500px;height: 100px; padding: 5px 10px 5px 10px; position: absolute; top: 200px;left: 120px; }.nav {width: 80px;height: 100 px; color: #cccccc; font-family: "Times New Roman", serif; position: absolute; top: 80px;left: 20px; }.txt1 {width: 500px;height: 100px; background-color: #666666; color: #ff99cc; font-family: Georgia, serif; position: absolute; top: 100px;left: 120px; }.txt2 {width: 500px;height: 100px; background-color: #666666; color: #ff99cc; font-family: Georgia, serif; position: absolute; top: 300px;left: 120px; }

10. Continued Isotopes R Us Home Link 1 Link 2 Link 3 Link 4 Link 5 Here is some text that describes us. This is just a place-holder to demonstrate the formatting. I'm typing stuff just to fill in space. Are you reading this stuff that is here just to fill in space? If so, don't you feel foolish that you are wasting your time reading this nonsense? If you don't feel foolish, you should! <img src="image1.jpg"> And here is yet more text to fill up space. Blah blah blah, just nothing to say here, don't read this, go away now. Stop reading. NOW! Ok, still reading this? Well, here is something meaningful... well, maybe not.

11. The Float Property Another positioning property is called float – This allows one item to float around another item for instance having text “float” around an image – When floating an image, the margin property can configure empty space between the image and text Here are some examples to show the difference between float: left and float: right.ims { float: left; margin: 0px 10px 0px 10px; }.ims { float: right; margin: 0px 10px 0px 10px; } The tag appears before the text in the html file

12. Another Float Example h1 { background-color: #ccffaa; color: 000000; padding: 15px; font-family: geneva; }.ims { float: left; margin: 0 10px 0 5px; border: solid; } Football Helmets Arizona Cardinals helmet has an angry looking cardinal, which is the state bird of Ohio if you didn't know. Cincinnati Bengals helmet consists of bengal stripes. Here though, we represent it as a letter B. The Minnesota Vikings helmet is a pretty intimdating viking, don't you think? The St. Louis Rams helmet consists of curves that look like Rams' horns. But here, we see the whole angry Ram. I'd hate to be in this guy's way!

13. Clear and Display The clear property is used to stop a float – You would use this so that further items do not continue to “float” clear: left; would clear a left float, clear: right would clear a right float, etc download float2.html and see what happens when you put clear: left; in the.ims rule you would instead use clear: left in a separate rule that follows the images so that the float can be cleared before starting whatever follows that part of the page The display property allows you to specify if an element is displayed or not and whether it should be treated as an in-line element or a block element – This allows you to more precisely control consecutive elements than using tags like,, or which inserts blank spaces around and above/below the current item we use display in ch. 7 & 8 so postpone discussion until then

14. Z-index Property The z-axis indicates depth – as opposed to x and y coordinates – so the z-index property can be used to denote the way items are “stacked” on a page what element is on top of what element The default z-index is 0 – elements with a higher z-index will appear stacked on top of those with a lower z-index In our previous example with the helmets, the figures appeared on the same line but not on top of each other (not stacked) – If we reposition the figures so that they do overlap, we can specify in what order they should appear by using z-index – Without this, they will appear in the opposite order that they appear in the html file (that is, the last one is on top automatically)

15. Example: Using z-index h1 { background-color: #ccffaa; color: 000000; padding: 15px; font-family: geneva; width: 350px; }.im1 { position: absolute; left: 0px; top: 100px; z-index: 3; }.im2 { position: absolute; left: 70px; top: 100px; z-index: 2; }.im3 { position: absolute; left: 140px; top: 100px; z-index: 1; }.im4 { position: absolute; left: 210px; top: 100px; z-index: 0; }.descr { position: absolute; top: 200px; left: 50px; width: 300px; text-align: center; }

16. Formatting Example From the textbook (p. 237-240) – As can be seen from the wireframe to the right, we need three areas Logo which includes navigation bar (nested) and image Content area Footer (footer is nested in the content area) – We will divide our definitions into five classes contentlogo which will embed (nest) nav imagelogo content footer

17. XHTML Code <img id="imagelogo" src="pls.jpg" alt="Pink Lady Slipper" width="200" height="150" /> Door County Wildflowers Home Spring Summer Fall Winter Wisconsin's Door County Peninsula is a unique, … Explore the beauty of Door County Wildflowers.... Copyright © 2007 Door County Wild Flowers Last Updated on 07/02/07

18. CSS Code #contentlogo { background-color:#e8b9e8; font-size:larger; padding:10px; color:#000000; } #imagelogo { float:right; margin:0 0 5px 5px; border:solid; }.nav { padding:5px; background-color:#e8b9e8; color:#000066; text-decoration:none; font-family:Verdana, Arial, sans-serif; text-align:center; }.content { font-family:Verdana,Arial,sans-serif; margin:10px; }.footer { font-size:xx-small; text-align:center; }

19. 2-Column Version The 2-column version will embed the CSS code in the XHTML code under the tag

20. CSS Code body {margin:0; font-family:Verdana, Arial, sans-serif; } #wrapper { background-color:#e8b9e8; color:#000066; } #leftcolumn { float:left; width:100px; } #rightcolumn { margin-left:100px; background-color:#ffffff; color:#000000; } #logo { background-color:#eeeeee; color: #cc66cc; font-size:x-large; border-bottom: 1px solid #000000; padding:10px; }.content {padding:20px 20px 0 20px; } #floatright {margin:10px; float:right; }.footer {font-size:xx-small; text-align:center; clear:right; padding-bottom:20px; }.navBar{ text-decoration:none; margin: 15px; display:block; }

21. XHTML Code Home Spring Summer Fall Winter Door County Wildflowers <img src="showy.jpg" width="200" height="150" id="floatright" alt="Showy Lady Slippers" /> Wisconsin's Door County Peninsula is a unique, … A wide array of wildflowers grow in the county because of this variety of ecosystems. Explore the beauty of Door County Wildflowers.... Copyright © 2007 Door County Wild Flowers Last Updated on 07/07/07

22. Scroll Bars If you limit the size (via height or width) of a content area such that the text (and/or figures) cannot appear, you can be supplied with scroll bars – For this to work, you have to use the overflow property as in overflow: auto; other values are visible (the default), hidden, and scroll – Hidden will cause any overflow area to be pruned – Scroll will automatically insert both horizontal and vertical scroll bars (whether needed or not) – Visible will cause the overflow area to be visible and thus possibly overrun the next area – Auto will insert scroll bars as needed an example is shown below with auto (left) and with scroll (right)

23. Additional Properties Additional properties are given in this chapter but haven’t been covered yet, so they are listed here – line-height – allows text to be double spaced by using the value 200% (although you can use any % you want) – min-width – minimum width of an element – text-indent – value is in em or px or percentage and describes how far to indent the first line of a block element – text-transform – modifies text as one of capitalize, uppercase, lowercase or none – vertical-align – modifies the alignment of an inline element as one of middle, bottom, text-bottom, text-top, top, super, sub or a percentage value – visibility – one of visible, hidden, inherit to control whether an element appears on a page or not

24. CSS Debugging Tips CSS for page layout requires patience and planning – Testing is crucial – Do not attempt to make your pages look the same across all browsers and platforms but design the pages so that they look the best on the most commonly used browsers – Many pages devoted to helping you debug CSS pages (see p. 246) Debugging techniques – Manually check for syntax errors – Use W3Cs CSS validator – Try different colors to see if the color selection is what is not properly working – Use temporary borders to ensure that borders are being implemented – Use comments to ensure you are nesting elements correctly Aside from you can also use /* */ comments (similar to Java)