div#a2内の編集

div#a2内には、ロールオーバーボタンを使用した横並びメニューを作成したいので、リスト（ul,ol）タグを使用してメニュー項目を記述しておきます。

<div id="a2">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Lesson1</a></li>
<li><a href="#">Lesson2</a></li>
<li><a href="#">Lesson3</a></li>
<li><a href="#">Lesson4</a></li>
</ul>
</div>

スタイルは、float:leftで横並びにしたあとに、各メニュー項目の境界線画像として、縦1px、横1pxの画像をbackgroundにrepeat-yで繰り返し配列します。

position:relativeは、IEバグ対策（マウス範囲が広がらない）ですね。

素材作成がめんどいので、画像の切り替えは行いません・・・。

#a2 ul {
	margin-left:0;
	}
#a2 ul li {
	display:inline;
	background:url(../gif/31.gif) right top repeat-y;
	height:30px;
	}
#a2 ul li a {
	position:relative;
	padding:5px 20px 0 20px;
	float:left;
	display:block;
	}

ここまでの作成経過はコチラ→サンプル（ホームページ作成講座）

Lesson9～画像ビュアーの作成～

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>