0

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;
}
Cœur
  • 37,241
  • 25
  • 195
  • 267
user3714234
  • 63
  • 7

3 Answers3

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">

bitwisebytefoolish
  • 46
  • 7
0

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;
}
imbondbaby
  • 6,351
  • 3
  • 21
  • 54
  • I have uploaded the page here: http://emmasteed.co.uk/new/ and it is still not working? The links are not even showing when you hover over the images. – user3714234 Jun 20 '14 at 22:29
  • Try this ../aboutme.html. Use ../ before your links because you have not uploaded the files into the new directory. You uploaded them into the parent directory – imbondbaby Jun 20 '14 at 22:32
  • Two ways now... Change `a href` to complete links like ``. Or just move the contact.html files over to the new folder and then use the same code you already have in your question – imbondbaby Jun 20 '14 at 22:39
  • but why does the link not show at all? If the files were in the wrong place it would just show as link broken? When you roll over you do not even get given the option to click as if it were a hyperlink. – user3714234 Jun 20 '14 at 22:45
  • It does work fine for me... I can click it just fine but the link is just not working... Here is a screenshot http://oi58.tinypic.com/a9vgo.jpg.. Might be something wrong on your end. (Using IE cause I am work :p) – imbondbaby Jun 20 '14 at 22:49
  • You have clicked on the links in the menu that is not what I mean. I am referring to the images at the bottom: Portfolio, Get in touch, About me – user3714234 Jun 20 '14 at 22:52
0

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.

user3714234
  • 63
  • 7