back

How one person developed the Edge
using CSS

by Jenny Mok

When we redesigned the Edge, we not only gave it a fresh look, but we made it easier to use. From the inside out, we developed a framework that makes the newsletter more flexible to build, design, edit, and view. To achieve this, we used Cascading Style Sheets (CSS), which enables us to separate design from content. Creating the CSS layout required some serious forethought because one of the requirements was to create one Dreamweaver template that all pages would be based on. This is how I approached and built the Edge using CSS.

Page layout

Once I received the approved page designs from the art director, I began planning. I knew right away we would need to accommodate three unique page layouts: the main page, the article page, and the video page.

The main page requires multiple content containers to display a thumbnail for each article (see Figure 1).

main page

Figure 1: Screenshot of the main page

The article page uses a dog-eared page metaphor in the background and requires that text on the left side use about 75% of the page width and wrap seamlessly around text and graphics on the right side of the page (see Figure 2).

article page

Figure 2: Screenshot of the article page

The video page is narrower than the main page and does not require thumbnails (see Figure 3).

video page

Figure 3: Screenshot of the video page

Defining the three different page layouts made it easier to build a simple HTML structure for each content section. Most sites contain three main elements: navigation, content section, and footer. With this in mind, we created three distinct containers in the template:

<div id="globalnav">
</div>
		
<div id="layout">
</div>
		
<div id="footer">
</div>

Setting up the template this way enables us to change the class of a layout container to add or subtract the page metaphor and add extra content containers on the main page.

Basic layout page

Below you'll see the HTML for the basic layout. We use this layout for pages that do not contain white background tiling (home page, help sections, and search pages):
<div id="layout" class="">	
Content here
</div>

Article page

The HTML for the article page layout looks like this:

<div id="layout" class="with-dogear">
	<img id="dogear-link" alt="" src="/images/shared/pixel.gif"
	usemap="#dogear" width="50" height="50" />
	<map name="dogear" id="dogear">
	<area id="dogear-link-map" alt="back" rel="dogear-link"
	href="/inspire-archive/july2006/" shape="poly"
	coords="0,50,50,50,50,0" />
	</map>
	<div id="pageLayout">
		Content here
	</div>
</div>

Article pages have a background image at the top (see Figure 4) that renders the dog-ear background image.

dogear image

Figure 4: Dog-ear background image

This image is positioned relatively:

layout.with-dogear {
	top: 24px;
	background: transparent url(/images/template/article_dogear.gif)
	top left no-repeat;
}

The dog-ear image links back to the main newsletter page, but only the black tab with the arrow is linked. Therefore, we used an image map over that part of the background image with a 50 x 50 pixel transparent GIF. The image map it links to has a triangular link:

shape="poly" coord="0,50,50,50,50,0"

Video page

The HTML for the video page layout looks like this:

<div id="layout" class="">	
<div id="videoPage">
	CONTENT HERE
</div>
</div>

By setting up a generic layout section in the template and then defining the class and sub-IDs underneath it for each page type using CSS, it is now much easier to manipulate the page layouts.

Content layout

The content on the main page worked well in a column layout. So we divided the page into two columns, which can contain nested columns within a column.

Main page

First, I defined the width, height, and position of the main layout container:

#layout {
	width: 902px;
	margin: 37px auto 100px;
	clear: both;
/*\*/
	top: 38px;
/**/
	position: relative;
	background: none;
	min-height: 450px;
	height: auto !important;
	height: 450px;
}

The columns within the layout container have generic names: columns-2-AB-A and columns-2-AB-B. This naming convention simply indicates that there are two columns. The A and B indicate that they have the same width. The column width and float styling are defined within the CSS:

div.columns-2-AB-A,
div.columns-2-AB-B {
	width: 437px;
	float: left;
}

div.columns-2-AB-B {
	float: right;
}

Nested columns are defined as well:

/*--- nested columns ---*/
div.columns-2-AB-A div.columns-2-AB-A,
div.columns-2-AB-A div.columns-2-AB-B,
div.columns-2-AB-B div.columns-2-AB-A,
div.columns-2-AB-B div.columns-2-AB-B {
width: 205px;
}

Article page

