CSSレイアウト実践講座5　sub、footer要素

Category ：
CSS ビギナー向け

CL company

前回のエントリーでheader、globalNaviの中身の要素を作ったので、今回はsub、footer要素の指定をしていきたいと思います。

今回もcontents.cssに記述していきましょう。

…ここからが続き

sub要素

タイトル部分

/*----------------------- sub Style-- */
#sub h2	{
	background: url(../images/title_sub01.jpg) no-repeat;
	width: 200px;
	height: 30px;
}
#sub h2 a	{
	width: 200px;
	height: 30px;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	background: url(../images/title_sub01.jpg) no-repeat;
}
#sub h2 a:hover,#sub h2 a:active	{
	background: url(../images/title_sub01.jpg) no-repeat 0px -30px;
}

リスト、バナー部分

/*----------------------- sub Style-- */
#sub .navi	{
	padding: 5px 5px 30px 5px;
}
#sub .navi li	{
	background: url(../images/icon_navi.gif) no-repeat;
	padding: 3px 0 3px 25px;
	border-bottom: solid 1px #CCC;
}
#sub .bnr	{
	padding: 10px 0;
}
#sub .bnr li	{
	margin-bottom: 5px;
}

footer要素

/*----------------------- footer Style-- */
#footer ul	{
	margin-bottom: 10px;
}
#footer ul li	{
	display: inline;
	margin-right: 0.5em;
}
#footer address	{
	color: #333;
	text-align: right;
}

以上の指定が終わったらこの用になります。