« Home | Full List of Free Blog Directories » | List of Blog Websites to Ping [Auto Ping List] » | What is Google PageRank (PR)? » | List of Free Article Directories » | How to design your website for optimal productivit... » | Website Design vs. Function » | Search Engine Optimization (SEO) 101 : Basic Optim... » | Eight Simple Steps For Enhancing Your Website » | Your Web Site's First Impression Happens Only Once... » | Dassnagar : Web Design Company India & Ecommerce W... »

Web Page Reconstruction with CSS

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 XHTML 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.

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:

  • Header
  • Site Navigation
  • Left Column - "Issue Navigation"
  • Right Column - "Content"
  • Footer

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

Move Ahead

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

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:

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;
}
Copyright © 1994-2006 Digital Web Magazine. All Rights Reserved.

Blog's RSS Feed

Add to Google
Subscribe to del.icio.us
Add to My Yahoo!
Add to Technorati Favorites!
Web Design India Feed
Subscribe with Bloglines
Subscribe in NewsGator Online
Add to My AOL
Add One Million Subscribers to Newsburst from CNET News.com

Subscribe with Pluck RSS reader
Simpify!


Find Blogs in the Blog
Directory