Hi All,

 

I’m in the process of creating my nav bar for my very first website. I want to create my horizontal nav bar containing my 5 links. I don’t want to replace images with CSS or Java, just hide the non active portion of the image as this seems to be the best way.

 

Do I have to create 5 divs (within a nav div) for my images to go into as backgrounds, or 1 div for main nav bar image etc..?

I want to use image or images – not text links.

I also want to have a un-hover, hover and active state – with hove/active being the same effect.

 

I’ve looked for other examples but all seem to use text links instead of separate images!! Anybody have the code for this?

 

 

Cheers

This might help you out

http://www.webdesignerforum.co.uk/index.php?showtopic=270

Hey!

 

You can use a div called nav then put the images in the div. Probably best to use and unordered list too <ul>

 

 <div id="nav"><ul><li><a href="whatever.html"> <img src="images/pic.png" height="..." width="..." alt="Home Tab" /></a></li>.......</ul></div>

Insert sizes of images where the ... is. Make sure each image/ link combo is surrounded by <li> then </li>.

 

Then for your css

#nav a {
		 text-decoration: none;
}
#nav a img {
		border: none;
}
#nav ul {
	   display: inline;
}

 

That's only the very basics and presuming you don't want the default outline on the image and the nav to be horizontal.

 

Ask if you need more help, tell me if I haven't answered your question...

 

All the best

Hey!

 

You can use a div called nav then put the images in the div. Probably best to use and unordered list too <ul>

 

 <div id="nav"><ul><li><a href="whatever.html"> <img src="images/pic.png" height="..." width="..." alt="Home Tab" /></a></li>.......</ul></div>

Insert sizes of images where the ... is. Make sure each image/ link combo is surrounded by <li> then </li>.

 

Then for your css

#nav a {
		 text-decoration: none;
}
#nav a img {
		border: none;
}
#nav ul {
	   display: inline;


}

 

That's only the very basics and presuming you don't want the default outline on the image and the nav to be horizontal.

 

Ask if you need more help, tell me if I haven't answered your question...

 

All the best

 

Sorry for late response - been away so will try this tonight. Is there a simple way of keeping the link in active state when on page?

 

Thanks

Couple of other options/variations:

 

1) Don't need a div to wrap all the navigation in, just give the ul an id="nav".

2) Use CSS for the background images, rather than have them in the HTML. Keeps you code cleaner and easier to maintain.

3) Use :hover on the anchor or list item in the CSS and specify a different image.

4) As for active state you'll either need to manually amend the page link by adding an id="active" or suchlike with some CSS; or try using PHP.

 

HTH?