Reputation: 149

Why aren't my links working?

I have some pretty simple code. The link were working a second ago and now not! (Already checked and emptied cache).

Here's my site: http://claireisabelwebb.com/index.html The nav bar on the side should go to http://claireisabelwebb.com/experiments.html, etc. The links should turn italic on hover, and a different color after they're visited.

Here's the CSS:

/* Link Styles***********************************************************************/

#home_link a:link{
        font-family: 'Lato', sans-serif;
        color: #330066;  
        text-decoration: none;
        font-size: 115px;
        font-weight: 100;
        text-align: left;
        letter-spacing: -28px;
}

#home_link a:visited{
        font-family: 'Lato', sans-serif;
        color: #330066;  
        text-decoration: none;
        font-size: 150px;
        font-weight: 100; 
        text-align: left;
        letter-spacing: -28px;
}

#main_menu a:link{
        font-family:'Lato', sans-serif;
        font-size: 30px;
        font-weight: 100; 
        color:#336699;
        text-decoration: none; 
        text-align: left;
        letter-spacing:0.2em;
}

#main_menu a:visited{
        font-family: 'Lato', sans-serif;
        font-size: 30px;
        font-weight: 100;
        color:#005522;
        text-decoration: none; 
        text-align: left;
        letter-spacing:0.2em;
}

#main_menu a:hover{
        font-family:'Lato', sans-serif;
        font-style: italic;
        font-size: 30px;
        font-weight: 100; 
        color:#CC0066;
        text-decoration: none; 
        text-align: left;
        letter-spacing:0.2em;
} 

#sec_menu a:link{
    font-family:'Lato', sans-serif;
        font-weight: 100; 
        color:#CC0066;
        text-decoration: none;
        font-size: 16px; 
        text-align: left;
        letter-spacing:0.2em;
}

#sec_menu a:visited{
        font-family:'Lato', sans-serif;
        font-weight: 100; 
        color:#005522;
        text-decoration: none;
        font-size: 16px; 
        text-align: left;
        letter-spacing:0.2em;
}

#sec_menu a:hover{
        font-family:'Lato', sans-serif;
        font-style: italic;
        font-size: 16px;
        font-weight: 100; 
        color:#CC0066;
        text-decoration: none; 
        text-align: left;
        letter-spacing:0.2em;
}

And the html:

<!-- Main Navigation Menu ______________________________________________-->

    <div id="main_menu" class="main_wrapper_nav_box">
        <div id="sec_menu">
            <div class="main_page_nav_box">
                <a href="Experiments.html">EXPERIMENTS</a>
            </div>
            <div class="main_page_nav_box">
                <a href="writing.html">WRITING</a> 
            </div>
            <div class="main_page_nav_box">
                <a href="photography.html">PHOTOGRAPHY</a>
            </div>
            <div class="main_page_nav_box">
                <a href="graphics.html">GRAPHICS</a>
            </div>
            <div class="main_page_nav_box">
                <a href="artwork.html">ART WORK</a>
            </div>
            <div class="box_sec_nav_ms">
                <a href="artwork.html">Modernist Summer</a>
            </div>
            <div class="box_sec_nav_r">
                <a href="resume/Claire-Webb.pdf">R&#233;sum&#233;</a>
            </div>
        </div>
    </div>

Thank you in advance!

Upvotes: 0

Answers (5)

jhunlio

Reputation: 2660

you can solve your problem if it is ok instead of float:left in .main_wrapper_nav_box change it relative:position and add z-index:1;

.main_page_nav_box{
        display:block;
        position:relative;
    z-index:1;
        background: rgba(255,255,255,.85);
        width:200px;
        text-align: center;
        height: 25px;
        padding:10px 10px 10px 10px;
        border:0px ;
        margin-top:10px;
        margin-left:10px;
}

working demo

hope this help...

Upvotes: 2

lemil77

Reputation: 341

This DIV is and blocking clicks..

<div class="wrapper_text_photo">....</div>

You can try to put it under the links with CSS..

.wrapper_text_photo { z-index: -100;}

Upvotes: 0

Brad

Reputation: 163301

Your #wrapper_text_photo div is on top of your navigation. If you re-work that, your navigation will work.

By the way, you can find issues like this yourself by using your browser tools. I recommend using Google Chrome's developer tools, or Firebug in Firefox, and mousing over the different elements in your page to see what space they are taking up. You can then remove elements to see the effect real-time. (See the blue area below)

Debugging Example