CSSでリストをメニューにする（画像）

▲このような結果になりました。３ブラウザで表示できたので良しとしてみた。

スポンサードリンク

<style type="text/css">
<!--
#header_menu ul{
	clear:both;
	font-size:30px;
}
#header_menu li {
	font-weight: normal;
	text-decoration: none;
	text-align:center;
	list-style:none;
	float:left;
	border-width:0px;
}
.btA{
	width:512px;
	padding-top			: 120px;
	padding-bottom		: 160px;
	text-decoration		: none;
	background-image	: url("./bt_dark_yellow.jpg");
	background-repeat	: no-repeat;
	background-position	: center center;
	display				: block;
}
.btB{
	width:512px;
	padding-top			: 120px;
	padding-bottom		: 160px;
	text-decoration		: none;
	background-image	: url("./bt_dark_yellow.jpg");
	background-repeat	: no-repeat;
	background-position	: center center;
	display				: block;
}
-->
</style>
<body>
	<div id="header_menu">
		<ul>
			<li>	<a class="btA" href="#">画像上の文字</a></li>
			<li>	<a class="btB" href="#">文字B</a></li>
		</ul>
	</div>
	<div style="clear:both;"></div>
	テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列
</body>