DHTML Lab: Dynamic Headline Fader; CSS Elements

Dynamic Headline Fader
creating the CSS elements

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;
}
-->
</STYLE>

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.