Navigation menu

[Phaser]

Is it possible to create a navigation menu "overlapping" some images?

http://www.dzire-live.com/yj/shop.html (Dosen't work on IE yet, FF only for the time being!)

At the moment I have the images as links, but would like to remove the text off the images, and have a div going across, so I can enter text for the links.

The only thing i'm wondering is will I have to create a div for each image for the text, or can I have 1 div going across? The problem with the later is that i've have trouble centering each link in the middle of each image?

Cheers for any help.

 

[iCraig]

Create your menu as an ordered list, and style the list items accordingly.

<ul>
  <li id="home"><a href="index.html"><img src="images/homebutton.jpg" alt="Home" /></a></li>
  <li><a href="graffiti.html"><img src="images/graffitibutton.jpg" alt="Graffiti" /></a></li>
  <li><a href="music.html"><img src="images/musicbutton.jpg" alt="Music" /></a></li>
  <li><a href="shop.html"><img src="images/shopbutton.jpg" alt="Shop" /></a></li>
  <li><a href="links.html"><img src="images/linksbutton.jpg" alt="Links" /></a></li>
  <li><a href="contact.html"><img src="images/contactbutton.jpg" alt="Contact" /></a></li>
  <li><a href="http://www.yorkshirejunkies.co.uk/forum" target="new"><img src="images/forumbutton.gif" alt="Forums" /></a></li>
</ul>

You can set the images as the background of each <li> using an ID as shown in the above code on the home page item. You would repeat it for each item.

li#home {
  background-image: url(../link/to/image.jpg);
  other style stuff
}

 

[Phaser]

Cheers.

Would I not need to take the image link out of the li menu though?

EG - <li id="home"><a href="index.html"><img src="images/homebutton.jpg" alt="Home" /></a></li>

Would it not be <li id="home"><a href="index.html"></a></li> as the image is already in the css as a background?

 

[Phaser]

Little closer..

http://dzire-live.com/yj/index.html

How do I get it going horizontally across instead of vertical?

Cheers.

 

[iCraig]

ul#headernav {

display: inline;

}

Try that.

 

[Phaser]

No difference if I put it in the ul#headernav, but if I put it in each list it does the trick.

However it now looks like this:

http://www.dzire-live.com/yj/index.html

 

[Phaser]

Anyone?

 

[iCraig]

You need those items to have

display:block;

on them.

Try giving them a fixed width, and add

float: left; clear: none;

to each list item.

Sorry for slow replies, but as it's a Sunday I don't think many people are in gear

 

[Phaser]

That aligned them all vertical again..

I changed the first 2 images to display: inline, and left the rest as block and they aligned horizontally?

Any idea how I can get a 10px distance between the images and the paragraph of text underneath? I've tried adding margin-bottom on the navigation, margin-top on the content, and padding on both too but it dosen't seem to make any difference?

Cheers.

 

[Phaser]

Any help with getting the text moved down a touch?