Making a horizontal navigation bar

In class we learned how to quickly make a navigation bar using the html list function. However, this make a quick list of bulleted points that, while can be used as a basic navigation bar, looks messy and very beginner. I decided that I wanted to make a horizontal navigation bar:

Screen shot 2013-10-30 at 3.59.01 PM

First off, I made each of my navigation sections (about me, cv, video, etc.) in Photoshop. I also made the very leftmost and the very rightmost pink bar, to continue the literal “navigation bar”. I then set up my list (<ul>) to be a simple bullet list, with each list item (<li>) being an image:

Screen shot 2013-10-30 at 4.02.00 PM

(note: that </nav> section should have a closed bracket, I accidentally left mine behind when I copy+pasted from Dreamweaver to TextWrangler.)

Now you should see a pretty ugly bulleted list of images. Let’s make that list prettier. Go to your css and make a new section called “nav”. Here you can change the background color, text color, etc. of your navigation bar, but for me it didn’t really matter what I put because I was using images anyway. Make sure you include list-style: none; – this will remove the bullets!

Screen shot 2013-10-30 at 4.07.30 PM

Next, we’re going to edit the css to tell the html list items (<li>) in the .nav section to become horizontal instead of vertical. It’s actually super easy! All you need to add is:

Screen shot 2013-10-30 at 4.10.18 PM

The inline function means that an html object will “tolerate” other html objects next to it. When you have your html images as links, though, it’s important to specify what these links are going to do- in this case, we want them to behave as block images in an inline, so we make them inline-block. The differences between block, inline, and incline-block can be easily seen in this image, taken from this website:

Screen shot 2013-10-30 at 4.14.03 PM


Obviously inline-block is what we’re going for! Now just make sure your css is linked to your html page and you’re all set to go!

The only problem I’ve been having is that I find that the navigation bar still puts a single space in between my images, which is a problem in my case because I have that singular pink bar running through the navigation bar. I’ve been looking for a solution, but haven’t been successful yet, so if anyone knows a fix for that, please comment! Otherwise, I’ll edit this post when I finally figure out a solution.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s