Minggu, 04 Januari 2009

Designing a CSS based template - part V

In this part of the tutorial we will be implementing our navigation on the left.

But first things first. When creating webpages we always have to make them as accessible as possible. If you read the comments on part part IV, you'll notice that someone mentioned it would be better to use a h1-element for the main header since this is more semantic code and it makes a site more accessible to search engines as well as people with no CSS. This is of course too important to overlook, so I've altered our code this way.

The image replacement technique

This technique is actually called the image replacement technique. It means that we use text in our HTML code instead of the actual image. The header image will show in browsers that support the CSS (as a background image "background: url(images/header.jpg)") and the text will be invisible (because of the "text-indent: -9999px"), since our CSS code places the text outside our viewing area. In older browsers or in screen readers (used by blind people) you'll see the text instead. This way we have more accessible code.

  1. h1 {
  2. width: 692px;
  3. height: 90px;
  4. text-indent: -9999px;
  5. background: url(images/header.jpg);
  6. margin: 0;
  7. padding: 0;
  8. }

The width and height are necessary to define the space for our header background image. The "padding:0" and "margin:0" are needed to make sure our image aligns nicely to the top of our page. Furthermore, I've moved the "text-align: center" into our body tag selector since all the content should be centered. However, the content within the container should not be centered, so we add a "text-align: left" there. Our container has "margin: 0px auto" which means it will appear at the very top (0px) and centered (auto).

Implementing the navigation

To implement the navigation buttons on the left we first create an id container holding the content on the left:

  1. #left {
  2. width: 178px;
  3. }

So far the only thing we need to define is its width. Within this left container we have the div id container for the navigation, called navcontainer. The best way to create a navigation with CSS is to use a bullet list as HTML code and create CSS styles to it to change its design. Like this ("#" is used as a dummy link. ):

This creates a simple bullet list. Since we don't want bullets but nice buttons instead, we will remove those bullets in our CSS and use background images instead. This is the CSS code:

  1. #navcontainer {
  2. width: 178px;
  3. }
  1. #navcontainer ul {
  2. margin: 0;
  3. padding: 0;
  4. list-style-type: none;
  5. font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;
  6. text-indent: 20px;
  7. letter-spacing: 1px;
  8. border-bottom: 1px solid #fff;
  9. }

The first piece of code defines the width of the navigation container. The second part defines the "ul" tag within the navcontainer. "margin:0" and "padding:0" makes sure there is no space between and around the buttons and it removes the left-indentation. "list-style-type: none;" removes the standard HTML bullet. Then we have the text specifications and the last one is there to create a white line at the bottom of our navigation to finish the navigation nicely.

  1. #navcontainer a {
  2. display: block;
  3. width: 178px;
  4. height: 22px;
  5. }
This defines the "a" tag or link tag within our navcontainer, which affects each button of the navigation. First we have "display: block;". Display sets how or if an element is displayed. Here it's set to "block" which is needed to convert our links to actual "blocks" or actual buttons. Below we define the width and height of each button. Rollover states can be achieved by converting the a elements within the list to blocks using display: block; and swapping background colors using the a:hover pseudo-class. This is how the code looks:
  1. #navcontainer a:link, #navcontainer a:visited {
  2. background: url(images/bg_navbutton.gif);
  3. color: #5C604D;
  4. text-decoration: none;
  5. }
  1. #navcontainer a:hover {
  2. background: url(images/bg_navbutton_over.gif);
  3. color: #A5003B;
  4. text-decoration: none;
  5. }

The color sets the "color" of the text and the "text-decoration: none" is there to remove the standard underlining of a link.

It's always necessary to make your navigation as clear and simple as possible, so that's why I added an extra style to apply to the button of the current section. I've called it "current" and this is the CSS code:

  1. #navcontainer li a#current {
  2. background: url(images/bg_navbutton_over.gif);
  3. color: #A5003B;
  4. text-decoration: none;
  5. }

This style defines the "current" id within the bullet link tag (li a) of the navcontainer. The properties and values listed are the same as our hover state. The only thing needed now is to add the current id to our HTML code:

A lot of good CSS navigation examples and tutorials can be found on:

from www.veerle.duoh.com

Diposting oleh hany di 04.03  

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
Free Blogger Templates by Isnaini Dot Com and Nissan Car Pictures. Powered by Blogger