Digital Web Magazine

The web professional's online magazine of choice.

Web Page Reconstruction with CSS

Got something to say?

Share your comments on this topic with other web professionals

In: Articles

By Christopher Schmitt

Published on July 2, 2002

Before After

CSS and well-structured documents are a combination that can't be beat. This tutorial looks at how to transform a Web page using traditional Web design methods into a CSS-based site. In fact, the example will be drawn from a Digital Web content page modeled after those pages covering reviews, interviews and tutorials—tutorials that are amazingly like this one.

This isn't the first attempt in this space to try to recreate a Web page using CSS. J. David Eisenberg tried to re-do a Yahoo! weather page in his article titled Converting a Page to CSS. While his attempt was not a complete success, he totally transformed the page's structure and style using contemporary CSS methods. As David says, "anything worth doing is worth doing again."

The goal of transferring the page to a CSS layout is to get rid of any HTML that's used for presentational purposes in order to achieve the layout. As it is now, the Digital Web layout uses HTML tables for layout purposes and spacer GIFs for spacing and positioning of elements on the Web page. We will be using CSS to replace the JavaScript in the JavaScript rollovers on this page.

Check it Out

Look at the layout of the page. You'll see that a Digital Web page layout has a header, two columns, and a footer. In the header is the logo and tagline for Digital Web, as well as some site navigation including a link to the search and sitemap pages. Then, there are two columns. The right, thinner column is where the links for the current issue's material rests. Also in the right column are the sponsorship and advertising links as well as a subscription link for the Digital Web newsletter. The left column contains the content against a white background. In this column rests the tutorial header, content for the page followed by the author's bio, and then three participation links. After that, it's the footer with the usual copyright notice, a link to the top and a standard ad banner.

The first goal in making this page is to focus on the major browsers. This demo is geared towards the recent versions of Netscape, Mozilla and Internet Explorer. Netscape 4 has had a nice life, but I won't be building this demo to work in that browser.

Strip it Down

To achieve that goal, the first step in converting a site from more conventional web design methods is to strip out the content out of the HTML tables, delete the spacer GIFs and start with a clean slate (see Figure 1). By making a clean break from the past working methods, you cut out any potential problems that could throw a monkey wrench into the new CSS-based design.

screen grab of clean barebones HTML sample

This stripping down allows you to strategically plan the CSS layout styles. While it's a good idea to plan ahead, most of the time that's simply not possible. In order to meet deadlines, planning time gets cut, or a site simply evolves past its original design. The content of the site is then forced into a layout that goes against contemporary practices. Hopefully with this "CSS revolution," web builders will be able to go back through their sites and actually rebuild and not just redesign their sites to manage any new modifications that have been made since their initial build. But, I digress.

Divide the Page Sections

After stripping the page down to its bare bones, you'll want to divide the page into sections. As you saw when first examining the layout, there are basic divisions already in the page: Header, columns, and footer. You will build off of these divisions, creating a structure that associates specific CSS rules to those sections.

The actual divisions for a Digital Web Magazine page are:

So, the initial HTML markup will have these building blocks:

<div id="header">...
</div>
<div id="navsite">...
</div>
<div id="navish">...
</div>
<div id="content">...
</div>
<div id="footer">...
</div>

Move Ahead

Before stylizing the header, generate the HTML markup for it:

<div id="header">
  <h1>
     <a href="/" 
      title="Digital Web Magazine, homepage">
       Digital Web Magazine</a>
   </h1>
   <p class="slogan">
     The Web designer's online magazine of choice.
  </p>
</div>

Now, mark out the background and type colors with the simple CSS rule that follows. This rule creates the thin black line that separates it from the five top links, which you'll get to later.

#header {
  background-color: #000;
  color: #000;
  border-bottom: 1px solid #000;
}

Now, bring in the logo and add the tagline for Digital Web in the upper right-hand side. I chose a rather unorthodox approach when dealing with the header. As you can see in the markup, I am using text and not the graphic of the Digital Web logo. The logo is actually brought in through the background of the H1 element like so:

#header h1 a {
  background-image: url("images/header.gif");
  background-repeat: no-repeat;
  display: block;
  height: 85px;
  font-size: 0!important;
  text-align: right;
  float: left;
  width: 350px !important;
}

For H1, set the size of the font to zero. It doesn't matter which unit you use--zero horseshoes is the same as zero pixels, ems, or percentages. How browsers render this varies--some browsers may choose to disregard such an outlandish request and just present the text as being small or barely legible. On the other hand, browsers might actually not display the text at all—like I would hope. Either way, the text is also black and aligned to the right meaning that it will blend into the black background. No one should be the wiser that there's actually text there. So, don't tell anyone.

Now why do this? Well, in case the powers that be here at Digital Web use this method so they can build a separate style sheet for each content section. Each style sheet would carry the color theme and appropriately colored graphics (such as the purple logo on the purple page used in the tutorial pages). So, the actual style of the logo wouldn't be hard coded as an image into the HTML file of each tutorial page. Rather, it's in a "purple.css" or "tutorial.css" that's linked in the head of each section document. So, if there's ever a re-design that requires a new header image, it's a simple matter of editing one line in a given section file rather than updating many HTML files.

Floating the logo to the left allows the slogan for Digital Web to be pushed up to the top of the viewport. And if you align the text to the right, the slogan ends up exactly where it needs to be. Throw in a couple font styling rules and you're in business:

#header .slogan {
  margin: 0;
  padding: 0;
  text-align: right;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

After styling the title of the magazine and the slogan, you reach the first navigation links. In plain markup without any styles applied to them, you can see they are just an unordered list of links:

