Having nice-looking, easy to navigate, simple navigation bars is very important for any web-site. Luckily, we have CSS to style our navigation with colors, fonts, images, etc… In this CSS tutorial we are going to learn how to style an unorganized list to create a basic tabbed navigation for your web-site. We will start with a basic unorganized list with anchors, and then we will be adding style to each part and element of our list. Let’s get started!
We stand behind Server Intellect and their support team. They offer dedicated servers, and they are now offering cloud hosting!
STEP ONE:
Let’s start by writing a basic HTML list. Structure an unorganized list using 4 or more list elements:
<ul > <li>HOME</li> <li>ABOUT</li> <li>GALLERY</li> <li>SCHEDULE</li> <li>PRICES</li> <li>CONTACT</li> </ul>
Now we are going to add anchor tags <a></a> to convert each list item into a link and we are going to specify the unorganized list with a unique ID, called “nav”:
<ul id="nav"> <li><a href="#" title="">HOME</a></li> <li><a href="#" title="" >ABOUT</a></li> <li><a href="#" title="">GALLERY</a></li> <li><a href="#" title="">SCHEDULE</a></li> <li><a href="#" title="">PRICES</a></li> <li><a href="#" title="">CONTACT</a></li> </ul>
I created an ID, just in case you need to create more unorganized lists within your HTML file.
STEP TWO:
It is time to start styling our list by linking a Cascading Style Sheet.
Create a CSS file, name it “style”, and attach it to your HTML page:
<link href="style.css" rel="stylesheet" type="text/css" />
STEP THREE:
The first thing we need to style is the entire list; hence, we are going to add a declaration for ul #nav and add different properties to it.
Before you start writing the declaration for it, make sure to save in your images folder two images, one for the navigation main background and one for the current link. I used Photoshop CS5 to make the following images:
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Images zoomed in to 400%.
The smallest image has a size of 1px by 37px. I am going to use it for the background of my entire navigation bar. I named, “NavigationBg.jpeg”.
The largest image has a size of 1px by 43px. I am going to use it for the background when a link is selected. I named, “CurrentBg.jpeg”.
Now that we have our images ready, let’s write the declaration for our unorganized list:
ul#nav { width: 100%; height: 43px; font-size: 11pt; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; background-image: url(images/NavigationBg.jpg); background-repeat: repeat-x; background-position: left top; }
As you can see, our unorganized list width depends on the user browser’s window and the height of our navigation will have the same height of our “Current.jpeg” image. Each word within the list is going to have a size of 11pt with a bold sans-serif font.
Also, we set none for each <li> element’s style, so no bullets will be added. At the end, we stated the background image properties for our unorganized list.
Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.
If you preview the file in your browser, you should obtain the following:
Image may be NSFW.
Clik here to view.
STEP FOUR:
Next, we are going to fix how each link is displayed. We are going to add a declaration for each <li> tag by writing, ul#nav li.
Let’s use the display property to generate a block box before and after each link and let’s float each link to the left with a 5px margin between each link:
ul#nav li { display: block; float: left; margin: 0 0 0 5px; }
Preview in browser:
Image may be NSFW.
Clik here to view.
Getting there!
STEP FIVE:
Each link needs more space and they also need more style. We are going to fix that by adding a declaration for each link’s anchor <a>:
ul#nav li a { height: 43px; color: #666; text-decoration: none; display: block; float: left; padding-top: 8px; padding-right: 15px; padding-bottom: 5; padding-left: 15px; }
Preview in browser:
Image may be NSFW.
Clik here to view.
Great! Now each link has its own space and color. We only need to add two more properties to style their hover and current state.
Subsequent, our links hover state doesn’t need too much style. Let’s just add a color to them:
ul#nav li a:hover { color: #48A1C3; }
STEP SIX:
To conclude with our tabbed navigation, we need to specify how each selected link will look. Here is where we apply our “CurrentBg.jpeg” image to give to our navigation a tabbed look. Because I don’t have linked pages for each link, I am going to add a class to one of the links so you can see how the current state works.
<li><a href="#" title="" class="current">GALLERY</a></li>
ul#nav li a.current { color: #FFF; padding: 5px 15px 0; background-image: url(images/CurrentBg.jpg); background-repeat: repeat-x; background-position: left top; }
Preview in browser:
Image may be NSFW.
Clik here to view.
That’s all readers! Download and modify the file to fit your needs.
We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.