Web Sites made Easy

HTML navigation bars can be fun and tricky to make. If you are not using special pictures for users to click on to navigate through your webpage then I highly suggest you use html/css navigation bars. They are easy to implement and you do not have to worry about broken links or the pictures not showing up. However, as stated above, they are not as customizable as image navigation bars.

Well, if you decided to make image bars then you only need a few lines of code!

An example of this can be seen here.

If your like me, you don’t like that blue line going around your nice box! To remove this blue line we have to add the style code ‘text-decoration: none;’ and add a ‘border: none;’ to the img code.

If you are not doing a special button then you can create your navigation bar with html/css. There is no point in re-inventing the wheel so take a visit to listamatic. This is a site with numerous navigation bars that you may use. Once you have found the one you wish to use, paste the HTML code inside your body tags. The code should be pasted where you want your nav bar to be located. Next copy and paste the CSS code into your style sheet. Voila! You now have a nice looking navigation bar.

To change the colors, size, and style of the bar you must change the CSS code. To see an example of one of these navigation bars you may look at my vertical bar I use in this site. I got this bar from the website and re-styled the CSS to my liking.

Filed under: HTML Basics (learn HTML), HTML Tutorials by Zach