CODEWITHSUNDEEP
html
tricky
tricky

Reputation: 5

html links are not working? Tried various file paths

Wondering if someone can tell me why my links are not working. I have tried directly using the file path but still no luck.

Im not sure whether it is the css or the html link. Code snippets below.

HTML

<div id="menu">
    <ul>
        <li class="active"><a href="cooking.html" accesskey="1" title="Homepage">Homepage</a></li>
        <li><a href="cookeryclasses.html" accesskey="2" title="Classes">Classes</a></li>
        <li><a href="cookeryaboutus.html" accesskey="3" title="About">About Us</a></li>
        <li><a href="http://www.abbeywoodprojects.co.uk/contact.html" accesskey="4" title="Contact">Contact</a></li>
    </ul>
</div>

CSS

#menu {
    float: right;
    width: 600px;
    height: 99px;
}

#menu ul {
    float: right;
    margin: 0px;
    padding: 70px 0px 0px 0px;
    list-style: none;
    line-height: normal;
}

#menu li {
    float: left;
    margin-left: 3em;
}

#menu a {
    display: block;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Archivo Narrow', sans-serif;
    font-size: 1.10em;
    font-weight: 600;
    color: #B6B6B6;
}

#menu .active a
{
    color: #FFFFFF;
}

#menu a:hover {
    text-decoration: underline;
}

Thankyou in advanced

Added a jsFiddle: http://jsfiddle.net/jSgPR/

Upvotes: 0

Views: 237

Answers (3)

Nick R
Nick R

Reputation: 7784

Your links work fine, but the :before element is appearing on top of the links.

This bit of CSS is appearing over the top of the menu, and thus making the links not clickable:

#banner:before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    /*background: url('images/gradient-bg.png') no-repeat right top;*/
    background-size: 100% 100%;
    top: 0px;
    right: 0px;
}

You can fix this by adding the following to your CSS file

position:relative; z-index:10;

Add these to #menu and you'll be able to hover and click on the navigation links.

Upvotes: 1

aBhijit
aBhijit

Reputation: 5361

Check this fiddle. Everything will work. http://jsfiddle.net/jSgPR/1/

<a href="absoluteurl"></a>

Upvotes: 0

cptnk
cptnk

Reputation: 2420

you have to have:

  • cooking.html
  • cookeryclasses.html
  • cookeryaboutus.html

in the same Folder as the php file your using if you use only Filenames and no Paths.

Upvotes: 0

Related Questions