Why are my image hyperlinks not working? - html

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"><img src="images/portfolio.png" alt="Portfolio" border="0" /></div>
<div class="largemenubutton"><img src="images/getintouch.png" alt="Contact me!" border="0" /></div>
<div class="largemenubutton"><img src="images/aboutme.png" alt="About" border="0" /></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.