1

私はこの問題に数日間苦労しています.CSSドキュメントで可能なすべてのプロパティを変更しようとしましたが、どれも機能していないようです.

サイト: http://www.mohrdevelopment.com

問題はナビゲーションバーにあります。

  1. 問題: 削除したいすべてのボタンの間に間隔/ギャップがあります

  2. 問題: すべてのボタン (ホーム ボタンを除く) が、カーソルを合わせたときにナビゲーション バーの背景を超えて拡大します。ナビゲーション バーの高さは 40px です。

これは、バーの HTML コーディングです。

<div class="wrap">

        <ul class="navigation">
            <li class="current"><a href="index.html"><em class="home"/><b>Home</b></a></li>
            <li><a href="second.html"><em class="photos"/><b>Photos</b></a></li>
            <li><a href="projects.html"><em class="projects"/><b>Projects</b></a></li>
            <li><a href="about.html"><em class="about"/><b>About</b></a></li>
            <li><a href="contact.html"><em class="contact"/><b>Contact</b></a></li>
        </ul>

そして、これは私のCSSコードです:

body {
        font-family:sans-serif;
        background: url(images/background3.png);
    }

    .navigation {
        background:#1841c8 url(Navigation/Navigation/nav_background.png);
        height:40px;
        margin-bottom:0px;
        display:block;
        min-width:625px;
    }

    .navigation li{
        display:inline-block;
        line-height: 40px;
            }

    .navigation li a{
        color:#FFFFFF;
        padding: 11px 5px 15px;
    }

    .navigation li a em{
        height:32px;
        display:inline-block;
        padding: 0 5px 6px 50px;
        font-weight:bold;
        vertical-align: middle;
        background-position: 0 50%;
    }

    .navigation li a:hover{
        color:#00CCFF;
        background: url(Navigation/Navigation/nav_hover.png);
        text-decoration:none;
        padding: 11px 5px 10px;
    }

    .navigation .current a {
        color:#FFFFFF;
        background:url(Navigation/Navigation/nav_hover.png);
        padding-bottom:11px;
    }


    /*Navigation bar icons*/
    .navigation li a em.home {
        background-image: url(Navigation/Icon_images/home.png);
        background-repeat: no-repeat;

    }

    .navigation li a em.photos{
        background-image: url(Navigation/Icon_images/Photo.png);
        background-repeat: no-repeat;
    }


    .navigation li a em.projects{
        background-image: url(Navigation/Icon_images/projects.png);
        background-repeat: no-repeat;
    }


    .navigation li a em.about{
        background-image: url(Navigation/Icon_images/about.png);
        background-repeat: no-repeat;
    }

    .navigation li a em.contact{
        background-image: url(Navigation/Icon_images/Contact.png);
        background-repeat: no-repeat;
    }



    .wrap {
          margin:auto;
          width:80%;
          background:yellow;
        }

誰かがこの問題で私を助けてくれることを願っています.私はそれをトラブルシューティングしたり解決策を探したりするのに何時間も費やしました.

4

3 に答える 3

1

liあなたの問題は、要素間の空白から来ています。数日前に同じ問題に対する質問に答えました。見てみましょう - >マージンなしのインラインブロック？

于 2012-07-21T18:10:43.930 に答える
0

@Jonas Pedersen、floatプロパティを使用してみましたliか？

私はちょうどあなたのウェブサイトをチェックし、firebug を少し調整しました。ナビゲーション CSS のために変更しようとしたものは次のとおりです。

.navigation {
    background:#1841c8 url(Navigation/Navigation/nav_background.png);
    height:65px; /*add more height (was 40px)*/
    margin-bottom:0px;
    display:block;
    min-width:625px;
}

.navigation li{
    display:inline-block;
    line-height:40px;
    float:left; /*add 'float' property for the navigation menu*/
}

li {
    list-style: none outside none;
    margin-bottom: 20px; /* delete this property */
}

さて、ここに要約があります：

  1. heightさらに追加.navigation
  2. float: leftのために追加.navigation li
  3. {style.css : line 146}margin-bottomから を削除しますli

うまくいけば、それはあなたを助ける...

于 2012-07-22T09:49:41.983 に答える
0

メニューボタンの隙間を修正

.navigation li a {
    color: #FFFFFF;
    display: block;
    padding: 2px 0 15px;
}
于 2012-07-21T19:34:48.283 に答える