技術や物事のかきとめ(旧データ)

はてなダイアリーからの移行です。もともとかつて「はてなグループ」で公開していた内容を移動しました。

横並びメニューの記述について

ソース

<div class="menu">
	<ul>
		<li class="select">お知らせ配信</li>
		<li><a href="#">ユーザー管理</a></li>
		<li><a href="#">映像管理</a></li>
		<li><a href="#">同報メール送信</a></li>
	</ul>&nbsp;
</div>

CSS

body div.body div.menu{
	background-image: url(../img/menu_bg.jpg);
	background-repeat: repeat-x;
	font-weight: bold;
	padding: 5px;
	padding-bottom: 10px;
}
body div.body div.menu ul li{
	float: left;
	list-style: none;
	padding: 5px;
	margin: 0 5px;
}
body div.body div.menu ul li.select{
	background-color: #FFF;
}

メモ

HTMLソースの中にある、ulタグ外の「空白」が重要です。これが無いと、背景画像が切れて表示されます。