- ベストアンサー
HTMLとCSSを使ってメニューボタンを作成する方法
- IE８やGoogle Chromeでは正しく表示されるが、Firefoxでは背景画像が表示されない問題が発生している。
- URLのリンク部分を変更すると画像は表示されるが、画像が重複して表示されてしまう。
- 画像のサイズやスワップ効果の設定に問題がある可能性がある。
- sleep_sleep
- お礼率33% (2/6)
- HTML
- 回答数2
- ありがとう数15
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
CSSを適用するためにはHTMLが正しくないとだめです。IEはトンデモブラウザなので、拡大解釈をしてくれますが・・ 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )］より <div id="outline"> <ul id="ul"> <a href="#"><li class="menu">ホーム</li></a> <a href="#"><li class="menu">トップ</li></a> </ul> </div> は、HTMLとして正しくありません。 Aは、内部にinline(行内要素)しか持てません。liはブロック要素!! 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから <!ELEMENT A - - (%inline;)* -(A) -- anchor --> ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［12.2 A要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/links.html#edef-A )］より ★それぞれの要素(タグ)が内部に何を持ちうるか、それぞれがブロック要素か行内要素かは基本ですからしっかりと理解しておきましょう。まともな入門書なら最初に耳にたこができるくらい説明してある。 HTMLは <div id="outline"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">トップ</a></li> </ul> </div> でよい。id="ul"とか、class="menu"とかは無用です。逆にこれを書くとCSSが肥大化する。 CSSにも間違いがあって、たぶん期待通りになってないでしょう。 div#outline ul,#outline ul li{ /* まとめて書いておくと２回書かなくて済む */ margin: 0px; padding: 0px; list-style-type: none; } div#outline ul{ height: 69px; width: 336px; } div#outline ul li{ /* ブロックにしてサイズを決める */ display:block; height: 69px; width: 158px; margin: 0px 5px; line-height: 69px; float: left; /* そしてfloat */ } div#outline ul li a{ /* ここでinlineなaをブロックにして高さと幅をliブロック一杯にする */ /* これで画像のどこをクリックしてもリンクする */ /* アンダーラインを消したなら、そうしないと */ display:block; width:100%; height:100%; font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 30px; color: #FFFFFF;/*safariだったっけバグ対策*/ background: url(1.gif) no-repeat; /* まとめて */ text-align: center; text-decoration: none; }
その他の回答 (1)
- outbrave
- ベストアンサー率60% (231/380)
<a href="#"><li class="menu">ホーム</li></a> これでは入れ子がダメでしょう。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <style type="text/css"> <!-- #outline #ul { margin: 0px; padding: 0px; height: 69px; width: 336px; list-style-type: none; } #outline #ul a { font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 30px; line-height: 69px; color: #FFF; text-decoration: none; background-image: url(1.gif); background-repeat: no-repeat; text-align: center; padding: 0px; float: left; height: 69px; width: 158px; margin-right: 5px; margin-left: 5px; } --> </style> </head> <body> <div id="outline"> <ul id="ul"> <li><a href="#">ホーム</a></li> <li><a href="#">トップ</a></li> </ul> </div> </body> </html>
お礼
とてもわかりやすいです＾＾ ありがとうございました。 基礎は全て把握したつもりでいたのですが、 とんだ見当違いでした。 もう一度勉強しなおします。