elements on the page:

Now we put together the Table of content and content :

ldquo;-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
For the file to validate, it needs a document type. The document type specifies what rules the document must follow for it to be valid. I usually go with XHTML 1.0 Strict,
but there are other document types that are more… forgiving. I won’t be covering them in this tutorial.

The tag holds metadata about the document. In this particular case, it holds the character encoding of the page, so that the browser doesn’t have to guess.
The element is used for linking to external resources, in this case a stylesheet. We’ll be making the stylesheet.

My Frist Menu Design

1. Chapter 1


2. Chapter 2


3. Chapter 3

That’s right, we’ll only be dealing with one image. It doesn’t matter if we have five different states for the tab, it can all be done with one image. I’ll start by answering the obvious question: Why?
Splitting the image into pieces left, middle and right requires six separate images for two states. If we were to add another state, for example a hover effect, the number of images required would increase to nine. Other than extra file management and more work when editing the images, what does this mean?

Each image has a header section. The filesize of six small images would be about twice as big as the filesize of one big image.
Each image requires its own HTTP request. This wastes both bandwidth and server processing time.
Due to the images being requested separately this also means that the page will take longer to load, especially if the user’s browser downloads the files one by one.
There is no way to apply the method I’m going to describe using three images for one tab, since each tab consists of only two elements (

and ) and only one background image can be applied to an element.
Hopefully I’ve convinced you that putting everything into one image is much better than using several images. Moving on…

Each state will take up one row of the image and will be 500 pixels wide. The idea is that the left side of the tab will be drawn in one element, then the rest will be drawn on top of it in a child element. I will explain how in the next step. Each row is 60 pixels high. This will allow the tab to be up to 60 pixels high, but it can be smaller.

Now, you might be worried. Worried about the “500 pixel” bit of my previous paragraph. Don’t be, though. We will be saving this rather big image as a GIF image, which in my case took it down to just a couple of kilobytes. If you know that you will never have tabs even close to 500 pixels wide, you can of course shrink it. Even 200 pixels might be enough. But thanks to compression, the difference probably won’t be more than a few bytes.

 

 

Save this image where you saved chapter1.html, or make your own image. Name it tabs.gif.

The tabs

The first thing we’ll do is to style the ordered list that represents our Table Of Content (

):

ol#menu {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
}

Stle of Default State of each Chapter:

ol#menu li {
    background: #bdf url(tabs.gif);
    float: left;
    margin: 0 1px 0 0;
    padding-left: 10px;
}

Style for the link:

ol#menu a {
    background: url(tabs.gif) 100% 0;
    color: #008;
    float: left;
    line-height: 2em;
    padding-right: 10px;
    text-decoration: none;
}

 Style for the current :

ol#menu li.current {
    background-color: #48f;
    background-position: 0 -60px;
}

Style for the current menu link

ol#menu li.current a {
    background-position: 100% -60px;
    color: #fff;
    font-weight: bold;

}

Style for The content :

div.content {
    border: #48f solid 3px;
    clear: left;
    padding: 1em;
}

All are together will look like this:

ol#menu {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
}

ol#menu li {
    background: #bdf url(tabs.gif);
    float: left;
    margin: 0 1px 0 0;
    padding-left: 10px;
}

ol#menu a {
    background: url(tabs.gif) 100% 0;
    color: #008;
    display: block;
    float: left;
    height: 2em;
    line-height: 2em;
    padding-right: 10px;
    text-decoration: none;
}

ol#menu li.current {
    background-color: #48f;
    background-position: 0 -60px;
}

ol#menu li.current a {
    background-position: 100% -60px;
    color: #fff;
    font-weight: bold;
}

div.content {
    border: #48f solid 3px;
    clear: left;
    padding: 1em;
}

And hence the end of the tutorial.

If you want to test the above created menu then follow the steps:

Step 1:

Make a folder named menu:

Step 2:

make three blank html files in it:

Chapter1.html

Chapter2.html

Chapter3.html

Style.css

To make html file open text editor :

file ->save->save as type->choose all file ->file name->type filename.html->ok

in case of Style.css file type style.css in file name instade of html

step 3:

Right click on Chapter1.html ->open with->notepad

ldquo;-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

My Homepage

1. Page 1


2. Page 2


3. Page 3

Do this for Chapter2.html

My Homepage

Page 1
Page 2
Page 3


Page 2
Text...

Do this for Chapter3.html

My Homepage

Page 1
Page 2
Page 3

Page 2
Text...

For Style.css

ol#menu {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
}

ol#menu li {
    background: #bdf url(tabs.gif);
    float: left;
    margin: 0 1px 0 0;
    padding-left: 10px;
}

ol#menu a {
    background: url(tabs.gif) 100% 0;
    color: #008;
    display: block;
    float: left;
    height: 2em;
    line-height: 2em;
    padding-right: 10px;
    text-decoration: none;
}

ol#menu li.current {
    background-color: #48f;
    background-position: 0 -60px;
}

ol#menu li.current a {
    background-position: 100% -60px;
    color: #fff;
    font-weight: bold;
}

div.content {
    border: #48f solid 3px;
    clear: left;
    padding: 1em;
}

Save the above images as tabs.gif