Today we’re going over the “CSS Navigation”. Having intuitive and easy-to-use navigation is always important to any web site. With CSS you can transform boring HTML menus into better-looking, full-fledged navigation bars.

Remember, any navigation bar needs standard HTML as its base. (Especially for SEO Reasons.) In our example today, we will build the navigation bar from a standard HTML list. So here, you can see a basic navigation bar which is nothing fancy. (Just a list of links wrapped within an unordered list.) In the next slide we’ll add our CSS

So now, let’s remove the bullets, margins, and padding from the nav using CSS. You’ll notice that we’re using the command “list-style-type:none;” to remove the bullets from the list, and then “margin:0;” and “padding:0;” to remove the margins and padding from the nav. Does it look more like a left-nav yet?

Now lets finish this off. You’ll notice that the only change I’ve added now is a background to each list-item tag. The image is simply an 18x25 pixel gray image with a gradient and then with CSS I’ve instructed the background to repeat with the “repeat-x” for each left nav link.

Remember that, in these examples, I have been using an internal style sheet which is started and ended with the “style” tags. Remember that you can also make the same changes are by using a class or id within a separate CSS document or embedded with Inline Styles. For more information, see Episode 2 in this series.

And that’s it, that’s our 6th episode in the “CSS To The Rescue” series. If you’ve learned something today that you realize your site could use and you don’t have the time or effort to put into changing or debugging a CSS issue on your site. Consider asking us to help you with these changes! We can comb your site and pick out all of the major outlying issues. Repair them with specific tests for your site, and then procure and analyze the change’s overall effect, and present you with the winning changes. It’s that easy!