0

これは基本的に、私が現在直面している問題http://jsfiddle.net/NCJeP/です。

HTML

      <nav>
    <ul id="city-navigation">
        <li><a href="../chennai/" class="active">Chennai</a></li>
        <li><a href="../trichy/">Trichy</a></li>
        <li><a href="../madurai/">Madurai</a></li>
        <li><a href="../coimbatore/">Coimbatore</a></li>
        <li><a href="../salem/">Salem</a></li>
    </ul>
    </nav>​

CSS

#city-navigation {
    width: 100%;
    position: relative;
    left: 10px;
}

#city-navigation li a {
    float: left;
    font: 14px Rockwell, Georgia, Times, “Times New Roman”, serif;
    margin: 20px 20px;
    color: #FFF;
}

#city-navigation li a:hover {
    background-image: url(http://i.imgur.com/QVzKG.png);
    background-repeat: no-repeat;
    color: #000;
    width: 116px;
    height: 60px;
    display: block;
    text-align: center;
    position: relative;
    z-index: 4;
}

#city-navigation .active {
    background-image: url(http://i.imgur.com/HbLa1.png);
    background-repeat: no-repeat;
    color: #000;
    width: 116px;
    height: 60px;
    display: block;
    text-align: center;
}​

背景画像が余分な幅を追加するため、テキストが右に移動するのを止める方法がわかりません。十分なスペースがあることはわかっていますが、画像とテキストを静的にしたいだけです。

誰かが助けてくれるなら、私はとても感謝しています! =) 乾杯！

4

3 に答える 3

2

ホバーの幅がジャンプを引き起こしています。「a」タグに移動し、他のコードも少しクリーンアップしました。

#city-navigation li a {
    float: left;
    font: 14px Rockwell, Georgia, Times, “Times New Roman”, serif;
    margin: 20px 20px;
    color: #FFF;
    display: block;
    text-align: center;
    width: 116px;
    height: 60px;
}
#city-navigation li a:hover {
    background: url(http://i.imgur.com/QVzKG.png) no-repeat;
    color: #000;
}
#city-navigation .active {
    background: url(http://i.imgur.com/HbLa1.png) no-repeat;
    color: #000;
}
于 2012-10-23T04:48:55.560 に答える
1

#city-navigation .activeおよびから width プロパティを削除し#city-navigation li a:hoverます。これにより、リスト項目にカーソルを合わせたときに幅が増加します。

あなたのCSSコードは次のようになります

body {
    background-color: red;
}

#city-navigation {
    width: 100%;
    position: relative;
    left: 10px;
}

#city-navigation li a {
    float: left;
    font: 14px Rockwell, Georgia, Times, “Times New Roman”, serif;
    margin: 20px 20px;
    color: #FFF;
}

#city-navigation li a:hover {
    background-image: url(http://i.imgur.com/QVzKG.png);
    background-repeat: no-repeat;
    color: #000;
    height: 60px;
    display: block;
    text-align: center;
    position: relative;
    z-index: 4;
}

#city-navigation .active {
    background-image: url(http://i.imgur.com/HbLa1.png);
    background-repeat: no-repeat;
    color: #000;
    height: 60px;
    display: block;
    text-align: center;
}​
于 2012-10-23T04:45:58.037 に答える
1

このようにしてください：私のフィドル

私はあなたのためにクリーンアップしていないと思いましたがinline-block、ナビゲーションの周りの不要なマージンを使用して削除します..

CSS

body {
    background-color: red;
}

#city-navigation {
    width: 100%;
    position: relative;
    left: 10px;
}

#city-navigation li a {
    float: left;
    font: 14px Rockwell, Georgia, Times, “Times New Roman”, serif;
    margin: 20px 0px;
    color: #FFF;
    display: inline-block;
    width: 116px;
    text-align: center;
}

#city-navigation li a:hover {
    background-image: url('http://i.imgur.com/QVzKG.png');
    background-repeat: no-repeat;
    color: #000;
    width: 116px;
    height: 60px;
    display: inline-block;
    text-align: center;
    position: relative;
}

#city-navigation .active {
    background-image: url('http://i.imgur.com/HbLa1.png');
    background-repeat: no-repeat;
    color: #000;
    width: 116px;
    height: 60px;
    display: block;
    text-align: center;
}
于 2012-10-23T04:51:45.683 に答える