0

私は Web ページをデザインしている途中で、次の CSS を使用して、メインヘッダー画像が 1000px 幅のページの中央に配置されたページヘッダーを作成し、本文の上部と下部を横切る繰り返しエッジ画像を作成しています。ブラウザのページ幅全体に広がるヘッダー。

body {
    font-family:  Tahoma;
    background-color: #0184AE;
    background-image: url('/images/headeredge.jpg');
    background-repeat: repeat-x;
    background-position: top;
    margin: 0;
    position: relative;
}

.whole-page {
    width: 1000px;
    margin: auto;
    padding: 0;
    text-align: left;
    position: relative;
    border-radius: 0 0 15px 15px;
}

.header {
    width: 100%;
    height: 120px;
    color: white;
    background-image: url('/images/header.jpg');
    background-repeat: no-repeat;
    font-size: 10pt;
    margin-top: 0px;
    margin-bottom: 0;
    padding-top: 10px;
    border: 1px black none;
    position: relative;
}

上記の CSS は、ツールバーが表示される場合を除いて機能します。SEO ツールバーで Chrome を使用しています。中央のヘッダー画像が正しく移動され、ツールバーの下に押し下げられるため、画像全体が表示されます。

ただし、繰り返されるボディ イメージはまったく移動せず、ツールバーは上部の非常に多くのピクセルをカバーしています。これにより、全体が台無しになります。

CSS でいくつかのオプションを試しましたが、今のところ何も機能していないようです。私はここで推測していますが、ツールバーは body タグの下に「存在する」CSS を使用して自分自身を描画すると思います。

誰でも何か提案できますか、ヘッダー全体を押し下げるかどうかを希望します。一貫性があるからです。

4

2 に答える 2

1

Chrome 開発者ツールを使用して (f12 を押す)、ツールバー要素を調べることができます (下部にある虫眼鏡アイコンをクリックします)。これを行うと、実際にドキュメントの本文に挿入されていることがわかります。残念ながら、これはあなたが見ている実際の動作になります。つまり、これはあなたのせいではなく、ツールバー開発者のせいです。

1 つの (醜い) 回避策は、コンテンツの周りに追加の div を配置し、それに背景を適用することです。

例えば

HTML

<body>
    <div id="notBody">
      <!--Rest of your headers, content, etc here -->
    </div>
</body>

CSS

body {
font-family:  Tahoma;
background-color: #0184AE;    
margin: 0;
position: relative; 
}


#notBody {   
background-image: url('/images/headeredge.jpg');
background-repeat: repeat-x;
background-position: top;

}
于 2013-02-21T04:30:48.823 に答える
0

ヘッダークラ​​スでを変更しposition: absolute;、を使用topして、ページの上部からヘッダーを何ピクセルにするかを設定します。

.header {
    position: absolute;

   /* all your other styles */

    top: 200px;
}
于 2013-02-21T03:42:07.633 に答える