Sliding Door Navigation - Transparent 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.

If you decide to move forward and use tab images with transparent backgrounds you need to change the CSS code to reflect the new image names, the new code is shown below in bold.

revised CSS

#header li {
float:left;
background:url("right.gif") no-repeat right top;
margin:0;
padding:0;
}
#header a {
display:block;
background:url("left.gif")
no-repeat left top;
padding:5px 15px 4px 15px;
}

#header #current {
background-image:url("right_on.gif");
}
#header #current a {
background-image:url("left_on.gif");
padding-bottom:5px}
</style>

When I view the file in the browser I see it almost worked. The tab on the right seems fine, but the area on the left shows a white area. Here is what happened, the left tab image is transparent so the right tab image shows through. Drats.

This concept may be difficult to understand - so I made another copy of the page with images that have a right tab image with a red bar along the top. View this page to see how the right tab is displayed in the transparent area of the left image.

tab navigation with red bar at top of right image

It may be hard to see the red line peeking in the upper left corner, use command plus sign to blow up the text on the page and make the tabs appear larger.

To fix the problem we return to the CSS code and adjust the padding for the li tag within the header id. The padding had been listed as 0 in all directions, I will change that so the left padding is 9 pixels. This will cause the image to stop 9 pixels before the edge of the list item, I chose the value of 9 pixels because the "left.gif" is 9 pixels wide.

revised CSS

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

Since I have added 9 pixels of padding to the list item, I need to remove 9 pixels somewhere else or my padding will be off balance. I adjust the padding for the <a> tag by removing 9 pixels of left padding. This will produce a total of 15 pixels of padding along the left, it is just spread over 2 styles.

revised CSS

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

As I view the file it seems to have gotten worse instead of better, but don't worry, this is actually a sign of success. The issue now is the stack order, we want the right tab image to be on top instead of the left image. To achieve this I put the right image where the left used to be an visa versa. I also change the position settings for the placement of the image.

original CSS

#header li {
float:left;
background:url("right.gif") no-repeat right top;
margin:0;
padding:0;
}
#header a {
display:block;
background:url("left.gif")
no-repeat left top;
padding:5px 15px 4px 15px;
}

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

revised CSS

#header li {
float:left;
background:url("left.gif") no-repeat left top;
margin:0;
padding:0;
}
#header a {
display:block;
background:url("right.gif") no-repeat right top;
padding:5px 15px 4px 15px;
}

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

here is the new stacking order back to front

I return to the browser, reload the page and snicker snack the transparent tabs are working as expected.

Here is the final page with transparent tabbed images

Here are the images I used

left and right

rght