Sliding Door Navigation -part 2 adding images


Click on the movie reel icon to view a video demonstration. You may need to watch the video a few times to totally understand the concepts. Feel free to print out the notes and copy the code from the files which are linked at the bottom of the page.

I return to the CSS and add code to display the left tab image. I access the style that controls the <a> tag within the header id and add code to display the "norm-left.gif", which will not repeat and will start in the top left corner. This is a somewhat "tricky" concept because we have 2 background images "norm-right.gif" and "norm-left.gif". We can get away with this trick because we are placing each image in a unique element. The right image is in the list item and the left image is in the <a> tag. The <a> tag is actually floating on top of the list item so the left image is floating on top of the right image.

I also add padding of 5 pixels top and bottom and 15 pixels left and right.

New CSS code

#header li {
float:left;
background:url("norm_right.gif")
no-repeat right top;
margin:0;
padding:0;
}

#header a {
display:block;
background:url("norm_left.gif")
no-repeat left top;
padding:5px 15px;
}

Let's view the tabbed navigation at this stage of the demonstration.

As you use this new tabbed navigation bar, take note of the fact that the tab is "hot" or "clickable" all the way to the edge of the tab because I assigned a declaration of display:block to the <a> tag. I also notice that the left image gives a curve to the left edge of the buttons. Now I would like to add CSS code that allows the link for News (which is the page we are on) to display differently.

Back at the CSS I add 2 more styles. The first style asks the browser to find an id of "header" and then within that area find an id with a value of "current". Once those criteria have been met display a background image of "norm_right_on.gif".

The next declaration asks the browser to find the same conditions of the current id within a header id, but it is also looking for an <a> tag. Within the <a> tag the image of "normal_left_on.gif" is displayed. 5 pixels of bottom padding are also added.

New CSS

#header a {
display:block;
background:url("norm_left.gif")
no-repeat left top;
padding:5px 15px;
}

#header #current {
background-image:url("norm_right_on.gif");
}
#header #current a {
background-image:url("norm_left_on.gif");
padding-bottom:5px }

As I view the file in the browser I see that there is now a white tab displaying the new link. That is because the browser is responding to my new CSS styles and displaying the images of right on tabnorm_right_on.gif and

left on tabnorm_left_on.gif.