Click to print this article Cascading Style Sheets:
Creating Layouts without Tables (Part II)

by Wendy Stubley, Quill Contributor

Speaker: Char James-Tanny, President, JTF Associates, Inc. in Lynn, Massachusetts

Telephone/Web Seminar hosted by: Peter Szabo at CheckFree i-Solutions

Char James-Tanny returned for Part II of her Cascading Style Sheets seminar. In Part I, we learned about the advantages of a Cascading Style Sheet (CSS) over plain HTML. Part II covered semantics, layouts, and a new way to create navigation buttons using a CSS.

Paradigm Shift from Design to Functionality

The switch from HTML to CSS requires a shift from thinking in terms of design to considering the functionality of Web pages. Since every area on a Web page has a purpose, arrange pages for functionality. This makes it easier for users to access information and provides a clear, logical layout for each Web page. Techniques of designing for functionality include: positioning the page header at the top, keeping the navigation on the left side of each page, and devoting the bottom of each page to contact information.

Think "Purpose" During CSS Authoring

The functionality paradigm of CSS carries through from page layout down to the level of code writing. In CSS authoring, the name of each element must reflect its purpose. Some examples of purpose-oriented semantic authoring include:

  • cite for citations
  • code for sections of computer code
  • em for emphasis (a screen reader places emphasis on these words when they are read aloud)

Element labels that don't describe a purpose include:

  • top shows placement, not purpose
  • red defines the look of an element, but not its use
  • italic describes font, but doesn't show purpose

Change From Tables to Blocks

To organize information, a CSS uses blocks instead of tables. Blocks are collections of related information that can be positioned anywhere on a Web page. A block might be a set of navigation buttons, a header with contact information, or even a paragraph in the body of the text. Blocks are discrete units so that you can change the formatting within a block to override the formatting on the rest of the page. You can also place blocks within blocks, so the interior block is positioned in relation to the exterior block. Using blocks gives you control over how your page is displayed in different browsers. Here are some different ways to position blocks on a page:

  • Absolute Positioning gives you full control of the position of the block. The block stays in a specific place on the screen and is outside the normal flow of the document. Blocks that are positioned this way do not resize to fit the browser and may overlap on a small viewer.
  • Relative Positioning defines block size as a percent of screen size. Blocks are contained within the normal flow of the document and change size when the size of the viewer changes.
  • Static Positioning is the default that a block assumes if there are no other positioning instructions. The Web designer has no control over the block position.
  • Fixed Positioning keeps the block on the screen, even when other blocks flow over it. Background pages are sometimes created from fixed-position blocks. This type of positioning is not widely used because it requires a hack to work properly in Internet Explorer.

Ms. James-Tanny showed us some Web page examples of two column layouts in which one or both of the columns were positioned using relative positioning. The pages resized beautifully and could accommodate different viewer sizes. As a rule of thumb, Ms. James-Tanny tries to manipulate the positioning of blocks so that all of her web pages are scrollbar-free at 800 x 600 resolution.

Using the <li> (list) Tag in a New Way

In CSS, you can use lists to create custom buttons and navigation on your Web pages. A block that contains a list can easily be formatted to look like a column of coloured buttons that are links and that even respond to mouse rollovers. Extra space can be added between the list elements to position the buttons attractively. Because they are a block, the group of buttons can be anchored to the side of the Web page.

At the end of her seminar, Ms. James-Tanny supplied us with lists of Web sites and books to help us learn more about the tools, tips, and techniques of creating Web sites using a CSS (as follows). She also told us that her favourite CSS editor is TopStyle and that two great CSS Web design authors are Jeffrey Zeldman and Eric Meyer.

Resources from Char James-Tanny's Seminar Slides

Tools:

A List Apart

Books:

Structured Authoring:

Future Reading:

CSS and HTML Validation - http://www.w3.org

  • Collapsible margins
  • Various hacks
  • Z-order (stacking)
  • CSS "shortcuts" border: lpx solid #000
  • Background graphics on body

Wendy Stubley

About Wendy Stubley

Wendy is a freelance technical writer and a senior member of the STC. She lives in Waterloo with her husband and two children. In her spare time, Wendy enjoys sculpting, photography, and hiking.
 

In this issue:

Contents | President's Message | Upcoming Events | Management SIG | England | Documentation Tips | Student Definition | Benefits to Students | STC Scholarships | Our Job Bank | STC Job Bank |October General Meeting | Council Meeting | Cascading Style Sheets | Member Introduction | Framemaker Question | Book Review