(Site Identification)

'Eye' Focus: Web Support Tutorials

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.

(to Top) Example One


CSS Version

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

Your Reviews

There are no user reviews for this item at the moment.

 

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.

Your Reviews

 
There are no user reviews for this item at the moment.

« Add your review »
 
 

(to Top) 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.

CSS Version: Black on White

Black text on white background. No HTML tables are used.

Top Item Discoverers

There are no new discoveries at this time.


View Top 50

CSS Version: White on Black

White text on black background. No HTML tables are used.

Top Item Discoverers

There are no new discoveries at this time.


View Top 50

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.

Developer's Note

This example was tested for consistent rendering on a PC using Internet Explorer, FireFox, and Opera. Proper testing should also include a Macintosh environment (using Safari, Internet Explorer, and FireFox), and with a Linux environment using 2-3 of the most popular browsers.

If the site is targeted to be compatible with other environments (such as Web-TV, Small Screen Devices [SSD], Tablet-PC, etc.) then testing in those environments should also be included in the design process.


[Updated: Sunday, November 18, 2007]