Member Avatar for drumichael87

Ok experts... I need a second set of eyes. http://cahairandnails.com

The navigation won't link to anything. I have been staring at this for hours. Any ideas?

CSS:

#navi {width: 194px; text-indent: -9999px; float: left; }

#navi ul li {list-style-type: none; display: block; width: 194px;}
#navi ul li a {display: block; }
li.home {background: url(images/navi/home.png) no-repeat; height: 59px; display: block; }
li.pricing {background: url(images/navi/pricing.png) right top no-repeat; height: 54px;}
li.stylists {background: url(images/navi/stylists.png) right top no-repeat; height: 56px;}
li.savings {background: url(images/navi/savings.png) right top no-repeat; height: 56px;}
li.findus {background: url(images/navi/findus.png) right top no-repeat; height: 54px;}
li.contact {background: url(images/navi/contact.png) right top no-repeat; height: 56px;}
li.photos {background: url(images/navi/photos.png) right top no-repeat; height: 56px;}

HTML:

<div id="navi">
 <ul>
  <li class="home"><a href="index.htm">Home</a></li>
  <li class="pricing"><a href="#">Pricing</a></li>
  <li class="savings"><a href="#">Special Savings</a></li>
  <li class="findus"><a href="#">Find Us</a></li>
  <li class="stylists"><a href="#">The Stylists</a></li>
  <li class="contact"><a href="#">Contact</a></li>
 </ul>
</div>

P.S. no, that's not the final logo. heh

  • 3 Contributors
  • 7 Replies
  • 110 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by guyinpv
Member Avatar for teedoff

Is the name of your index file index.htm or index.html?

Member Avatar for guyinpv

Hey, upon first inspection it appears your logo image is going "over the top" of everything else. If you place your cursor over the text and try to drag as if to select text, it grabs the image instead.
This is the first problem.
What you want to do is make this image a background-image of the div instead of using <img> directly. Heck, you may even just make the image the background of the <body> itself, up to you how you do it. But since your image extends into other content, you don't want to use <img> like this because it's in front of everything. Maybe you can mess with z-index and what not, but background-image is the way to go.

2nd problem I see is with the style of links you use. You've placed your images as backgrounds on the <li> but this creates an odd shape to your link. In other words, your actual "clickable" space is the size of a row of text, NOT the size of the background image.
For this problem, do not make the image a background of the <li>, instead make the image into the content of the <a>, like this:

<li><a href="#"><img src="" alt="" /></a></li>

Then create CSS:
li img {border:0px;}

You need the CSS or your images will have a blue border around them because they are now a clickable link.

Mess with that and I'll be back to help if you need!

Member Avatar for drumichael87

Is the name of your index file index.htm or index.html?

index.php

Member Avatar for drumichael87

Hey, upon first inspection it appears your logo image is going "over the top" of everything else. If you place your cursor over the text and try to drag as if to select text, it grabs the image instead.
This is the first problem.
What you want to do is make this image a background-image of the div instead of using <img> directly. Heck, you may even just make the image the background of the <body> itself, up to you how you do it. But since your image extends into other content, you don't want to use <img> like this because it's in front of everything. Maybe you can mess with z-index and what not, but background-image is the way to go.

2nd problem I see is with the style of links you use. You've placed your images as backgrounds on the <li> but this creates an odd shape to your link. In other words, your actual "clickable" space is the size of a row of text, NOT the size of the background image.
For this problem, do not make the image a background of the <li>, instead make the image into the content of the <a>, like this:

<li><a href="#"><img src="" alt="" /></a></li>

Then create CSS:
li img {border:0px;}

You need the CSS or your images will have a blue border around them because they are now a clickable link.

Mess with that and I'll be back to help if you need!

THANKS!
I'm going to try putting the image directly into the UL and see what happens. The reason my logo image is like that is because I wanted the rays to shoot down past the end of the "header" div into the content. I would have used it as the body background, but I wanted to link the logo to the homepage, and I also wanted to make sure the green filled out the whole page no matter what size screen it's on.

Also, the text on the buttons is in the image, not on the page. I am going to try What you suggested here with the nav images and reply back. Thanks again!

Member Avatar for teedoff

So what did you change as they seem to be working now? I looked again at your lists code above and in your a href tags you are pointing your links to go to index.htm.

But then you said your home page was index.php and now your source code has the correct file extension in your links.

Member Avatar for drumichael87

So what did you change as they seem to be working now? I looked again at your lists code above and in your a href tags you are pointing your links to go to index.htm.

But then you said your home page was index.php and now your source code has the correct file extension in your links.

I used guyinpv's advice to put the image directly in the <li> instead of using a bgimage in CSS, and it works now.

I had all links pointing to "#" to just get the list set up. I didn't have any of the other pages set up yet, and in desperation trying to get the links to work, I just put anything on one of the anchors. Once I got the other pages set up, and guyinpv's advice worked, I put in all the correct hrefs. This wasn't contributing to the problem, though.

Now the other issue I need to deal with is what to do with the logo image.

Member Avatar for guyinpv

One thing you can try is to rearrange your DIVs. Split your image in two halves and put the top half as a normal <img> that links to the home page as you wanted. Then make the second half of your page another <div> with 2nd half of logo as background-image. Then your links and content and what not go in their <div>s within that one.

Otherwise I'm not sure if the z-index stuff will work to make the image "go to the back" as it is, instead of covering over everything else.

If this were my site, and I designed it in Photoshop or something, I would have spliced that logo this way, did a top half, as a link, and the bottom half as a background image behind the content.

You just have to stack and embed all your <div>s correctly.

Good luck!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.