リストリンクと角丸画像のロールオーバーを連動させる方法について
縦に並んだリンクを作成していたのですが分からない所がありましたので、ご教示いただける方がいらっしゃいましたら、よろしくお願いします。
【やりたい事】
リストリンクのロールオーバー時に下記を変化させたいです。
1. リストマーク的な画像(テキストの1行目の横に表示し、テキストが何行になろうとも自動で対応したいです)
2. テキストの文字色
3. リンク領域内の背景色
ただし1行目と最終行のリンクについては上記以外に下記も変化させたいです。
4. 角丸画像
【できていない事】
最終行のリンクで、【やりたい事】の1と4を連動させる事ができませんでした(1行目はできています)。
なお1行目はできていて、最終行ができていない理由は下記となります。
1. 1行目は下記の2つの座標が常に一定の為、この二つと背景色を一体化した画像を作成すれば意図した動作となりました。
角丸画像の座標(0, 0)
リストマーク的な画像の座標(4, 14)
2. 最終行の角丸画像の座標はテキストの行数が決まっていない為、特定できません。
その為、一体化した画像は作れませんでした。
下記のソースでは、最終行の角丸画像の動作は問題ないのですが、最終行のリンクは、ロールオーバー前、後共にリストマーク的な画像が表示されません(【やりたい事】の1と4を連動させる事ができず、4が動き、1が動かない形となっております)。
【ソース】
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>title</title>
<style type="text/css">
<!--
body {
font:13px "ＭＳ Ｐゴシック";
*font-size:small;
*font:x-small;
margin:0;
padding:0;
}
#navi_menu {
width: 170px;
}
#navi_menu ul {
margin:0;
padding:0;
}
#navi_menu .navi_link {
line-height: 26px;
list-style: none;
}
#navi_menu .navi_link a {
display: block;
height: 100%;
padding-left: 18px;
color: #333333;
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
background-position: 4px 7px;
}
#navi_menu li.top_kadomaru a {
padding-top:7px;
background-image: url(images/corner_maru_top.gif);
background-position: 0px 0px;
}
#navi_menu li.bottom_kadomaru a {
padding-bottom:6px;
background-image: url(images/corner_maru_bottom.gif);
background-position: bottom;
}
#navi_menu .navi_link a:hover {
color: #c9c;
background-color: #3ff;
background-image: url(images/arrow_on.gif);
background-repeat: no-repeat;
background-position: 4px 7px;
}
#navi_menu li.top_kadomaru a:hover {
background-image: url(images/corner_maru_top_on.gif);
background-position: 0px 0px;
}
#navi_menu li.bottom_kadomaru a:hover {
background-image: url(images/corner_maru_bottom_on.gif);
background-position: bottom;
}
#navi_menu .navi_link a span {
display: block;
margin-left: -18px;
padding-left: 18px;
text-decoration: underline;
background-image: url(images/bg.gif);
background-repeat: repeat;
}
-->
</style>
</head>
<body>
<div id="navi_menu">
<ul>
<li class="navi_link top_kadomaru"><a href="index1.html"><span>1行目は1行でも複数行でも大丈夫です</span></a></li>
<li class="navi_link"><a href="index2.html"><span>2行目も同上</span></a></li>
<li class="navi_link"><a href="index3.html"><span>3行目は同上</span></a></li>
<li class="navi_link"><a href="index4.html"><span>4行目は同上</span></a></li>
<li class="navi_link bottom_kadomaru"><a href="index5.html"><span>最終行を連動させる方法が分かりませんでした</span></a></li>
</ul>
</div>
</body>
</html>
【使用ファイル】
index.html(上記ソース)
arrow.gif(10x10の任意の画像)
arrow_on.gif(同上)
bg.gif(2x26で最終行の1ピクセルのみに任意の色がついている画像(罫線的な意味合いがあります))
corner_maru_bottom.gif(170x6の任意の画像)
corner_maru_bottom_on.gif(同上)
corner_maru_top.gif(170x24で(0,0)～(170,7)が角丸画像用領域、(4,14)にarrow.gifを貼り付けた画像)
corner_maru_top_on.gif(同上)
どうかよろしくお願いします。
お礼
rody555さん、こんにちは。 コメントありがとうございました。 結局、下記のように落ち着きました。 今回使用の画像が、文字に大体合っている大きさ だったのでラッキーでした。 でも0.25emの値を変更する方法は勉強になりました。 ありがとうございました。 margin-leftを使うことができたのですね。 自分が試したときは、どうしても動かなくて cssの中で泥沼化しておりました。 ありがとうございました。 ul {margin-left:20px} li {list-style-type:none; padding-left:22px; background-image: url(images/list04.gif); background-repeat: no-repeat; }