DHTML Lab: Dynamic Headline Fader; CSS Elements | WebReference

DHTML Lab: Dynamic Headline Fader; CSS Elements


Dynamic Headline Fader
creating the CSS elements

DHTML News Fader

Parameters used in this example:

• box width: 100;
• box height: 100;
• box color: white;

• blend interval: 5;
• blend duration: 1;
• loops: 2;

Link Text:
• text decoration: none;
• text alignment: center;
• font color: black;
• font size: 12pt;
• font weight: bold;
• font style: normal;
• font family: Arial,Geneva,sans-serif;
• line height: 14pt;

In its vanilla version, the fader is composed of two CSS-positioned elements:

  • elAll  - the container element, with a position value of relative. This allows us to place it anywhere in our page flow, without reference to positioning values.
  • elNews - the element that actually contains the headlines. This element is nested within elAll and has a position value of absolute.

This technique of nesting absolute elements within relative elements is discussed in detail in column 2, Low Bandwidth Rollovers.

Why do we insist on a nested element? Could we not simple include the headlines in elAll, dispensing with the need for a second element?

For completely different reasons, both browsers would encounter problems. Explorer hates relative elements. For all its DHTML power, this browser does not treat relative and absolute elements equally. Many important properties are denied to, or render differently in, relative elements. Navigator loves relative elements, treats them exactly like absolute ones...but doesn't update them properly with document.write. A detailed discussion of these browser behaviour quirks might be useful, but that's for another time.

Explorer CSS

For now, let's begin construction of our fader. As usual, we'll concentrate on the code for one browser first, then we'll move on to the other, before creating a cross-browser version. The browser-specific code will be optimized only if it does not complicate the creation of the cross-browser version.

Let's begin with Explorer.

Assumption: we want to create a fader 130 pixels wide by 40 pixels high, with a white background. The headline links should have the following text style characteristics:

  • no underline
  • aligned left in the fader
  • font color should be black
  • font size should be 8 points
  • font weight should be bold
  • font style should be normal (not italicised)
  • be rendered in a sans-serif font
  • the line-height (leading) should be 9 points

We need to create a class of A tags called newslink, that declares the above values.

Our stylesheet, therefore, starts off looking like this:

<STYLE TYPE="text/css">
#elAll {
    position: relative;
    width: 130;
    height: 40;
    background-color: white;
#elNews {
    position: absolute;
    width: 130;
    height: 40;
    background-color: white;
A.newslink {
    text-decoration: none;
    text-align: left;
    color: black;
    font-size: 8pt;
    font-weight: bold;
    font-style: normal;
    font-family: Arial,Geneva,sans-serif;
    /* Note: Arial preferred for Windows;
             Geneva preferred for Mac;
             any sans-serif if these not available */
    line-height: 9pt;

Page Placement

The fader can be placed anywhere in your document, including within a table, with this HTML:

. preceding page HTML
<DIV ID="elAll"><DIV ID="elNews"></DIV></DIV>
. subsequent page HTML

With the fader defined and placed in our document, we must now step back and consider what technique should be used to achieve the fade/blend transition between headlines.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Jan. 28, 1998
Revised: Feb. 03, 1998

URL: http://www.webreference.com/dhtml/column13/fadeCSS.html