When I first started developing websites, I had little knowledge of the power of CSS. I was making those table-based layouts that you web designers all dread by now. Piles of extra <td>, and <tr> markup that make maintaining a site really hard. Remember when you created that navigation that had exactly five table cells for your navigation images. What happens when the client says: “We would like to add another page.” To them it is a very minor adjustment to the site, but to you the developer you have to almost readjust all of your layout tables to make room for that one graphic.
Well luckily I have learnt from this past frustration and have found CSS navigation more flexible. The thought back in the 90’s was that each link needed to be a graphic created in Photoshop. That was the only way to make it look “pretty”. Well now you can design background images in Photoshop, but keep the text in the XHTML. Thus, any text changes or adding of links doesn’t require you to go back in Photoshop.
Now let’s start building a simple CSS navigation. Semantically our navigation is an unordered list of links; so writing this in XHTML code would be as follows:
<ul> <li><a href="link1.html">Link 1</a></li> <li><a href="link2.html">Link 2></a></li> <li><a href="link3.html">Link 3</a></li> </ul>
Now take a look at this in the browser and you will see a normal unordered list, with the links vertically on top of one another. Let’s say we want a horizontal menu instead of a vertical one. The key to the CSS is understanding the “display” property of CSS. There are three well known values for this property. They are “none”, “block”, and “inline”. <li> elements are rendered in blocks by default. That means that its width is 100% of its container. You can not apply widths to block elements. This is why our links are stacked vertically as block elements don’t end up beside each other unless they are floated. Floating is a topic that will be covered in the near future.
So our next step is to make our <li> elements in line to each other. Place the following in the <head> of your html page.
<style type="text/css">
li { display:inline; padding: 0 10px; }
</style>
Our navigation is now starting to take shape, as the list elements are now horizontal. We have also added a bit of padding to separate our links and create some white space. Now open up Photoshop and create an image with a height of 23px and 200px width. Take the gradient tool and create a vertical gradient background for your navigation. Now crop that gradient to have a height of 23px and a width of 1px. We only need a 1px width, because we will use the power of CSS to repeat this graphic horizontally across our navigation. Save it as globalNavRepeat.gif into the same folder as your HTML file that you are creating.
Now add this CSS above our <li> rule to add this image as a background for our navigation:
ul { background: url(globalNavRepeat.gif) repeat-x left top; border: 1px solid black; }
We have told the browser to repeat the globalNavRepeat.gif along the x-axis starting at the top left corner. Then we have added a 1px border around our gradient to make it stand out a bit more.
Now you could style the links using CSS in whichever way that you wish. Look how easy this was, we created a nice looking CSS navigation with using a total of four CSS properties.
Brenelz Web Solutions