View Full Version : Need Help With Navigation Bar HTML

08-10-2011, 05:07 PM
What's goin' on guys. Let me start out by saying I'm a complete newbie at html. Well, maybe not complete. I know a few simple things but what I need help on is this navigation bar I made for my music group's facebook fan page. http://i218.photobucket.com/albums/cc69/badboi4lyfe816/DrastikkMeazurezFacebookNavigationBar.png
I made it in Photoshop now I just need help converting all of it. For the "about" that's just going to be a seperate page that I'll type up and all that. For the music tab I want it to redirect to our Reverbnation page. For the "Show Dates" section I'd like to incorporate a calendar in there but if not I'll probably type them all up. And for contact that'll be a seperate page also, As for the youtube, facebook, and twitter icons I want that to be linked to the pages. Can anybody help me with this?

08-10-2011, 07:24 PM
I would look into creating HTML "Image Maps". That way you could use the image you just made and have it link to the pages you stated. Easy to find instructions with google.

08-10-2011, 08:12 PM
You need to use the slice tool in Photoshop to split this 1 image into multiple images. Do a YouTube search for instructions on how to use this tool. Then you will have 7 different images (1 for each page, and 1 for each social media).

Then simply link each image to it's respective page.

08-10-2011, 10:36 PM
You could also just export the whole thing as an image and use it as a sprite, called "links.jpg". Your HTML for the band links would be:

<ul id="links">
<li><a href="link.to.site" class="about">About</a></li>
<li><a href="link.to.site" class="music">Music</li>
<li><a href="link.to.site" class="shows">Show Dates</li>
<li><a href="link.to.site" class="contact">Contact</li>
<li><a href="link.to.site" class="youtube">YouTube</li>
<li><a href="link.to.site" class="facebook">Facebook</li>
<li><a href="link.to.site" class="twitter">Twitter</li>

Then in your CSS:

#links li a {
display: block;
background: url(images/links.jpg) 0 0 no-repeat;
text-indent: -9999px;
height: 20px;

Then load this up in firefox. Make sure you have Firebug installed. Right click on the first link and choose "Inspect Element". Make sure you are on the <a>. Then using firebug, set the width so it fits the background element and adjust the two 0's (one is left/right and one is up/down) until the first link looks how you want it. all the other links should look the same. So you .about should look something like this (with arbitrary numbers):

#links li a.about {
background-position: 10px 0;
width: 50px;

Once that's done, rinse and repeat for each of the other links until you've got them all styled. Since you are only using one image, then it only has to be downloaded once.

08-11-2011, 05:37 AM
Hmm.. alright I think I might have to hang of this, thanks resdog & all the others that have replied to this. I'll try it out and let you know how it goes.

08-11-2011, 05:51 AM
Alright, I got the links part down. How do I match them up horizontally with the image though? I'm using FBML on facebook for the HTML so do I have to do this in CSS or what? I'm majorly lost right now lol. Sorry guys

08-11-2011, 02:26 PM
Can you post your code?

08-12-2011, 07:42 AM
The image code for the image or the whole code for everything? I figured out what css was, I downloaded Firebug for Firefox but I can't understand anything on this. I followed your instructions for the two 0's but nothing happened. I didn't realize doing this was so complicated lol

08-12-2011, 08:16 AM
I would have to question why you wouldn't use html/css to create this, there's really isn't much to the design and text.

