Web Designers Journal

Visions Connected To The Web

By

Creating a Stylish Image Repeat CSS Navigation

This is a guide to creating a simple, SE friendly CSS navigation including an example navigation for you to download and use. This method requires two very small images.

 

Designing The Backgrounds

Step One – You must create a navigation in photoshop or in your chosen image creating software. Do this by creating a new canvas 700 pixels wide and 30 pixels tall. Now create a nw layer and apply a soft green gradient. You can then if you wish add a gloss layer by selecting the top half on the gradient with the marquee tool and selecting new layer then fill with white. You then go to layer blending options and select overlay and lower the opacity until it looks nice.

Step Two – Now since you have your main background you can highlight one section of the base background and create a rollover background. An easy way to create a nice highlight effect is to simply create a new layer above the base and gloss layer. Highlight using the marquee tool a section of the navigation and fill with white. Do the same as you did to get the gloss effect and you will get a section of highlighted colour. You show have something which looks like below:

navigationI have added text inside the hover are just to show what it should look like.Step Three – If you are using photoshop you can now simply slice a 1px wide and full height section of the base gradient and save as navbg.gif and then the same size for the highlighted background (without any text) and save as navbgover.gif. These are the two images you will be using to create the navigation. We can now go on to the css section of the tutorial. Save the two images into an images folder which is contained within the folder you will have your css and html files.

 

 

Coding The CSS Navigation

To code this navigation is rather simple as the text which will be on the navigations is in the form of standard text rather than displayed within an image. First we need to create the css for this navigation. In order to do this and save on coding on the webpage we use a list. Put the following in your css for this navigation.

.navbg {
background-image:url(images/navbg.gif);
background-repeat:repeat-x;
width:100%;
height:30px;
}

#navcontainer ul
{
margin:0px;
padding-top: 0px;
list-style-type: none;
text-align: center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
height: 24px;
padding-top:8px;
padding-bottom:8px;
display:block;
width:100%;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
padding-top:8px;
color:#FFF;
width: 100%;
height: 30px;
}

#navcontainer ul li a:hover
{
color:#FFF;
background:url(images/navbgover.gif) repeat-x;
text-decoration:none;
width: 100%;
height:30px;
}

If you wish to fully understand what you have just copied try playing around with different attributes in the above coding and not the result it has on the outcome on the navigation. (Only do this at the end when you have the HTML written as well).

The XHTML coding is now very short and does not require much coding. Simply put this into your website coding where you want the navigation to display.

<div>
<div id=”navcontainer”>
<ul id=”navlist”>
<li id=”active”><a href=”Link.html” id=”current”>Link</a></li>
<li><a href=”Link.html”>Link</a></li>
<li><a href=”Link.html”>Link</a></li>
<li><a href=”Link.html”>Link</a></li>
<li><a href=”Link.html”>Link</a></li>
<li><a href=”Link.html”>Link</a></li>
<li><a href=”Link.html”>Link</a></li>
</ul>
</div>
</div>

If you wish to add more links simple add <li><a href=”Link.html”>Link</a></li> on to the XHTML coding before the </ul>.