Can anyone tell me what I am or am not doing? I've read every tutorial I could find and the images just don't appear. As a matter of fact, the CSS in the html file is from one of those tutorials; there's just got to be something I missed I've attached the html file.

The images are located in the Menu folder as displayed below:

TacomaGames
Forms
images
Menu
Results
(the page is listed under the main folder Tacoma Games)


If needed, I can upload the page to a site.
Thank you;

Hi Greg,
Can you upload to a sub directory so some peeps can have a look see

Ok, The url is http://www.tacomagames.org/

Look for "2011 Chieftain of the Games:", the link to the page in question is attached to the colon ":".

What I'm trying to do is replace the image map you see on the left of the page used for navigation with CSS. The four images you see are from the <img src=""> tag.

Thank you for your help.

Greg, I'm not certain I understand what you want. But check out the changes I've done to number one and two in your code:

Was this what you wanted to achieve?

have a look at the css tags in the style sheet, there is an error.


-----------
The closing bracket is missing should be :-

Hi Inger and Jim;

Thanks for your help on this matter. Need to upgrade my eyeglass prescription, can't believe I missed that ending brace!

What I'm trying to accomplish is to replace the image map with CSS. the <map></map> works but it is also starting to become cumbersome.

However; it is starting to look like CSS may not be what I want either. I'm beginning to think that I should stay with the current <map> or resort to javascript / DHTML?

Oh, BTW,, the images were supposed to be touching
Thoughts?

That will have to be done in the CSS. Gimme some time, and I'll have a look at it...

If you remove the 50px padding-bottom from the bigbuttons li:



Then the images will touch.

But you have now 'one' and 'two' with background images, and the rest have images inserted, but no links. You have to check your css and make it consistently.

OK, update:

First, I changed the <ul></ul> to <div></div>, one for each page link (there are 16 of them). This solved my situation with the buttons being separated.

At this point, I was getting the results I wanted, i.e. when the cursor hovered over a button the button back ground changed from a dark blue to light yellow

The final line count for the script turned out to be 536 lines so, I created an external style sheet and saved it in a "Styles" folder.

This is where I'm stuck now.

The html page is in the main folder: TacomaGames
The new CSS style sheet is in a child folder under the main folder: TacomaGames/Styles
The button images are in another child folder under the main folder: TacomaGames/Menu

TacomaGames <== main folder
Menu <== this is a sub folder which holds the button images
Styles <== this is a sub folder which holds the navigation CSS file: THGnav.css


I thought that when referencing a file from one folder to another folder the url would be written '../file/button'; however, when I changed the link url to reflect the file locations:
background-image: url(../Menu/gamesmenub1over.gif) no-repeat;
then hover the cursor over the button, all that happens is the main image disappears which is the expected result, but the image that should have appeared in its place does not; all I see is an empty space

Am I getting the url link wrong?

Thank you;
Greg

Hmmm; can't seem to edit what I post? Anyway, in my last message, I forgot to mention that I'm trying two different methods. The last message is tryout number two using an external link and <div> tags instead of <li>.

Both methods work, but I'm obviously doing something wrong when I type the url in the external link?

Greg