As stated earlier, splice and sprite would be the best solution. I'm not sure what resdog is talking about using a sprite for a single image. But what you're trying to achieve could probably just be made using standard html/css (I'm thinking of just an overlay). Think of it this way, the navigation image is just a background, while the link's <a>s are actual html/css, while the image you made in photoshop is a background. No need to make this more complicated than it is.

08-12-2011, 08:27 AM
Ahh alright, I think I know what you mean. So on the background I put the image link into the () and then paste that into FBML and then the links go into CSS, right? I'm just trying to understand all of this. It's new to me so forgive me if I don't catch on too quickly

08-12-2011, 08:31 AM
definetly not the best way, but for a beginning coder, probably the easiest to understand. In the end using a sprite with separate images for each also takes a lot of time (even in photoshop). I recommend either making the entire page into a psd (if your going to go heavy on the design) or just sticking with good old html/css, and making the text in html (nothing special about what you did in the image). Once again, I would highly advice you stick with html/css before moving onto psds and images like you tried out here.

Once you get the hang of that, you can move onto sprites http://spritegen.website-performance.org/ which are primarily used to stop flickering images on hover and psd to html http://vandelaydesign.com/blog/design/psd-to-html-services/ and image maps http://www.w3schools.com/tags/tag_area.asp

I used an html5 doctype but not eric mayer's reset. That's important. You can google the pros and cons to not using it.

<title>Why make something complicated?</title>
<style type="text/css">
* { margin: 0; padding: 0; }

/* not eric mayer html5 reset */
body.page {
font-family: Arial, sans-serif;
font-size: 12px;

.nav {
_zoom: 1;
.nav li {
display: inline;
float: left;
height: 100%;
.nav li a {
display: block;
height: 100%;

#nav-bar {
background: url('nav-bar.png') 0 0 no-repeat;
width: 506px;
height: 51px;
#nav-bar .nav { height: 100%; }
ul#site-links { width: 388px; float: left; }
#site-links li { margin-left: 1px; }
#site-links li:first-child { margin-left: 0; }
#site-links li a.about { width: 78px; }
#site-links li a.music { width: 86px; }
#site-links li a.show_dates { width: 128px; }
#site-links li a.contact { width: 92px; }
ul#social-follow { width: 118px; float: right; }
#social-follow li { margin-left: 3px; }
#social-follow li:first-child { margin-left: 6px; }
#social-follow li a { width: 33px; }
<body class="page">
<div id="nav-bar">
<ul id="site-links" class="nav">
<li><a href="#" class="about"></a></li>
<li><a href="#" class="music"></a></li>
<li><a href="#" class="show_dates"></a></li>
<li><a href="#" class="contact"></a></li>
<ul id="social-follow" class="nav">
<li><a href="#" class="youtube"></a></li>
<li><a href="#" class="facebook"></a></li>
<li><a href="#" class="tumbler"></a></li>

here's what it will look like (I recommend Chrome's developer tool), it's inspect element is essentially an upgrade as compared to firebug


IE7 screenshot is the same, though it will not work in ie6 due to the :first-child selector, but I don't really care about that browser anymore


08-12-2011, 09:13 AM
Gotcha, I'll try to play with everything and see what I can up with. Thank you for your help Sammy. Sorry about being so slow at this lol I'm just trying to learn.

08-12-2011, 03:44 PM
I'm not sure what resdog is talking about using a sprite for a single image.

In case your curious, here's what I mean:

You take the image above and create a double image, the top part being the standard state and the bottom being a hover state:


then your html code would be:

<ul id="links">
<li><a href="" class="about">About</a></li>
<li><a href="" class="music">Music</a></li>
<li><a href="" class="shows">Show Dates</a></li>
<li><a href="" class="contact">Contact</a></li>
<li><a href="" class="youtube">YouTube</a></li>
<li><a href="" class="facebook">Facebook</a></li>
<li><a href="" class="twitter">Twitter</a></li>

and your CSS:

#links {
list-style-type: none;
margin: 0;
padding: 0;
#links li {
float: left;
#links li a {
display: block;
background: url(nav.jpg) 0 0 no-repeat;
text-indent: -9999px;
height: 51px;
#links li a:hover {
background-position: bottom;
#links li .music {
width: 87px;
background-position: -80px top;
#links li .music:hover {background-position: -80px bottom;}
#links li .about {
width: 80px;
background-position: top left;
#links li .about:hover {background-position: left bottom;}

#links li .shows {
background-position: -167px top;
width: 129px;
#links li .shows:hover {background-position: -167px bottom;}

#links li .contact {
background-position: -296px top;
width: 92px;
#links li .contact:hover {background-position: -296px bottom;}

#links li .youtube {
background-position: -388px top;
width: 41px;
#links li .youtube:hover {background-position: -388px bottom;}

#links li .facebook {
background-position: -429px top;
width: 35px;
#links li .facebook:hover {background-position: -429px bottom;}

#links li .twitter {
background-position: -464px top;
width: 42px;
#links li .twitter:hover {background-position: -464px bottom;}


Just another way to solve the problem.