「耳」のレイアウト

多くの場合、サイトのレイアウトを開発する人の想像力は幅1024ピクセルに限定されず、サイトはすべての解像度で適切に見え、デザイナーの考えに一致する必要があります。



問題は、次のようにグラフィカルに表すことができます。





レイアウトタスクは次のとおりです。

• -解像度（ブラウザのサイズ）に関係なく、サイトの有益な部分は中央にありました。
• -グラフィックブロック（耳）は左右に残り、これらの耳はブラウザの画面サイズが大きくなった場合にのみ表示され、サイズが小さい場合は、不適合部分が非表示になります（理想的には、水平スクロールバーがまだないようにします）;;
• -ページは680ピクセルから1000ピクセルまでのゴムである必要があります。

FF3、FF4、IE8、およびほとんどOperaで動作します。



この問題の解決策は、次のように表すことができます。

• #corper-最も外部のブロック。ブラウザウィンドウに含まれていないものを切り取ります。
• #warp-980pxブロックが画面の中央に相対的に配置され、＃contentおよび#headのコンテナー
• #head-ヘッダーブロック、＃左ヘッド、＃右ヘッドのコンテナ。
• ＃左頭-左「耳」;
• ＃右頭-右の「耳」。
• #content-コンテンツ。

ポイントは、画面に対して画面の中央にある#warpブロックに絶対に配置される「耳」（＃左頭、＃右頭）を作成し、負の左右のフィールドを使用して#headの外側に移動することです。 これで



UPD：このメソッドは、身体にあるべき繰り返し背景がある場合にのみ関連します。

UPD2：すべてのユーザーの批判に感謝します。 彼女は賛成しました。 少し考えてから、ゴムのモデルを実現しました（2番目の例を参照）。 コードをアップロードしません 「Vew Source」ボタンの場所は誰でも知っています。

UPD3：そのようなことが役立つケーススタディ。





作業例： http : //8xx8.ru/habrahabr/ears/

680px 1000pxのゴム製の耳の実例：http://8xx8.ru/habrahabr/ears/index1.html