- 2008-12-11 (木) 17:03
- 6BOX
- 2Columun 6BOX
- #header>#extra(wrapper)>#other(wrapper)>#content(wrapper)>#menu(wrapper)>#footer
- ＸＭＬ宣言なし
- 文字コード：UTF-8
- ダウンロード：2Col 6box Fixed WideHF
HTML:
CSS:
-
div#container{
-
width:auto;
-
margin:0 auto;
-
height:1%;
-
}
-
div#header {
-
height:70px;margin: 0;
-
}
-
div#extra{
-
height:200px;
-
margin-bottom:10px;
-
width:100%;
-
}
-
div#other {
-
height:30px;
-
margin:0 0 10px 0;
-
}
-
div#wrapper{
-
margin:0 auto;
-
width:950px;
-
padding:10px 0;
-
position:relative;
-
}
-
div#content {
-
float:right;
-
margin: 0;
-
height:300px;
-
width:760px;
-
}
-
div#menu {
-
float:left;
-
width:180px;
-
height:300px;
-
}
-
div#footer {
-
margin:0;
-
padding:1px 0;
-
width:auto;
-
}
-
/* For IE ---------------------------*/
-
* html body { text-align:center; }
-
* html div#container {text-align:left;}
-
-
/* Color Settiong -------------------*/
-
body{background-color:#B2B4BF;}
-
#container{border: 3px solid #181533}
-
#header{background-color:#212C87;}
-
#menu{background-color:#652B7D;}
-
#extra {background-color:#02787B;color:#03CACF;}
-
#other{background-color:#008ee3;color:#66CCFF}
-
#content{background-color:#FFFFFF;}
-
#footer {background-color:#CC6699;}
- サンプルページ
- ダウンロード：2Col 6box Fixed WideHF
ヘッダーとフッターがwidth:100%で、コンテンツエリアの横幅が固定されてます。
メインビジュアルをヘッダー直下に置き、その下にナビゲーション、さらにその下を２カラムに分割して
左側にメニュー、右側にコンテンツを配置したレイアウトです。
メニューが多くなりがちな商業サイトでよく採用されている。
関連記事
- Newer: SiteTemplate07:Autumn Lovely
- Older: [icon]クリスマス用フォルダアイコン（プレゼントボックス）
