0

適切な言い回しの仕方が特にわからないという質問があるので、適切な用語が不足していることを事前にお詫びします。私がやろうとしているのは、ヘッダー画像を左に揃えることです - left:0px; - 位置付き:絶対; そのため、ページがさまざまなサイズの画面に読み込まれると、常にブラウザ ウィンドウの左側に固定されます。しかし同時に、ヘッダー画像がページの左側に配置されているときに、より大きなサイズの画面に読み込まれたときにヘッダー画像を停止したい(これが理にかなっている場合)。ページは以下です。

http://tinyurl.com/d2zttye

BREAKWATER 画像をページのサイズ変更に合わせてフロートさせたいが、その下の背景画像 (#page div) に出会うと停止する。そのため、背景画像のサイズ (1592 ピクセル) よりも大きいウィンドウに読み込むと、左に浮きません。現在のところ、ページ サイズに合わせて浮動せず、小さい画面では途切れます。

うまくいけば、これは理にかなっています。何か明確にする必要がある場合はお知らせください。どんな助けでも大歓迎です！

ありがとう！！！

4

1 に答える 1

1

理解した！@media screenを使用することで、ブラウザウィンドウが1592pxより小さく1593pxより大きい場合に、ヘッダーがページ上でどのように配置されるかを定義できました。#bwheaderはdivであり、ウィンドウが1592pxより小さい場合、10pxの左パディングでブラウザの左にフロートします。ウィンドウが1593pxより大きい場合、固定されたままになります（ただし、position：absoluteを使用し、負のマージンと50％左を使用してdivを中央に配置します）。これがそれを必要とする人に役立つことを願っています！

@media screen and (max-width: 1592px) 
 {
    #bwheader{
    position:absolute;
    top:0px;
    height:74px;
    float:left;
    padding-left:10px;
 }
}

@media screen and (min-width: 1593px) 
 {
    #bwheader{
    position:absolute;
    top:0px;
    width:1592px;
    margin-left:-796px;
    left:50%;
    height:74px;
 }
}
于 2012-04-08T03:29:49.150 に答える