私は CSS を学んでいます。ボディのすぐ下に赤い背景の div を配置しようとしています。幅を調整するたびにボディに収まらないようです。中央に 100% の幅で配置するには、ページの幅の 100% を占有し、白い背景領域と整列しません。80% を実行するたびに、左に整列し、白い背景領域と整列しません。正しい方向に向けてください。私は立ち往生しています:(
私がこれまでに持っているコードはここにあります: http://pastebin.com/VPMgbzQ2
前もって感謝します。
私は CSS を学んでいます。ボディのすぐ下に赤い背景の div を配置しようとしています。幅を調整するたびにボディに収まらないようです。中央に 100% の幅で配置するには、ページの幅の 100% を占有し、白い背景領域と整列しません。80% を実行するたびに、左に整列し、白い背景領域と整列しません。正しい方向に向けてください。私は立ち往生しています:(
私がこれまでに持っているコードはここにあります: http://pastebin.com/VPMgbzQ2
前もって感謝します。
フッターdiv
をタブから外して、div
必要はありませんposition: absolute
。次の変更を行います。
#footer
{
margin-top:80%;
height: 20px;
width:50%;
text-align:center;
background:#C00;
}
ここにフィドルがあります。
また、レスポンシブ デザインを作成しようとしているようですが、進めている方法は適切ではありません。Ethan Marcotte によるレスポンシブ デザインを読んで学習することができます。
編集
次の変更を行います。
height: 400px;
または必要に応じてテーブルに渡しますdiv
。div
を表の外に出しますdiv
。margin-top
か、5% または 10% に変更しdiv
ます。min-height: 100%;
し.tabs
ます。フィドルをチェックしてください。
私は今あなたの問題を見ます。親要素<div class="tab">
が問題の原因です。もし私があなただったら、ラジオボタンをタブから外して、float:left がないようにします。これで問題が解決するでしょう。次に、フッター div の絶対位置を削除する必要があります。
また、フッター div をタブの内側に配置したように見えましたが、実際には、コード内のすべてのタブの外側に配置する必要があります。
高さの値をハードコーディングしてみてください
#spaceheader {
width: 100%;
height: 100px;
background: #000000;
}