- 2008-03-16 (日) 17:37
- 5BOX
- 3Columun 5BOX
- #header>#extra>#menu(wrapper)>#content(wrapper)>#footer(wrapper)
- ＸＭＬ宣言あり
- 文字コード：UTF-8
- ダウンロード：3Column 5box Elastic TopExtra
HTML:
CSS:
-
*{margin:0;padding:0;}
-
#container{width:auto;height:1%;position:relative;}
-
#header {width:200px;height:100px;float:left;position:absolute;top:200px;left:0}
-
#menu{width:200px;margin-left:200px;float:left;height:350px}
-
#extra{height:200px;width:100%;position:absolute;top:0;left:0;}
-
#wrapper{width:100%;padding-top:200px;}
-
#content {margin-left:400px;height:300px;}
-
#footer {height:50px;margin-left:400px;}
-
-
* html #menu { margin-left:100px;}
-
-
body{background-color:#B2B4BF;}
-
#container{border: 3px solid #181533}
-
#header{background-color:#212C87;}
-
#menu{background-color:#652B7D;}
-
#extra {background-color:#02787B;color:#03CACF;}
-
#content{background-color:#FFFFFF;}
-
#footer {background-color:#CC6699;}
#headerと#extraをCSSで位置を逆にしている。
大きい画像を配置したいときに向いてるんじゃないでしょうか。
