mail us  |  mail this page

contact us
training  | 
tech stuff  | 

Tech Stuff - The Story so far

Vintage 2003. This page explains our first wave of revised CSS use - how and why we did it.

  1. Text Rollover Effects

  2. Pop-Up/Down Rollover Effects

  3. Tables vs Div & CSS

  4. Pure CSS Menus

Text Rollovers

The roll-overs on the left and right hand menus on this page use CSS2 definitions. They both use a site-wide class style so during our layout transition we needed to limit the scope to newly formatted pages only. CSS2 provides fantastically powerful selectors for just this purpose, so modified pages enclose the areas we want to effect in a 'div' with appropriate rules. The CSS and HTML for the left hand navigation looks like this.

<style type="text/css">
<!--
/* CSS style sheet fragment */
/* suppress effects for all A tags */
a {text-decoration:none;}
/* silver color in A tags + class="n-l-f" */
.n-l-f a {color:silver;} 
/* annoying underline feature on all A tags! */
a:hover {text-decoration:underline;} 
/* text black inside div + class="n-l" when user hovers */
div.n-l a:hover {color:black;}
//-->
</style>

<!-- HTML LEFT MENU fragment -->
<div class="n-l">
<p class="n-l-f">
<a href="">tech home</a><br>
</div>

Those of you lucky enough to have a decent browser will see that the left menu also stays in position as you scroll down the page. This is done using in 'n-l' class definition as shown below:

.n-l {
	position:fixed;
	top:60px;
	left:6px;
	}

The magic is 'position:fixed' which is a standard CSS2 extension to 'position' (not currently supported by MSIE) and which locks the element to which it is applied ('div' in this case). There are 50 line Javascript functions that do the same thing!

The right hand menus use a similar technique but with a different class name ('g-sb') applied to a 'div' so that we can apply a different effect. Use 'view source' to see all the detail.

Pop-Down, Pop-up Rollovers

The pop-downs on this page (on the top navigation bar) may be either CSS or Javascript depending on your browser but use CSS to create the rollover effect as you run down the menu. This one is a bit messier. The problem with the javascript version is we want the rollover to be applied to the whole of the table cell not just the text in the A tag. The following uses another 'newish' CSS feature (this one is supported by MSIE!!).

<style type="text/css">
<!--
/* CSS style sheet fragment */
/* see text roll over for explanation of these */
a {text-decoration:none;}
.n-l-f a {color:silver;} 
a:hover {text-decoration:underline;} 
div.n-l a:hover {color:black;}
/* POP-DOWN EFFECTS */
/* basic class attributes - nothing special */
.n-p-n {
	background:#EEE;
	color:blue;
	font-size:9pt;
	text-indent:6pt;
	}
/* forces block mode - whole width */
.n-p-n a {
	text-indent:6px;
	display:block;
	text-decoration:none;
	}
/* defines the rollover effect */
.n-p-n a:hover {background:#CCC;}
//-->
</style>

<!-- HTML POP-OUT MENU fragment -->
<table width="110" summary="" border="0" cellspacing="2" 
cellpadding="0" class="n-p-n">
<tr align="right">
<td><a href="">tech home</a></td>
</tr></table>

The technique is similar to the previous roll-overs described except for the use of 'display:block;' which causes the element to be treated as a block and in this case to cover the entire table cell block element not just the text as would normally be the case.

Tables vs Div & CSS

Like a lot of folks we started HTML writing in the early 90's by looking at web pages, buying a 900 page book (which apart from acting as a door stop proved useless after 3 days), and searching the web. Tables were the standard technique and we blindly followed since it appeared to do what we wanted. When CSS came along we adopted it but never really changed our point of view so we used it as an adjunct to our table designs. And they worked. Here was how we defined our left hand navigation table until we saw the CSS light.

<style type="text/css">
<!--
/* PRE-LIGHT BULB CSS style sheet fragment */
/* annoying underline feature on all A tags! */
a:hover {text-decoration:underline;} 
.n-l-f {
	font-family:Verdana, sans-serif;
	font-size:8pt;
	text-decoration:none;
	background:white;
	color:silver;
	margin:2px;
	}
//-->
</style>

<!-- TABLE BASED HTML LEFT MENU fragment -->
<table width="110" summary="" border="0" cellspacing="2" 
cellpadding="0" class="n-l-f">
<tr align="right">
<td><a href="">tech home</a></td>
</tr></table>

It works fine but here is what we do now to create a CSS 3 column liquid layout.

<style type="text/css">
<!--
/* POST-LIGHT BULB CSS style sheet fragment */
/* suppress effects for all A tags site-wide */
a {text-decoration:none;}
/* silver color in A tags + class="n-l-f" */
.n-l-f a {color:silver;} 
/* annoying underline feature on all A tags! */
a:hover {text-decoration:underline;} 
/* text black inside div + class="n-l" when user hovers */
div.n-l a:hover {color:black;}
.n-l {
	font-family:Verdana, sans-serif;
	position:fixed;
	top:60px;
	left:6px;
	width:110px;
	}
.n-l-f {
	font-size:8pt;
	margin:2px;
	line-height:150%;
	}
//-->
</style>

<!-- HTML LEFT MENU fragment -->
<div class="n-l">
<p class="n-l-f">
<a href="">tech home</a><br>
</div>

Big deal. So whats the difference.

The style sheet is slightly bigger but the HTML is a lot smaller and a lot more controllable. And we think we've started to separate style from content - Hey give us a break, at least we're starting to think about it.

Conclusion So are tables bad. As a page layout layout method - probably yes. For controlling content presentation within layouts they are and will continue to be indispensable. "Don't throw the baby out with the bath-water" as everyone's Granny used to say!



Problems, comments, suggestions, corrections (including broken links) or something to add? Please take the time from a busy life to 'mail us' (at top of screen), the webmaster (below) or info-support at zytrax. You will have a warm inner glow for the rest of the day.

Tech Stuff

If you are happy it's OK - but your browser is giving a less than optimal experience on our site. You could, at no charge, upgrade to a W3C standards compliant browser such as Firefox

Search

web zytrax.com

Share

share page via facebook tweet this page

Page

email us Send to a friend feature print this page Decrease font size Increase font size Display full width page

Resources

HTML Stuff

W3C HTML 4.01
HTML5 (WHATWG)
HTML4 vs HTML5
HTML5 Reference
W3C Page Validator
W3C DOCTYPE

CSS Stuff

W3C CSS2.1
W3C CSS2.2
Default Styles
CSS3 Selectors
CSS 3 Media Queries
CSS 3 Colors

DOM Stuff

W3C DOM
W3C DOM 3 Core
W3C 3 Events

Accessibility

usability.gov
W3C - WAI
Web Style Guide
WebAim.org

Useful Stuff

Peter-Paul Koch
A List Apart
Eric Meyer on CSS
glish.com

Our Stuff

Our DOM Pages
DOM Navigation
Liquid Layout
CSS Short Cuts
CSS overview
CSS One Page

Javascript Stuff

ECMA-262

Site

CSS Technology SPF Record Conformant Domain
Copyright © 1994 - 2017 ZyTrax, Inc.
All rights reserved. Legal and Privacy
site by zytrax
Hosted by super.net.sg
web-master at zytrax
Page modified: October 21 2015.