Embed Size (px)
Citation preview
Web Page Layout With CSS
CSS Level 2 vs. Nested Tables
Mike Wallick – 11/3/04
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.
Pros/Cons of Nested Table Layout
• 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 CSS2• 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.
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; }
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; }
Taming <ul>’s
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 »</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; }
<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%"> </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> Latest News</td> </tr> <tr> <td colspan="3"><!-– CONTENT INSIDE THE ROUNDED BOX GOES HERE --></td> </tr> <tr> <td width="15"> </td> <td class="small" align="right"><a href="">More »</a></td> <td width="15"> </td> </tr> <tr valign="top"> <td width="15"> </td> <td class="small"><a href="">Add an Article</a> - <a href="">Edit/Delete</a></td> <td width="15"> </td> </tr> <tr> <td width="15"><img src="images/bl" width="15" height="15" border="0" /></td> <td> </td> <td width="15" align="right"><img src="images/br" width="15" height="15" border="0" /></td> </tr></table>
Rounded corners with nested tables are a bit more difficult.
Rounded Corners
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>.
Hacks/Workarounds/BugsAgain, in Internet Explorer, there is a weird margin bug. Notice the white spacenext 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 10x10pixels.
.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="">» 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>
Odd 10px margin
-10px margin applied
Pros/Cons of this Layout
• 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.
CSS ResourcesBelow is a list of web sites that I found immensely useful indesigning 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.
Additional Resources
• Charlie Kroger added these helpful links:
• http://alistapart.com/topics/css/
• http://www.zeldman.com/dwws/
