Why are my image hyperlinks not working?

Question

I can't seem to figure out why my hyperlinks are not working. The images supposed to be the link to other html files. If you need more information please let me know: I have also uploaded the file here: http://emmasteed.co.uk/new/ is the large buttons at the bottom.

<div class="largemenubutton"><a href="portfolio.html"><img src="images/portfolio.png" alt="Portfolio" border="0" /></a></div>
    <div class="largemenubutton"><a href="contact.html"><img src="images/getintouch.png" alt="Contact me!" border="0" /></a></div>
    <div class="largemenubutton"><a href="aboutme.html"><img src="images/aboutme.png" alt="About" border="0" /></a></div>

.largemenubutton {
    width:283px;
    height:259px;
    margin-top:20px;
    float:left;
    display:block;
    text-align:center;
}

Answer 1

What folder are the docs located in? Your href tag indicates that it will look in the current directory for the document

For instance, if the document directory is one directory up, you would use the following syntax:

<a href="../profile/portfolio.html">

or you could use the absolute path:

<a href="http://example.com/somedirectory/profile/portfolio.html">

Answer 2

Make sure your are using the correct path in the a href tag. You are using:

aboutme.html

Which should mean that your file should be in the current directory.

Other than that, it seems to work fine here:

http://jsfiddle.net/LG2vz/

Here is a brief description of other file paths:

./ means the current directory

../ means the parent of the current directory, not the root directory

/ is the root directory

myfile.text is in the current directory, as is ./myfile.text

../myfile.text is one level above you and /myfile.text lives in your root directory.

EDIT

Child element cannot be stacked below parent element, even by using z-index .

Use z-index for maintaining stack level of absolute positioned elements that are siblings.

Change z-index in .mainimage . You need to add px after the -1

.mainimage {
    width: 850px;
    height: 423px;
    background-color:#ffffff;
    position:absolute;
    top:220px;
    float:left;
    z-index:-1px;
}

Add z-index to .largemenubutton

.largemenubutton {
    width:283px;
    height:259px;
    margin-top:20px;
    z-index: 0;
    float:left;
    display:block;
    text-align:center;
}

Answer 3

I have finally managed to figure a way round this. I would like to thank everyone for their answers and advice as without this I probably would never have found this solution. The z-index setting on the previous div was the problem I had to get round.

Basically i created another div tag to contain my large menu buttons and placed this outside of the previous div which held my slider image which was set at z-index -1 as i wanted my image to sit behind a drop shadow above. This then allowed the links on the images to work.

Hope this makes sense and helps anyone else who has this problem.