Question

I am interested in making the hover-over buttons on my website clickable, but don’t know how. My website is here: http://mathisbeauty.org/

The relevant code for the page itself looks like

<div id="bar">
    <div class="menuLink"><a href="index.html">Home</a></div>
    <div class="menuLink"><a href="videos.html">Videos</a></div>
    <div class="menuLink"><a href="articles.html">Articles</a></div>
    <div class="menuLink"><a href="links.html">Links</a></div>
    <div class="menuLink"><a href="aboutme.html">About me</a></div>
</div>

and the CCS is (I believe!)

.menuLink
{
    height:36px;
    width: 120px;
    text-align:center;
    float:left;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    color:#252F33;
    padding-top:19px;
}
menuLink:hover
{
background: url(bar2.png) repeat-x;
}

Any help much appreciated.

Answer 1

Your links are clickable, the problem is that it is just the text that is currently a link. You just need to make the anchor the same size as the container they sit in .menuLink.

Add the following css and it should work..

.menuLink a {
    height: 36px;
    width: 120px;
    display: block;
}

Edit:

Use this instead, should give you the full box. To be honest I didn’t notice the top half not being included.

.menuLink a {
    height: 57px;
    width: 120px;
    display: block;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 18px;
}