しかし、最終的に私はこれを手に入れました: http : //gruzzilkin.110mb.com/layout/
私の考えでは、理想的なレイアウトには次のプロパティが必要です。
- Doctype XHTML 1.0 Strict;
- テーブルを設計要素として使用しないレイアウト。
- ブラウザー間の互換性。
- 有効なhtmlおよびcssコード。
- ページのサイズを変更してフォントを拡大縮小しても、レイアウトは崩れません。
- グラフィックスを無効にすると、許容範囲内になります。
- 中身は角の丸い美しいフレームに囲まれています。
- 地下室は常に画面の下部に押されています。
- 同じ高さのスピーカー;
- ページのHTMLコードのコンテンツは可能な限り高い。
- 最小限の「余分な」マークアップ要素。
最後を除いて、計画のすべてのポイントを達成することに成功したと思います。
原則として、私がしたことはすべて同じ自転車ですが、インターネット上のさまざまな部分からこの自転車を組み立てました。
- Design For Mastersに関する記事「Finding the Holy Grail」の翻訳。
- 456 Berea stのカスタムコーナーとボーダーの記事を含む柔軟なボックス。
- A List Apartに関するFaux Absolute Positioningの記事。
最終的なレイアウトの作成方法は次のとおりです。
そもそも、彼のバージョンの聖杯を取り上げて作り上げました。 こちらで見れます 。 ALAに搭載された革命的なバージョンと違いはありませんでした。スクリーンの底にある地下室と同じ高さのスピーカーだけです。
A List Apartに記事「Faux Absolute Positioning」が掲載された後、私はこの手法に感銘を受け、「完璧な」レイアウトを作り直すことにしました。
それから私は、ロジャー・ヨハンソンが柔軟なフレームを作成する方法を開発した方法に出会い、それで私のレイアウトを補完することにしました。
結局、私は欲しいものを手に入れました。 しかし同時に、私のバージョンの追加ブロックの数は単に恐ろしいものです。 また、「同じ高さの列」では、同じ列の下部に押し付けられた繰り返しのない背景画像を適用しても機能しません(下部は表示ウィンドウをはるかに超えているため)。 つまり この画像は、親.boxまたは(and?).contentコンテナー内に配置する必要があります。 そして、もし私のものとは異なるデザインを手にしているなら、それで長く一生懸命踊らなければなりません。
自分を経験豊富で洗練されたレイアウトデザイナーとは考えていませんが、Habrユーザーにアドバイスを求めたいのですが、このレイアウトをどのように最適化できますか? または、すでに私のものよりもはるかに簡単で、上記のすべての要件を満たす他の方法がありますか?
回答ありがとうございます。