0

水平ナビゲーション バーの位置を、いわば、スケーラブルな背景画像と「同期」させようとしています。現在、ブラウザのサイズを変更すると画像が自由に移動するのに対し、ナビゲーションは静的に配置されているようです。正直なところ、これが本当に可能かどうかはわかりません。サイトのホームページは次のとおりです。

www.nickducot.com/parker_new/

これまでに得たコードは次のとおりです。

HTML: http://pastebin.com/TjJprLAv

CSS http://pastebin.com/jzYRQPt2

メディアクエリ/レスポンシブデザインが役立つでしょうか? ありがとうございました！

4

1 に答える 1

0

これを行う方法の 1 つの大まかな概要を次に示します。背景としてではなく、マークアップに画像を配置する必要があります。

HTML

<div class="image-wrapper">
    <img src="imagefile.jpg">
    <div id="menu">
        ... menu
    </div>
</div>

CSS

.image-wrapper {
    width: 85%;
    max-width: 700px;
    /* Note the above numbers are untested and plucked out of thin air for example purposes */
    position: relative;
    margin: 30px auto;
}
.image-wrapper img {
    max-width: 100%;
}
#menu {
    position: absolute;
    top: 100px;
    right: 0;
}

編集: メニューのサイズは実際には変更されませんが、画像の特定のポイントに固定されることに注意してください。また、目的の効果を実現するために使用したすべてのピクセル値をいじる必要があります。

于 2013-06-09T12:17:40.543 に答える