0

Dreamweaver CS6 を使用して CSS で垂直ナビゲーション バーを設定しようとしていますが、CSS に非常に慣れておらず、最近までバージョン 3 から Dreamweaver を使用していませんでした。このナビゲーション バーの上部、中央、および下部の画像に個別のクラスがあります。この手法を使用して、各ボタンの div 全体をリンクにしました。

中央のボタンは、デザイン ビュー、ライブ モード、およびブラウザー プレビューで問題なく表示されます。ただし、上下のボタンはデザイン ビューでのみ表示されます。ホバー状態とアクティブ状態は、すべてのボタンで正常に機能します。すべてのファイル パスを再確認し、Dreamweaver のキャッシュをクリアして、Dreamweaver を再起動しました。

なぜこれが起こるのでしょうか？どうすれば修正できますか？

関連するソースコードは次のとおりです。12 列の960 グリッドシステムを使用しています。

<!-- This is inside a container_12 div with the site's header/navigation, then a clear, then an <h3> -->
<div class="container_12">
    <!-- Header with site's logo and navigation goes here -->

    <div class="clear"></div>

    <h3>Page header</h3>

    <div class="grid_9 prefix_2 suffix_1">
        <!-- Several paragraphs of copy using <p> tags -->

        <div class="homePageVerticalButtonTop">
            <div class="verticalNavigationText"><a style="display:block" href="top.html">top link</a></div>
        </div>
        <div class="homePageVerticalButtonMiddle">
            <div class="verticalNavigationText"><a style="display:block" href="middle1.html">middle link 1</a></div>
        </div>
        <!-- Several more middle links -->
        <div class="homePageVerticalButtonBottom">
            <div class="verticalNavigationText"><a style="display:block" href="bottom.html">bottom link</a></div>
        </div>
    </div>
</div> <!-- end container_12 -->

関連する CSS は次のとおりです。

.homePageVerticalButtonTop {
    /* Why is the background not showing up? */
    background: url(../images/homePageTopButton_normal.png) no-repeat left top;

    width: 24.125em;
    height: 4.125em;
    background-size: 100%;

    display: block;
}

.homePageVerticalButtonTop:hover {
    /* This works fine */
    background: url(../images/homePageTopButton_mouseOver.png) no-repeat left top;
    width: 24.125em;
    height: 4.125em;
    background-size: 100%;
}

.homePageVerticalButtonTop:active {
    /* So does this */
    background: url(../images/homePageTopButton_mouseDown.png) no-repeat left top;
    width: 24.125em;
    height: 4.125em;
    background-size: 100%;
}

.homePageVerticalButtonMiddle {
    /* And so does the rest of these even though homePageVerticalButtonMiddle and homePageVerticalButtonTop are analogous cases and both PNGs are there. */
    background: url(../images/homePageMiddleButton_normal.png) no-repeat left top;
    width: 24.125em;
    height: 4.125em;
    background-size: 100%;
}

.homePageVerticalButtonMiddle:hover {
    background: url(../images/homePageMiddleButton_mouseOver.png) no-repeat left top;
    width: 24.125em;
    height: 4.125em;
    background-size: 100%;
}

.homePageVerticalButtonMiddle:active {
    background: url(../images/homePageMiddleButton_mouseOver.png) no-repeat left top;
    width: 24.125em;
    height: 4.125em;
    background-size: 100%;
}

/* Bottom omitted for brevity, but it's analogous to Top and only works on the hover and active states too. */

.verticalNavigationText {
    color: #FFFFFF;
    font-family: inherit;
    font-size: 1.75em;
    padding: 0.59375em 0 0.59375em 0.625em;
}

編集：これらの画像が欠落している理由に対処して、トピックに関する回答を保管してください。

4

1 に答える 1

3

Dreamweaver は、プレビュー用に信頼されるべきではありません。また、Dreamweaver 自体の動作は関係ありません。他のすべてのユーザーはブラウザーを使用するからです。そうは言っても、デザインパターンには少し注意が必要です。

<div class="homePageVerticalButtonTop">
    <div class="verticalNavigationText"><a style="display:block" href="top.html">top link</a></div>
</div>

より明確に次のように表現できます。

<div class="homePageVerticalButtonTop">
  <a href="top.html">top link</a>
</div>

リンクに適用する CSS は、次のように表現できます。

.homePageVerticalButtonTop a {
     display:block
}

...そして、冗長な「verticalNavigationText」div に適用されるスタイルなど、リンクのその他のスタイルをそこに配置する必要があります。インライン CSS は避けてください。

于 2012-07-26T20:25:05.410 に答える