2012-04-08 9 views
0

長すぎる話ですが、私のクライアントは私に、100%幅のヘッダーラッパーと呼ばれるデザインと、ロゴは1300ピクセル幅です。幅と固定された内部幅の問題

たとえば、私の23インチの画面では、その細かいことは、小さな画面では、大きなギャップがあり、ラッパーdivの内側のdivがすべて整列していないことを示しています。例えばので

は、内側のdivがREDで、我々は2つのdivを持っていると言う、外側のdivはダークブルーで、背景には、大きな画面で、GREENですが、私は(私が欲しいものです)これを取得

------------------------------------------------------------------- 
    |  -----------------------------------|       | 
    |  |         |   end Of window->|   
    |  |red centered in the middle(1300px wide) green **not** seen| 
    |  -----------------------------------       | 
    |  wrapper header div @ 100% (DARKBLUE)      | 
    | ------------------------------------------------------------------ 

今ヘッダラッパー DIVは、小さな画面上で今100%

あるため、この上の例で、ヘッダに、あなたは緑を参照カント、my13'mac/iPhone /サミータブレットのような例えば

私これを取得する

------------------------------------------------------------------------------| 
-----------------------------------|  |         | 
|         |  |  endOf parent header div  | 
|  red       |  | <--pushed all the way left  | 
-----------------------------------  |         | 
    wrapper header div @ 100% (DARKBLUE) |   GREEN     |         
------------------------------------------------------------------------------| 

だから何イムを説明しようとすると、小さな画面上で、中央のdivがすべての道が残って押し込まれ、緑が示されている、ということです....

任意のアイデアを理由として?もう一度すべての大きな画面で、小さなもので、細かいものは、それは壊れます...

私はこれらに適用されている非常に簡単です。

RED DIVである:

#topRow{ 
    width:100%; 
    height:120px; 

    background-image:url(../../images/menuStripBg.png); 
    background-repeat:repeat-x; 

} 

内DIV(DARKBLUE)である:

#topRowInner{ 
    min-width:1300px; 
    margin:0px auto;  
} 

今IM 問題が幅 ので、小さな画面上で、ということであることを仮定内部(ダークブルー)のdivは1300pxです。小さな画面の解像度が1300より 以下であることを、100%の画面は本質的に、それをスローし、その1300親ラッパー100%が1300未満の場合カントセンター .....

わかりませんそれが意味をなさないのであれば....

いずれにしても、これが問題であれば、これを回避する方法はありますか?

もし問題でなければ、ヒント/ヒントなど私は喜んで感謝します。

ありがとうございました。

+0

ラッパーdivの 'min-width'を' 1300px'に設定し、ロゴdivの 'width'を' 1300px'に設定しようとしましたか?これにより、ラッパーはウィンドウを埋めるように拡張され、ロゴの幅より小さく縮小されることはありません。 – ryanwachtl

+0

あなたのASCIIアートと説明はお互いに矛盾しています。どちらが青で、どちらが赤ですか? – NGLN

答えて

1

あなたのアスキー-例を仮定し、あなたの質問のさらなる説明を無視して、私はあなたが(広げ、窓を狭める)this solutionような何かを探していると思います。

また、独自のCSSのようmargin: 0 auto;topRowInnerのdivからpositionleftmargin-leftスタイルを置き換えることができますが、ウィンドウは1300個のピクセル、その後小さいとき、それはそれを中央にしません。

関連する問題