The article page provided a different challenge because not only was the content within two columns, but the content on the left side spanned about 75% of the actual page width and wrapped around images and other content on the right side of the page. Instead of laying out the content in two columns, I created a rightContent class (which requires different definitions for Gecko-based browsers and Internet Explorer).

Here I relatively positioned the rightContent div and floated it right. Since the content area was limited to the desired width of the text content, I defined a negative right margin so that any images or content in the right "column" would be flushed to the width of the page background:

/*--- right side content (pullout rights) ---*/
.rightContent  {
	position: relative;
	float: right;
	clear: right;
	width: 392px;
	margin: -7px -185px 0px 30px;
	padding: 7px 0 8px;
}
/* For IE6 \*/
* html .rightContent {
	margin-top: -5px;
	margin-right: -92px;
	width: 391px;
}
/**/

This method eliminated the need to contain text within a left-floated div. It could then wrap smoothly around the rightContent elements.

Images larger than 625 pixels are contained within a fullwidth div. The fullwidth class clears any floats above it and is positioned relatively. In Internet Explorer 6, the fullwidth class is given a negative margin so that it is centered properly:

/*--- images or swfs larger than 625px ---*/

.fullwidth {
	clear: both;
	margin-top: 30px;
	margin-bottom: 46px;
	position: relative;
	min-width: 815px;
}

/* all content within "fullwidth" are centered (except in Mac IE) \*/
.fullwidth * {
	text-align: center;
	margin: 0 auto;
}
/**/

* html .fullwidth {
	margin-right: -190px !important;
}

Background tiling

The background image for the site is a patterned gradient. From the initial mockup, I cut out a portion of it and created a 2000-pixel-wide image that can be repeated vertically:

body {
	background-image:
	url(/inspire-archive/images/template/background_page.gif);
	background-position: top center;
	padding: 0;
	margin: 0;
}

PNG headers

transparent image

Figure 5: PNG header with transparency

The logo and header images have drop shadows and transparencies around the edges. Displaying them as JPEG files causes the original image to lose its transparency, and GIF files degrade the smoothness of the drop shadow. PNG was the best format to preserve transparency and quality (see Figure 5). Unfortunately, the two major browsers, Firefox and Internet Explorer 6 (IE6), display PNG transparency differently. This required some CSS hacks so the images would appear consistently in both browsers.

non transparent image

Figure 6: PNG header without transparency

Gecko-based browsers, such as Firefox, render transparencies in PNGs correctly but Internet Explorer 6, and earlier, by default, will not display the transparency (see Figure 6).

So I styled H1 headers and the Adobe logo with background images in them. But for IE, I turned the background images off and used IE's proprietary filter method. Gecko browsers get this code:

/* for mozilla/gecko browsers */
.featuredVideo {
    width: 145px; height:27px;
	background-image:
	url(/inspire-archive/images/headers/featured_video.png);
}

IE gets this code:

/* for ie6 */
* html h1 {
	background: none !important;
}
* html h1.featuredVideo {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/inspire-archive/images/headers/featured_video.png',sizingMethod='scale');
}

For accessibility, the actual text of the image is placed inside the H1 header tags. In the CSS, it has a –9999 pixel indent so it doesn't show up on the screen. Screen readers can read the text inside the H1 tag. Mike Rundle developed this image-replacement technique to provide visible information to the browser that is hidden from the user.

CSS

.articlesThisIssue {
	margin-left: -2px;
	margin-bottom: 16px;
	text-indent: -9999px;
	font-size: 16px;
}

HTML

<h1 class="articlesThisIssue">In this issue</h1>

Better template, better workflow

By implementing CSS and changing certain template properties, we can now add or remove IDs and classes in parent HTML containers, which makes it easy to update the HTML structure of the pages without altering its content.

The new template also provides a more flexible publishing environment, so we have better control over content, design, and multimedia elements. More importantly, it offers a better user experience for subscribers. We hope you enjoy the Edge newsletter!


Jenny Mok is a web developer for Adobe and, prior to the acquisition, served as a consultant to the Macromedia web team. Jenny specializes in CSS, JavaScript, and back-end technologies. When she's not geeking out, she rides and shows horses, and often hides in coffee shops.