'Eye' Focus: Web Support Tutorials

'Eye' Focus Home

Ancestral Soldiers of Honor (ASH)

Photo Albums

My Yahoo! Comics

Windows XP Essentials

Advanced CSS: Framed Block

The framed block example below is generated entirely from Cascading Style Sheets, no HTML table is used for the presentation. There is several advantages in presenting content such as this in the manner shown here.

• The design can be updated, or replaced, quickly and easily without modifying the content or code of the document, only the CSS needs changed.
• The design is a freeform and able to fit any length of content, separating content and design.
• The content is easily rendered correctly with small screen devices which generally throw away TABLE, Background, and Style Sheet information. (Test this with Opera by pressing [Shift+F11].)
• The resulting code is more compact than conventional methods, resulting in smaller downloads and faster rendering of the content.
• Generating the presentation entirely with CSS allows for user selectable designs. Design selections can be accomplished via user accounts (for access controlled areas) or with cookies (for general purpose sites).

Example One

CSS Version

The CSS version makes only 8 image references, none of which are repeat uses.

Original TABLE Version

This particular example comes from the GamePlay web site. Below is the code used in that site to present the same content.

The author's original uses 14 referenced images (using 9 different images). Plus, the author also uses style sheet information, and uses invalid HTML coding.

Note: The author's code has been shortened a bit and some code problems were corrected here for the purpose of ensuring that the code would work properly from this example page.

Example Two

In this second example some complexity is added to the design. The title overlaps the frame at the top, and a button overlaps the bottom. The colors and background remain the same in the box while allowing it to change outside the frame.

Result of Coding Changes

The key difference between the CSS and TABLE versions is that the CSS version is fully adjustable and accessible. The author's original version uses a fixed font sizes, images, and inline content that is missing proper accessibility identifiers. The original even mis-uses HTML tags, inappropriately labeling the content.

Though the amount of code may seem to be about the same, remember that the CSS code is loaded once, cached by the browser, and re-used for every page of the site. The code of the original method must be downloaded for each and every box, even multiple times per page as the site can use the same box design repeatedly per page.