掲示板/総合質問板/過去ログ/一覧/ リストマークを画像でロールオーバー

0 名前： 名無しさん。 ： 2007/05/31（木） 14:35 ID:sFhh2Hk3 sub-gw: 【何をしたいのか】
→ リストマークを画像にして、ロールオーバー時に画像と文字の背景を
　変更したいです。

【現在の状況】
→ 現在、リストマークがずれないように、画像を背景で指定しています。
　ロールオーバーはできるのですが、左側と下側に妙な空白ができてしまいます。

【サンプルの提示】
→　現在、http://desperadoes.biz/style/css_menu_loose.html で
　　紹介されていた、CSSを元に作成しています。
#list ul {
list-style: none;
margin: 0px;
margin-left: 0px;
padding: 0px;
color:#FFFFFF;

}
#list li {
margin: 0px;
padding: 0px 0px 0px 15px;
list-style: none;
color:#FFFFFF;
}
#list a {
background-image:url(../swml/swml/icon.gif);
background-position:left;
text-decoration:none;
list-style-type : none;
background-repeat:no-repeat;
padding-left:15px;
font-size:small;
color:#FFFFFF;
}
#list a:hover {
background-image:url(../swml/swml/icon_a.gif);
background-color:#FFC600;
text-decoration:none;
background-repeat:no-repeat;
font-size:small;
color:#003695;
padding-left:15px;
}

【何をしてみたのか】
→ これまでリストマークを画像にする方法を試したりしたのですが
　　画像と文字がズレたりしました。

【検索用語】
→ 「リスト　ズレ　ロールオーバー」という単語で検索しました。

よろしくお願いします…。

1 名前： カヅサツ ◆ThCi95HEzw ： 2007/05/31（木） 14:35 ［URL］ ID:O5hEMlpW sub-r2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
body{
	margin: 0px;
}
#list ul {
	font-size: small;
	margin: 0px;
	padding: 0px;
}
#list li {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	line-height: 1;
}
#list a:link,
#list a:visited{
	background-image:url(../swml/swml/icon.gif);
	background-position:left;
	background-repeat:no-repeat;
	text-decoration:none;
}
#list a:hover {
	color:#003695;
	background-image:url(../swml/swml/icon_a.gif);
	background-color:#FFC600;
}
</style>
</head>
<body>
<div id="list">
	<ul>
		<li><a href="">test</a></li>
		<li><a href="">test</a></li>
		<li><a href="">test</a></li>
		<li><a href="">test</a></li>
		<li><a href="">test</a></li>
		<li><a href="">test</a></li>
	</ul>
</div>
</body>
</html>

2 名前： 名無しさん。 ： 2007/05/31（木） 14:35 ID:sFhh2Hk3 sub-gw: できました!!!

ありがとうございます!!