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

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;
}

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

もしまだダウンロードがお済みでない方は

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article