• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:今練習でホームページ作成をしています。)

ホームページ作成でメニューコンテンツの文字がバックグラウンド画像の上に表示されない問題

このQ&Aのポイント
  • ホームページ作成の練習中に、メニューコンテンツの文字がバックグラウンド画像の上に表示されない問題が発生しました。
  • バックグラウンドカラーを指定した後に、バックグラウンドイメージを指定したところ、メニューコンテンツの文字が表示されません。
  • 原因がわからず困っています。どのように対処すればいいでしょうか?

質問者が選んだベストアンサー

  • ベストアンサー
  • szk9998
  • ベストアンサー率45% (1026/2241)
回答No.1

どこまでが記述ミスなのかがわかりませんね。 閉じカッコがなかったり・・・ とりあえず再現してみたら、バックグランド画像の上に文字はのってますけど・・・ 細かいところでは、いろいろ言いたい問題はありますが、基本的に問題はないです。 下記のとおりなら、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>

bmxqw241
質問者

お礼

無事なんとかなりました。ありがとうございます

その他の回答 (1)

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.2

1、半角スペースがあちこちに散乱しているが、何? 環境問題? 2、<ul>直下には、<li>しか置けないから、   <ul>直下に<strong>や<h4>を置くのは不正。 3、CSSの最後は閉じる事 } 4、li{float:left;} なら without clear:both; 「仮」部分 5、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>

bmxqw241
質問者

お礼

無事なんとかなりました。ありがとうございます

関連するQ&A

専門家に質問してみよう