0

私はかなり単純なコードをいくつか持っています。リンクは 1 秒前に機能していましたが、現在は機能していません。（すでにチェックされ、キャッシュが空になっています）。

これが私のサイトです: http://claireisabelwebb.com/index.html 横のナビゲーション バーはhttp://claireisabelwebb.com/experiments.htmlなどに移動する必要があります。ホバーするとリンクがイタリック体になり、別の色になります。彼らが訪問した後。

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;
}

そして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>

前もって感謝します！

4

5 に答える 5

2

変更して追加するのfloat:leftではなく、問題がなければ問題を解決できます.main_wrapper_nav_boxrelative:positionz-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;
}

動作デモ

これが役立つことを願っています...

于 2013-03-15T04:11:41.307 に答える
1

div#wrapper_text_photoはナビゲーションの上にあります。それをやり直すと、ナビゲーションが機能します。

ちなみに、このような問題は、ブラウザ ツールを使用して自分で見つけることができます。Google Chrome の開発者ツール、または Firefox の Firebug を使用し、ページ内のさまざまな要素にマウスを合わせて、それらが占有しているスペースを確認することをお勧めします。その後、要素を削除して、効果をリアルタイムで確認できます。(下の青い部分を参照)

デバッグ例

于 2013-03-15T03:56:33.280 に答える
0

削除する必要がありwidth:1000px;、リンクが機能することを確認してください。wrapper_text_photo

In style.css line number 132
于 2013-03-15T03:56:28.743 に答える
0

この DIV は、クリックをブロックしています..

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

CSSを使用してリンクの下に配置することができます..

.wrapper_text_photo { z-index: -100;}
于 2013-03-15T03:56:41.113 に答える
0

クラスを含むdivが画像を覆っています..そのクラスにwrapper_text_photoはcssプロパティを使用してくださいz-index=-1

于 2013-03-15T04:00:44.540 に答える