Web Page Layout With CSS

1. Web Page Layout With CSS CSS Level 2 vs. Nested Tables Mike Wallick – 11/3/04

2. What is CSS? • CSS stands for Cascading Style Sheets. Most common use is to remove <font> tags from HTML pages. This is also know as CSS level 1.Example: highlighting a block of text:.highlighted { background: rgb(255,255,0); font-weight: bold; } • CSS level 2, also known as CSS-P (positioning), uses style sheets to control a page’s layout, much like the traditional nested table approach.

3. Every mainstream web browser that I’m aware of supports tables. Simple table layouts are easy to learn and implement if you already understand HTML. Finding templates for traditional page layouts (header/footer with three columns in between) are relatively easy. Complex nested tables are error-prone due to the large amount of HTML code that must be used. Tracking down bugs in nested table layouts can be very difficult. For example, if you do have a bug in your table layout, some browsers will render the page correctly. The size of the HTML the client must download can get very large. HTML is not cached, at least not in the way images or style sheets are Large, complex nested table designs take longer for the browser to render. Pros/Cons of Nested Table Layout

4. The HTML the client is required to download is smaller, improving page load times. Style sheets are downloaded once and cached like images and JavaScript files. You can truly separate presentation from content. The entire look of your site can be changed by applying a different style sheet (think, cell phone browser, text-only browser, screen reader applications). Site maintenance becomes much easier, as the HTML is much less complex and easier to debug. There are less “hacks” to code when considering compatibility for multiple browsers. Complex style sheets can get very large, somewhat offsetting the reduced HTML file size. There are several browsers that support CSS2, some better than others, but not every browser does. CSS2 is harder to learn than straight HTML. Pros/Cons of CSS2

5. Float: Taming <ul>’s • The CSS2 float element is used, this case, to style simple unordered (<ul>) lists. The sitenav <div> is an example, using float:left to make the list elements lay out horizontally:<div id="sitenavback" class="bgcolor3"> <div id="sitenav"> <ul> <li class="bgcolor3"><a class="sitenav" href="tools/”>TOOLS</a></li> <li class="bgcolor3"><a class="sitenav" href="help/">HELP</a></li> <li class="bgcolor3"><a class="sitenav“ href="departments/">DEPARTMENTS</a></li> <li class="bgcolor3"><a class="sitenav" href="locations/”>LOCATIONS</a></li> <li class="bgcolor3"><a class="sitenav" href="websites/">WEB SITES</a></li> <li class="bgcolor3"><a class="sitenav" href="products/">PRODUCTS</a></li> </ul> </div></div>The corresponding CSS2 rules looks like this:div#sitenavback {min-width:800px; width:100%; border-top:1px solid black; border-bottom:1px solid black;}div#sitenav { margin: 0px; padding: 0px; width: 800px; height: 16px; }div#sitenav ul { margin: 0px; padding: 0px; list-style: none outside; }div#sitenav ul li { float: left; text-align: center; }div#sitenav ul li a { display: block; width: 105px; height: 16px; }

6. Taming <ul>’s Here’s the <ul> with no styles applied Here’s the same code with the styles applied <div id="sitenavback" class="bgcolor3"> <div id="sitenav"> <ul> <li class="bgcolor3"><a class="sitenav" href="tools/”>TOOLS</a></li> <li class="bgcolor3"><a class="sitenav" href="help/">HELP</a></li> <li class="bgcolor3"><a class="sitenav“ href="departments/">DEPARTMENTS</a></li> <li class="bgcolor3"><a class="sitenav" href="locations/”>LOCATIONS</a></li> <li class="bgcolor3"><a class="sitenav" href="websites/">WEB SITES</a></li> <li class="bgcolor3"><a class="sitenav" href="products/">PRODUCTS</a></li> </ul> </div></div> div#sitenavback {min-width:800px; width:100%; border-top:1px solid black; border-bottom:1px solid black;}div#sitenav { margin: 0px; padding: 0px; width: 800px; height: 16px; }div#sitenav ul { margin: 0px; padding: 0px; list-style: none outside; }div#sitenav ul li { float: left; text-align: center; }div#sitenav ul li a { display: block; width: 105px; height: 16px; }

7. Rounded Corners Rounded corners are a bit easier using CSS2. <div class="roundcontent"> <div class="roundtop"><img src="images/tl" class="corner" style="width:15px; height:15px; display:none;" /></div> <p class="title" style="margin:0px 5px;">Latest News </p> <ul class="boxedlinks"> <li class="boxedlinks"><a href="">New Corporate Travel Section</a></li> <li class="boxedlinks"><a href="">Netscape Navigator Version 4 is No Longer Supported on the Intranet</a></li> <li class="boxedlinks"><a href="">New Homeland Security Content on the Corporate Internet Web Page</a></li> <li class="boxedlinks"><a href="">NEW Intranet Features!</a></li> </ul> <p class="small" style="text-align:right; margin:0px 5px;"><a href="">More Articles &#187;</a></p> <p class="small" style="margin:0px 5px;"><a href="">Add an item</a> - <a href="">Edit/Delete</a></p> <div class="roundbottom"><img src="images/bl" class="corner" style="width:15px; height:15px; display:none;"/></div> </div> div.roundcontent { background: rgb(229,229,229); } div.roundtop { background: url("images/tr") no-repeat top right; height: 15px; } div.roundbottom { background: url("images/br") no-repeat bottom right; height: 15px; } img.corner { width: 15px; height: 15px; display: block ! important; }

