Sliding doors navigation – Page 2

We now have the initial background image for our sliding doors navigation tabs

The next step is to slice the image into 2 separate parts. As mentioned earlier, the image in front should have as small a width as possible. We only require the curve of the corner and maybe a little extra.

In order to create two separate images you will need to use the marquee tool('M' in Photoshop). Click and drag around the required part of the image, release and press 'CTRL' and 'C' simultaneously to copy the selection.

Create a new Photoshop file. Photoshop should set the size of the new file automatically. Now press 'CTRL' and 'P' to paste the image.

You should have something similar to the image on the left. Save this image as 'left.png'

Repeat the process, copying the remaining section of the image this time.

You should have something similar to the image on the left. Save this as 'right.png'.

Now for the CSS

Lets start with the #header DIV. We will float the Div to the left, and because it is floated we will need to give it a width. We will also set a background colour

#header{
background:#25252a;
float:left;
width:100%;
}

Next we style the unordered list. First of all we remove any default padding/margin by setting both to '0'. We also remove the bullet points by altering list-style.

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

The third step is to alter the list items. Again we set margin and padding to 0. Each list item is to be floated to the left, this results in a horizontal list rather than vertical. We also add a margin to the left to separate each list item slightly.

#header li{
margin:0
padding:0;
float:left;
margin-left:2px;
}

We now need to style the anchor element. We will set a font color, add some padding(to expand each tab) and set text decoration to none. The most important bit of code here is display:block;. Without this, only the actual text area of each tab is click-able.

Display:block, essentially turns the whole tab into a button, the entire tab is click-able

#header a{
display:block;
padding:5px 15px 4px;
color:white;
text-decoration:none;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}

Once you have completed all of the above code we can apply our images to the navigation bar using CSS

First of all, the image which will be at the back....Add the following to the list rule:

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

And now the frontal image... Add the following to the anchor rule

#header a{
display:block;
padding:5px 15px 4px;
color:white;
text-decoration:none;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
background:url("left1.png") no-repeat left top; }

And the result:

If the navigation tabs are not properly positioned within the DIV, try the following. Create a new Div within the header Div, give this an ID of Clear.

Add the following to your CSS document.

#clear {
clear:both;
}