- ベストアンサー
ホームページ作成でメニューコンテンツの文字がバックグラウンド画像の上に表示されない問題
- ホームページ作成の練習中に、メニューコンテンツの文字がバックグラウンド画像の上に表示されない問題が発生しました。
- バックグラウンドカラーを指定した後に、バックグラウンドイメージを指定したところ、メニューコンテンツの文字が表示されません。
- 原因がわからず困っています。どのように対処すればいいでしょうか？
- bmxqw241
- お礼率23% (6/26)
- ホームページ作成ソフト
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
どこまでが記述ミスなのかがわかりませんね。 閉じカッコがなかったり・・・ とりあえず再現してみたら、バックグランド画像の上に文字はのってますけど・・・ 細かいところでは、いろいろ言いたい問題はありますが、基本的に問題はないです。 下記のとおりなら、IEのVer9では表示されていますよ。 試してみてください。 <html> <head> <style> #menu { background-image:url(image/menu_background.gif); background-color:#f5f5f5; line-height:1.5; width:200px; float:left right; } </style> </head> <body> <div id="menu"> <ul><strong> <h4>メニュー</h4> <li class="nav1"><a href="contents/～.html">●を飼う方法</a></li> <li class="nav2"><a href="contents/.～html">●の里親になろう！</a></li> <li class="nav3"><a href="contents/.～html">●の飼い方</a></li> <li class="nav4"><a href="contents/.～html">●のお手入れ</a></li> <li class="nav5"><a href="contents/.～html">●の体のしくみ</a></li> <li class="nav6"><a href="contents/.～html">●の病気</a></li> <li class="nav7"><a href="contents/.～html">●の習性</a></li> <li class="nav8"><a href="contents/.～html">●の気持ち</a></li> <li class="nav9"><a href="contents/.～html">去勢と避妊</a></li> <li class="nav10"><a href="contents/.～html">●の種類</a></li> <li class="nav11"><a href="contents/.～html">●に芸を覚えさせよう</a></li> </strong></ul> </div> </body> </html>
その他の回答 (1)
- naokita
- ベストアンサー率57% (1008/1745)
１、半角スペースがあちこちに散乱しているが、何？ 環境問題？ ２、<ul>直下には、<li>しか置けないから、 <ul>直下に<strong>や<h4>を置くのは不正。 ３、CSSの最後は閉じる事 } ４、li{float:left;} なら ｗｉｔｈｏｕｔ clear:both; 「仮」部分 ５、float:left right; の重複！・・・ --------------------------- <html> <head> <title>サンプル</title> <style type="text/css"><!-- #menu { background: #f5f5f5 url(image/menu_background.gif); line-height:1.5; font-weight:bold; width:200px; float:left;} /* 仮でleft */ --></style> </head> <body> <div id="menu"> <h4>メニュー</h4> <ul> <li class="nav1"><a href="contents/～.html">●を飼う方法</a></li> <li class="nav2"><a href="contents/～.html">●の里親になろう！</a></li> <li class="nav3"><a href="contents/～.html">●の飼い方</a></li> <li class="nav4"><a href="contents/～.html">●のお手入れ</a></li> <li class="nav5"><a href="contents/～.html">●の体のしくみ</a></li> <li class="nav6"><a href="contents/～.html">●の病気</a></li> <li class="nav7"><a href="contents/～.html">●の習性</a></li> <li class="nav8"><a href="contents/～.html">●の気持ち</a></li> <li class="nav9"><a href="contents/～.html">去勢と避妊</a></li> <li class="nav10"><a href="contents/～.html">●の種類</a></li> <li class="nav11"><a href="contents/～.html">●に芸を覚えさせよう</a></li> </ul> <p style="clear:both;">仮</p> </div> </body> </html>
お礼
無事なんとかなりました。ありがとうございます
お礼
無事なんとかなりました。ありがとうございます