Nav Bar Content

Let's start looking at how to further define the detail within our template by setting up the structure for the navigation bar. The navigation for our site will consist of a series of links to take our visitors to the different pages on our site. For the navigation portion of the page we basically have a list of these links to include in our page. We'll therefore start by coding the HTML for the navigation as a list of links.

<li><a href="#">xxxx</a></li>
<li><a href="#">xxxx</a></li>
<li><a href="#">xxxx</a></li>
<li><a href="#">xxxx</a></li>

We will of course put proper filenames into the hrefs and proper descriptions into the link text but these will do as placeholders for the moment. You can also add as many entries into this list as you need. If you have more entries than will fit across the one line then our menu bar will automatically expand to present the entries across two lines.

This defines the menu semantically but it will of course appear nothing like a menu bar in the actual web page so we'll need to style the <ul>, <li> and <a > tags so as to get the name bar to actually look the way we want. We'll start by removing all the margins and padding from the menu by amending the top line of our CSS.

html, body, ul {margin:0; padding:0; border:0;}

We'll also add the styles to the other tags specifically within the nav bar so as to get our menu looking the way we want without it affecting any of the other links and lists we will add to the page later.

#nav li {display:block; width: 110px;float:left; border-right : 2px solid #000; border-bottom : 2px solid #000;}
a {color : #339;}
#nav a {text-decoration : none; background-color : #ccc; display : block; width : 110px; padding : 5px 0; text-align:center; color : #339;}

These changes illustrate just how much a few simple CSS commands can dramatically change the appearance of something within your web page. Simply making the list elements display:block, giving them a width, and floating them converts the list from having the entries appear under one another with bullets to appearing next to one another across the one line. Applying similar styling to the <a> tag means that the entire width will be treated as the link rather than just the part that contains the text and also makes it easier to centre the text.

With this code added to our template we are now one step closer to to having our template page look the way we want.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow