CSSでリストをメニューにする(画像)


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

スポンサードリンク

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

関連記事

スポンサードリンク

Comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です