DIV/CSS を使用してレイアウトを作成しました。以下に例の画像とリンクを添付しました。これは、物事をどのように整理したいかを示しています。ヘッダー内には、幅が合計 1000px のロゴとメニューがあります。機能、コンテンツ、およびフッター セクションも 1000 ピクセルの幅になります。ただし、すべてのセクションの実際の背景画像は幅が 100% で、水平方向に繰り返されます。
以下は、私がやりたいことの例です。
これまでに実際に (設計に関して) まとめたものは、http: //ohachem.com/2/で見ることができます。これは私が従いたいものです。CSS はここで見ることができます: http://ohachem.com/2/style.css
これを達成するための最良の方法は何ですか？ご覧のとおり、"feature" セクションのテキストは完全に中央に配置されていません。clear:both、overflow:hidden、および他のいくつかの方法を使用してみましたが、うまくいきませんでした。
あなたが指摘しているウェブサイトはリキッドレイアウトを使用しています。ここにたくさんの例があります: http://www.dynamicdrive.com/style/layouts/category/C13/。
あなたの例では、私が識別できる配置属性はありません。レイアウトをレスポンシブにすることの大部分は、すべてのブラウザーと画面で一貫して見えるようにすることです。
レスポンシブ/アダプティブ Web ページのデザインには、スクリプトではなくCSS3 メディア クエリを使用することをお勧めします。
これを見てください
これらはあまり処理しないため、軽量で最新のブラウザーとデバイスのほとんどが CSS3 をサポートしているため、便利で信頼性の高いオプションです。
「特集」テキストの「ずれ」は、フローティング ロゴが原因です。フロートがクリアされておらず、ヘッダーの外まで伸びているため、そのテキストがフロートの周りを流れています。要素に追加overflow: hiddenする#headerと修正されますが、余分なマークアップを追加せずにフロートをクリアする方法は他にもあります。
または、ロゴをヘッダーと同じ高さにすることもできます。現在、height プロパティは同じ値に設定されていますが、ロゴに余分なパディングがあり、オーバーフローが発生しています。