8. Rounded Corners Rounded corners with nested tables are a bit more difficult. <table border="0" cellpadding="0" cellspacing="0" width="200" class="bgcolor4"> <tr> <td width="15"><img src="images/tl" width="15" height="15" border="0" /></td> <td width="100%">&nbsp;</td> <td width="15" align="right"><img src="images/tr" width="15" height="15" border="0" /></td> </tr> <tr> <td colspan="3" class="title" nowrap>&nbsp;Latest News</td> </tr> <tr> <td colspan="3"><!-– CONTENT INSIDE THE ROUNDED BOX GOES HERE --></td> </tr> <tr> <td width="15">&nbsp;</td> <td class="small" align="right"><a href="">More &#187;</a></td> <td width="15">&nbsp;</td> </tr> <tr valign="top"> <td width="15">&nbsp;</td> <td class="small"><a href="">Add an Article</a> - <a href="">Edit/Delete</a></td> <td width="15">&nbsp;</td> </tr> <tr> <td width="15"><img src="images/bl" width="15" height="15" border="0" /></td> <td>&nbsp;</td> <td width="15" align="right"><img src="images/br" width="15" height="15" border="0" /></td> </tr> </table>

9. Hacks/Workarounds/Bugs • One advantage of CSS layouts over tabular layouts is the fact that there are less bugs/hacks/workarounds that you need to consider/deal with. • Most notably, there is the Internet Explorer 3 pixel padding bug Top left Bottom right This is very easy to overcome using a very simple CSS rule: /* centercontent is the id of the <div> where * the 3px padding occurs */ #centercontent { height: 50%; } Simply specify a height for the problem <div>.

10. Hacks/Workarounds/Bugs Odd 10px margin Again, in Internet Explorer, there is a weird margin bug. Notice the white space next to the rounded corners. This only happens in IE, and again, the fix is very simple. Apply a negative 10 pixel margin, because the rounded gifs are 10x10 pixels. -10px margin applied .menu_curve_left { /* margin: top right bottom left; */ margin: 0px -10px 0px 0px; } .menu_curve_right { margin: 0px 0px 0px -10px; } <div id="topmenu2" class="submenu"> <!-- other submenu links go here --> <p class="submenu"><a class="submenu" href="">&#187; Tool Set</a></p> <div class="menu_curves"> <div class="menu_curve_left"> <img class="menu_curve_left" src="images/bottom_left" style="width:10px; height:10px;" alt="" /> </div> <div class="menu_curve_right"> <img class="menu_curve_right" src="images/bottom_right" style="width:10px; height:10px;" alt="" /> </div> <div class="menu_curve_center"> <img class="menu_curve_center" src="images/dotclear" style="width:10px; height:10px;" alt="" /> </div> </div> </div> <div id="closer2" class="closer" onmouseover="P7_autoLayers(0);"></div>

11. Content is fairly separated from presentation The file size of the HTML has been reduced by about 20% (14KB to 11KB) The extra data the client is required to download are delivered in a cacheable format. Getting everything to line up “pixel perfect” was relatively easy. The layout grows and shrinks with the browser window. The layout works at 800x600. The additional style sheets add an additional 6KB of files to download. The overall download size for the HTML and stylesheets was a net increase to 17KB. The minimum screen resolution is for the layout to work “perfectly” is 1024x768 pixels. Since IE doesn’t seem to support the overflow:hide property, a Javascript workaround must be used for the center <div> to allow the site to degrade to 800x600. Pros/Cons of this Layout

12. CSS Resources Below is a list of web sites that I found immensely useful in designing this layout. • The W3C online resources reference: http://www.w3.org/Style/CSS/learning#onlineThis is where I started and is where I discovered most of the sites below. • css-discuss Wiki's rounded corner page: http://css-discuss.incutio.com/?page=RoundedCorners • Not very practical, but the CSS Destroy (http://www.literarymoose.info/=/css.xhtml) has some pretty neat examples of CSS use/abuse. • CSS Zen Garden (http://www.csszengarden.com/) shows just how powerful style sheets can be. • This is the very first article that I read and started to work from: http://www.digital-web.com/articles/web_page_reconstruction_with_css/. It talks about taking an existing tabular site and converting it to CSS level 2. • An allegedly complete CSS2 reference site (I haven’t read the whole thing): http://zvon.org/xxl/CSS2Reference/Output/ • A great CSS1 reference site with a little CSS2 thrown in (float, clear, etc.): http://www.htmlhelp.com/reference/css/. I use this one frequently. • http://www.positioniseverything.net/ - Probably the best resource I’ve found for explaining CSS-specific browser bugs and how to overcome them.

13. Additional Resources • Charlie Kroger added these helpful links: • http://alistapart.com/topics/css/ • http://www.zeldman.com/dwws/