Navigation, different image per link

Hi All,

What would be the best way to code an image Nav bar that has a different image for each link?



ta muchly,

I would make a separate graphic of each word.
Then create a vertical navigation using background images.
Karinne has a nice tutorial.

Here is another tutorial. http://www.udm4.com/demos/other-imagenav.php
This ones shows spaces between the images but you could delete the margins or padding to make them touch each other.

Hope this helps!

Cheers dude,

Got very lost following that second tutorial.

I'm struggling to intergrate links, image replacement and background images into the image navbar...

currently I have..

Code: Select all

<div id="leftContent">
            <ul>
                <li id="home"><span>Home</span></li>
                <li id="band"><span>About</span></li>
                <li id="music"><span>Music</span></li>
                <li id="gigs"><span>Gigs</span></li>
                <li id="contact"><span>Contact</span></li>
            </ul>
        </div>

Code: Select all

#leftContent ul {
    margin-top:    52px;
}

#home       {background: url(images/homeNav.jpg) no-repeat; height:45px; width:170px;}
#band       {background: url(images/bandNav.jpg) no-repeat; height:45px; width:170px;}    
#music      {background: url(images/musicNav.jpg) no-repeat; height:45px; width:170px;}
#gigs       {background: url(images/gigsNav.jpg) no-repeat; height:45px; width:170x;}
#contact    {background: url(images/contactNav.jpg) no-repeat; height:45px; width:170px;}

Should you not be putting the image links within the list items rather than writing 'Home' etc within the spans? That's what's making the written items appear also. I'm probably completely wrong though (as I usually am when I try and help out with coding issues )

HTML:

Code: Select all

<ul>
                <li class="home"><a href="#">Home</a></li>
                <li class="band"><a href="#">About</a></li>
                <li class="music"><a href="#">Music</a></li>
                <li class="gigs"><a href="#">Gigs</a></li>
                <li class="contact"><a href="#">Contact</a></li>
            </ul>

Now each li needs a different background images, you see? Using CSS we will add a different background for each link and also remove the text so you have really pretty links.

So in the CSS:

Code: Select all

ul li {
list-style: none;
}

ul li a {
display: block;
text-indent: -9999px;
text-decoration: none;
}

ul li.home a {
width: 75px;
height: 25px;
background: #xxx url('home.gif') 0 0 no-repeat;
}

ul li.band a {
width: 75px;
height: 25px;
background: #xxx url('band.gif') 0 0 no-repeat;
}

...

You would need to do the same for every link. That image of all links will need to be sliced up so you have 5 seperate images and the width and height in the css for each element will match the width and height of the images.

I'll tell you what I did. First I removed the bullet points from the list itmes with list-style: none; after this i formatted the text. I made it so that it won't appearonscreen with text-indent: -9999px. That moves the text one thousands pixels to the left. The display block ensures that the li a doesn't collapse due to it having no content. We also need to remove any undeline as this can appear in the window despite our text being moved off screen. I set this here so we didn't have to do it for every single li a due to them having different classes. This saves time and reduces file size. We set the width and height of each element to match the images. This will probably be different for each link so we will have to set it on each element seperately, using the class to select it. The last thing is to set an image as the background. We do this as above just change the file names to the real ones.

Repeat the above code for the other list elements. Did I already say that?

You may need to play around with some of the margins/paddings etc but this is the basic css.

Pete.

Fantastic mate that has done the trick.

Was tieing myself in knots trying to use <span> but your method is much better.

Thank you for your time.

No problem, I always found styling lists with css one of the hardest things to master.. If you want a different image, maybe a slightly different colour or something, on hover then just either add a different background image using a:hover as well as what you have or even better just use a single image and chnage the position of that image. The link that linda provided before shows how to do that.

Post again if you have any more problems.

Pete.