ＣＳＳ：liで作成したメニューの一つだけ背景画像を変えたい

解決済

質問者：ilareira2
質問日時：2007/03/15 15:07
回答数：2件

こんにちは。ページのメニューバーを<li>で作成していますが、
リンクがある<li>と、ない<li>で背景画像を変えたいのですが、<a:hover>の際の画像も別にしようと、背景画像を<a>で指定しまったため、どうしようかな、と行き詰りました。
・【横並び】
・【リンクあるなし別のボタン背景画像】
・【hover時も背景画像チェンジ】
の３点をかなえるには、どのような記述がすっきりするでしょうか。ご意見。ご指摘・叱咤、お聞かせくださいませ。

ちなみに、作っておいて、へばった記述例が、以下です。
例）横並びのメニューボタン（メニュー１、２、３）
・メニュー１（閲覧しているページへのリンクボタンなので、リンクなし）→背景Ａ[../images/A.gif]、
・メニュー２（他ページへのリンクボタン）→背景Ｂ[../images/B.gif]、hover時は背景Ｃ[../images/C.gif]
・メニュー３（メニュー２と同様）
-----------------
ul#menu{
font-size: 12px;
list-style-type:none;
width:800;
}

ul#menu::after {
visibility: hidden;
clear: both;
}

ul#menu li{
float: left;
width: 120px;
list-style-type: none;
display: inline;
}

ul#menu a{
color: #333;
text-decoration: none;
display: block;
background-image: url(../images/B.gif);
background-repeat: no-repeat;
}

ul#menu a:hover{
color: purple;
text-decoration: underline;
display: block;
background-image: url(../images/C.gif);
background-repeat: no-repeat;
}
-------------------

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ICHI-yan
回答日時：2007/03/17 14:17

勉強する気はあるということで、以下実験してください。

<html><head>
<style type="text/css">

</style>
</head><body><ul>
<li>123
<a href="*">4</a>
<a href="*">5</a>
<a href="*">6</a>
<a href="*">7</a></li>
<li>いろは<a href="*">に</a>
<a href="*">ほ</a>
<a href="*">へ</a>
<a href="*">と</a>
</li>
<li>
あいう<a href="*">え</a></li>
<li>ＡＢＣ<a href="*">ｄ</a>
<a href=*">Ｅ</a>
<a href="*">Ｆ</a>
<a href="*">Ｇ</a></li>
<li>ねたぎれ<a href="*">おしまい</a>
</li>
</ul>
</html>
何の指定もしていないＬＩです。
表示させて下さい。

これを横に並べるには、別ファイルか、ヘッダに
li{float:left;}を指定します。
実験してください。
消してください。

li{display:inline;}でも、今は見た目は同じです。
実験してください。
消してください。

わかりにくいので罫線をつけてみます
li{border:red 1px solid;}
実験してください。
消してください。
罫線をつけて、横に並べましょう
li{
display:inline;
border:red 1px solid;
}
リンク文字も扱いたいのでしたね
a:link{
display:block;
border:blue 1px solid;
}
を追加してください

ね、別々に制御できるでしょ？広すぎる？
じゃあ、幅を指定しましょう。
width:100px;
追加してください
どっちにたしたのかな？結果が違うはずです。
あ、この段階でinlineとfloatの表示に違いが出るはずです。
さっき
a:link{
としていたのを
a{
に変えてください
それがリンクしているのと、指定していないのの違いです。
別に特別分ける必要はありません。
ｃｓｓだと
a{
a:link{
以上ヒントでした。
hoverもしたいって？
a:hover{backgrond:#ff2;}
を追加。
どっかのつまみ食いをして回るより、基本から学んでください。これは、ＣＳＳの基本中の基本です。元のhtmlがしっかりしていたら、ｃｓｓで見た目なんてかなり変えられます。html部分がだめだと、どうしようもありません。最初はできるだけシンプルにして下さい。idやclassを出来るだけ削って記載する練習をして下さい。

- 0
- 件

通報する

この回答へのお礼

うふふ。ご丁寧な回答をありがとうございます！日々基礎修練ですね。つまみ食いがばれてしまいましたね。つい、基本を学ぶより、実際に使ってみて中身を知る、でつきすすんでしまいました。
今回は、多量のボタン（背景＋文字の画像）をテーブル組みで配置していくのをやめ、文字は文字で、背景の３パターンの画像だけですまそうと、手を出した次第。

ただいま、li{display:inline;}は、縦並び？で、悶絶している途中ですが、そこを飛ばして、別々に制御できることは理解しました。ので、問題は解決の道が見えてきました。ありがとうございます。ご指導賜りましたこと、感謝いたします。また、非常に分かりやすい記述にしていただき、そちらもうれしく拝見させていただきました。

通報する

お礼日時：2007/03/19 14:20

No.1

回答者： leap_day
回答日時：2007/03/16 17:57

こんにちは

表示部がない為どのようなのが理想なのか分からないですけど
とりあえず・・・

≪ボタンをイメージ画像化してjavascriptを使って画像変更≫
<input type="image" src="./sample0.gif" alt="リンク無">
<a href="./test0.html"><input type="image" src="./sample1.gif" alt="リンク１" onMouseover="this.src='sample2.gif'" onMouseout="this.src='sample1.gif'"><a>
<a href="./test1.html"><input type="image" src="./sample1.gif" alt="リンク２" onMouseover="this.src='sample2.gif'" onMouseout="this.src='sample1.gif'"><a>

≪tablleを使って≫
<style type="text/css">

</style>

<table border="0">
<tr>
<td class="b0">リンク無</td>
<td><a href="test0.html" class="b1">リンク1</a></td>
<td><a href="test1.html" class="b1">リンク2</a></td>
</tr></table>

- 0
- 件

通報する

この回答へのお礼

お返事ありがとうございます。最終目的から手法を探せば、様々な表現手法があるものですね。懇切丁寧に考えていただき、なおかつ、シンプルで「まさにこれ！」な回答に感謝しております。
私が行き詰った経由は、「まずはこうして」、「そこにこれを付け加えて」、「それにこれを反映するには？」と、行き当たりばったりな作成を手探りでしていたからです。
反省して、霧が晴れたような回答を参考にさせていただきたいと思います。そもそも、テーブル組みなしでボタンを配置させようとしたところに、越えられない壁があったように思います。壁を越えるには、まず基礎の勉強をしてから、ですね。
leap_day　さんのように、引き出しが多くあると、目的から周りを見た際に選択肢がぽんぽんと浮かぶのでしょうね。回答以上に、もう反省の教えとして、ありがたく回答を拝んでおります。

通報する

お礼日時：2007/03/19 11:57

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！