Horizontal CSS Navigation

**Whytey** · 07:27 PM

I have got two Images for each link: 1 active, 1 hover
i need them to go horizontally across the center of the page
http://whytey.ihostq.com/impulse2/

Code:

 
<div id="nav2">
<ul>
<a class="home" href="#">&nbsp;</a>
<a class="forum" href="#">&nbsp;</a>
<a class="residents" href="#">&nbsp;</a>
<a class="pictures" href="#">&nbsp;</a>
<a class="volumes" href="#">&nbsp;</a>
<a class="events" href="#">&nbsp;</a>
</ul>
</div>

Code:

#nav2 li ul a {
  display: block;
} 

a.volumes {
display: block;
width: 85px;
height: 32px;
background: url("http://www.webmaster-talk.com/images/volumes1.gif") 0 0 no-repeat;
}

a:hover.volumes {
display: block;
width: 85px;
height: 32px;
background: url("http://www.webmaster-talk.com/images/volumes2.gif") 0 0 no-repeat;
 }

etc....

**blue-dreamer** · 10-28-2007, 07:32 PM

a:hover.volumes is incorrect try a.volumes:hover

**Whytey** · 10-28-2007, 07:45 PM

Seems to hover just the same as before

**Whytey** · 10-29-2007, 03:02 PM

Now i just need to place those images in center of navbg for rollovers

**LadynRed** · 10-29-2007, 03:55 PM

Get rid of that horrid <center> tag and use CSS to center your site.

If you want the li items in #nav2 to be horizontal, you have to add display:inline to the li.

**Whytey** · 08:30 PM

I think that <center> tag is for the ads generated by google cause of the free host

I'll have a go at creating the nav again with inline display is there anything else i should add to #nav while i alter it?

**Whytey** · 10-31-2007, 03:22 PM

images arnt showing now

**whym** · 10-31-2007, 03:31 PM

Try floating the li's left instead of displaying inline as demonstrated below:

Quote:

li {float: left;}

As I said, remove the display inline part - I always use float:left on the nav bar li's as that works for me. Try it out and see if it works

**LadynRed** · 10-31-2007, 03:56 PM

You tempt some IE bugs with the floats, but yes, it's one other possibility.
The display inline should work fine.

The display:inline didn't work because your code is incorrect. You have this:

Quote:

You have to enclose those links inside <li></li> tags in order for it to be a
proper list.
</ul>

**Whytey** · 08:56 PM

Oops i didnt post the new code

Code:

<div id="nav2">
<ul>
<li class="home"> <a href="#">&nbsp;</a></li>
<li class="forum"><a href="#">&nbsp;</a></li>
<li class="residents"><a href="#">&nbsp;</a></li>
<li class="pictures"><a href="#">&nbsp;</a></li>
<li class="volumes"><a href="#">&nbsp;</a></li>
<li class="events"><a href="#">&nbsp;</a></li>
</ul>
</div>

Code:

#nav2 li ul{
display: inline;
list-style: none;
} 

#nav2 li.volumes a:active {
width: 85px;
height: 32px;
background: url("http://www.webmaster-talk.com/images/volumes1.gif");
}

#nav2 li.volumes a:hover {
width: 85px;
height: 32px;
background: url("http://www.webmaster-talk.com/images/volumes2.gif");
 }

**SeventotheSeven** · 10-31-2007, 09:17 PM

Your css selector is incorrect, and you're missing the float: left; . Try changing:

Quote:

#nav2 li ul a {
border-bottom:1px solid #3399FF;
border-right:1px solid #3399FF;
border-top:1px solid #3399FF;
display:block;
padding:0.25em 1em;
text-decoration:none;
}

to

Code:

#nav2 ul a {

float: left;
border-bottom:1px solid #3399FF;
border-right:1px solid #3399FF;
border-top:1px solid #3399FF;
display:block;
padding:0.25em 1em;
text-decoration:none;
}

You'll also probably want to change the right padding to right margin

**LadynRed** · 11-01-2007, 03:46 PM

The float: left is not really necessary.
What you DO need is a height on the list items or padding at the top and bottom of the <a> to equal the height of the graphic.

**Whytey** · 06:40 PM

I have only just got round to this site again
anyway here is what i have so far - http://whytey.ihostq.com/impulse2/
the active link doesnt appear to be changing when hovered over, instead
it goes below it when you right click on the img bg, also i set height for the images
in list item but there still not the right size

**LadynRed** · 11-05-2007, 10:08 PM

Ok, if you're going to use pseudo classes, you have to define them in a particular order: Link, Visited, Hover, Active - think LoVeHAte.

You have a class on each li to change the image. I would strongly suggest you make your bg image generic, then use actual text on the link. This eliminates the need to have to add extra classes for the menu, and it makes your menu more accessible. It should also simplify it considerably.

**Whytey** · 11-06-2007, 02:31 PM

I said to the person who designed the nav that it would be alot eaiser using text on the bgimage becuase you could then style it up and would save time but didnt end up doing that.

Could i not just do something like this?
http://whytey.ihostq.com/css.html and change the postion from active to hover in the css