Sliding Door Navigation -part 3 the bottom border


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.

Now I would like to place a border along the bottom of the beige buttons but not on the white button, this makes the white tab appear to be in front of the beige tabs.

Here is how I want my final product to look - tabbed navigation with bottom border

Initially I thought this could be done with CSS border code, but this will not give us a sharp edge at the bottom of the tab. Instead we will be placing an image with a border at the bottom, this image will be placed within the id of header.

background

Before I show you the CSS code used to display this image list's talk about the way the elements in the navigation bar are stacked.

stacking order back to front

I add 2 declarations to my existing CSS. The first will cause the gradient image shown above to display in the background and also sets the entire header div tag to a tan color. The second declaration will cause the image to repeat horizontally.

New CSS code

#header {
float:left;
width:100%;
background:#DAE0D2 url("bg.gif")
repeat-x bottom;
font-size:93%;
line-height:normal;
}

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

As I view the file in the browser I see that the bottom border is displaying, but not on any of the tabs. I also notice that there is now a white space at the top of the screen. By changing the padding on a few elements I think I can fix these problems.

My first step is to remove the padding that had been in the body tag

old CSS code

body {
background:#fff;
margin:0;
padding:20px;
color:#000;
font:x-small/1.5em Georgia,Serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
}

new CSS code

body {
background:#fff;
margin:0;
color:#000;
font:x-small/1.5em Georgia,Serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
}

Then I added some padding to the ul tag which is within the header id. Now there will be 10 pixels of padding along top; left and right, and no padding on the bottom. This will fix the white gap between the navigation bar and the top of the page.

revised CSS code

#header ul {
margin:0;
padding:10px 10px 0 10px;
list-style:none;
}

Now let's fix the bottom of the beige buttons so the border shows through. My original code called for 5 pixels top and bottom and 15 pixels left and right.

original CSS

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

revised CSS

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

These new setting will allow the bottom line on the gradient image to show through on all the normal tabs because the bottom padding is 4 pixels instead of 5. However on the <a> tag with an id of current the bottom-padding is 5 pixels so that line will not appear. Now I understand why that declaration was included in an earlier part of the demonstration.

View tabbed navigation with revised padding values

Now there is no white gap at the top of the page, the bottom border displays on the beige tabs, and the white tab has a sharp, crisp edge where the new padding displays.

In the next demonstration we will deal with the corners where the curve of the tabs display, since I have a gradient background image I now have little white triangles.

If you decide to make tabbed navigation with a solid color background, you can quit right now, because the remaining lessons do not apply. The techniques shown in the next lesson are only used if you have a gradient or patterned background and need to use transparent images for the tabs.