header-3-footer カラムレイアウト

完成イメージ)

header-3-footer カラムレイアウト - いまさらHTML,CSS入門講座 -

実際のXHTMLファイルの表示はこちら

幅728px。body要素に全体の横幅(width: 728px;)を追加。上から順に
header幅728px。
画面左id="nav"幅150px、画面中央id="main"幅428px、画面右id="aside"幅150pxの3カラム。
footer幅728px。

※記述例の便宜上各ボックスに高さ「heigh」と背景色「background」を設定しています。

※body要素の緑色の箇所は文書のセンタリングです。お好みでお使い下さい。なおセンタリングをしない場合でも横幅(width: 728px;)は削除しないで下さい。

スタイルシート記述例)

*{
margin: 0;
padding: 0;
}
body{
width: 728px;
position: absolute;
left: 50%;
margin-left: -364px;
}
#header{
width: 728px;
background: #c0c0c0;
height: 100px;
}
#nav{
float: left;
width: 150px;
background: #f5f5dc;
height: 300px;
}
#main{
float: left;
width: 428px;
background: #ffffff;
height: 300px;
}
#aside{
float: left;
width: 150px;
background: #f5f5dc;
height: 300px;
}
#footer{
clear: both;
width: 728px;
background: #c0c0c0;
height: 100px;
}

本文記述例)

<body>
<div id="header">id="header"</div>

<div id="nav">id="nav"</div>
<div id="main">id="main"</div>
<div id="aside">id="aside"</div>

<div id="footer">footer</div>
</body>

このエントリーをはてなブックマークに追加


ページトップへ戻る



RAWで撮ろうLife with a cameraLife with a camera 2


inserted by FC2 system