<div id="navsite">
    <p class="no">
      Site Navigation
    </p>
    <ul>
      <li>
        <a href="/" 
         id="home">
          Home</a>
      </li>
      <li class="nowrap">
        <a href="/search.shtml"
         id="search">
          Search</a>
      </li>
      <li>
        <a href="/sitemap.shtml" id="sitemap">
          Sitemap</a>
      </li>
      <li>
        <a href="/contact.shtml" id="contact">
          Contact</a>
      </li>
      <li>
        <a href="/about.shtml" id="about">
          About</a>
      </li>
    </ul>
  </div>

Putting the links into a list just makes sense: they are a set of unordered items. However, they also display vertically whereas the Digital Web layout has them laid out horizontally. To achieve that effect, you'll reach for the float property in the list item CSS rule:

  #navsite ul li  {
    margin: 0 3% 0 0;
    font-size: 12px;
    width: 10%;  
    float: left;    
  }  

Raise the Columns

Now, you'll style the columns. You'll want to put the navigation links for the current issue to the right. The original layout uses 125 pixels for this column. However, for this contemporary method precise measurements aren't always the best choice. So, I'd use percentages. In this case, the width of the right-hand column is 15% of the browser's viewport width.

#navish {
   background-color: #000;
   position: absolute;
   left: 85%;
   width: 15%;
   z-index: 3;
   color: #000;
   font-size: 12px;
   padding: 0;
 }

You can now shrink the content portion of the page by 15%. Do this by manipulating the right side of the margin to a width of 15%:

#content  {  
    margin: 0 15% 0 0;
    padding: 0 0 5% 0;
    color: #000;
    background-color: #fff;
  }

For more information on how to make column layouts, check out these resources:

Rollover, Rollover

Ever since JavaScript allowed developers to include manipulate images, rollovers have become standard fare for web sites. So, I would be remiss to not include a couple of ways to perform these rollovers in this tutorial.

CSS Rollover Method 1

Below the Digital Web logo rests a set of five links. Rollovers aren't in the original layout, but I always thought that they could be there. So, I created a set of "on" images for each link. This rollover method uses the background-image property and hover pseudo-class to power the rollover.

Here's an on and off state images for the rollover:

navigation global home rollover off state navigation global home rollover on state

To see how this rollover method is accomplished, take a look at the HTML for one of the anchors:

<div id="navsite">
  <ul>
    <li>
      <a href="/"
      id="home">
       Home
     </a>
   </li>
</div>

Take a look at the CSS rules that make the rollover possible:

#navsite ul li a {
  padding: 0 0 0 20px;
  height: 20px;
  color: #fff;
  display: block;
}
#navsite ul li a#home {
  background-image: 
    url("images/nav_global_home.gif");
  background-repeat: no-repeat;
}
#navsite ul li a#home:hover {
  background-image: 
    url("images/nav_global_home_over.gif");
  background-repeat: no-repeat;
  text-decoration: underline;
}

The first CSS rule puts in enough padding (twenty pixels) to allow the rollover images to show with creating an overlap effect with the text of the link. The second rule is for the off or default rollover state. In the other CSS rule, the hover state sets the rollover into motion by swapping default rollover image with the "on" image in the background.

CSS Rollover Method 2

In the original layout, rollovers are used in the left-hand column. In the new page layout, I created a new GIF—a white box with a transparent center (see image below). After placing the image in the anchor of each of the eleven options, I then put in a declaration block to have a background color show through the image.

navigation box

Here's an excerpt from the HTML listing:

<div id="navish">
  <h2>
    Inside this Issue
  </h2>
  <h3>
    Daily
  </h3>
  <ul>
    <li>
      <a href="/new/" 
     id="whatsnew"> 
      <img src="images-after/nav_box.gif" 
         alt="" width="14" height="14" 
         hspace="0" vspace="0" 
         border="0" />What's New</a>
     </li>
  </ul>
</div>

And here's the CSS rule that allows the rule to occur:

#navish ul li a#whatsnew:hover img {
  background-color: #c60;
}

By using one image and some CSS rules, I was able to get rid of eleven "on" box images and eliminate the JavaScript that allowed the rollovers to occur. While getting rid of the images may not provide huge reductions in the overall weight of the Web document, it does reduce the number of hits to the server quite a bit.

For more information about to create rollovers through CSS, check out Eric Meyer's article Roll Over, Rollovers—CSS Style.

Dig the Results

Here's a comparison between an HTML method and a CSS method for tackling a Digital Web revamp. Table 1 compares HTML file sizes, CSS file sizes, the number of HTML tables, number of spacer GIFs, and number of images. The number of GIFs refers to all images used in the documents, including images called from the style sheet.

20k 1.8k 8 35 56
12k 7.6k 0 0 25

For a look at the final version, click here and click here for the HTML-based example that was used in the comparison.

It's a Wrap

Contemporary CSS methods do win a victory in a head-to-head match based on file sizes. But more importantly, using CSS for pure presentation allows the removal of all spacer GIFs, HTML tables, and a total of 31 images! The benefits of dropping those methods are sizable savings by themselves. Couple these savings with the added bonus of valid markup that will work in standards compliant Web devices, and it's very clear that CSS is the way to go.

Got something to say?

Share your comments  with other professionals (2 comments)

Related Topics: CSS, Redesign

 

Christopher Schmitt is a owner of the Heatvision.com, Inc., a new media design and publishing firm. He's the list mom for the Web design and development mailing list, Babble. Christopher's personal site is at http://christopher.org/.

Media Temple

via Ad Packs