- ベストアンサー
CSS3の記述が反映されない
- ウェブサイトのCSS3の記述が反映されない問題について解決方法を探しています。
- marginやpaddingを使用しても反映されない原因がわかりません。
- divタグの並べ方も試しましたが効果がありませんでした。
- zakusuke2000
- お礼率44% (4/9)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
(1)下から6行目にある #footer a:hover{ background:url(../img/footer-link02.png) no-repeat; の最後に閉じタグ（}）が抜けてます。 正しくは、 #footer a:hover{ background:url(../img/footer-link02.png) no-repeat; } となります。 (2)下から3行目の.copyright{は、 .ではなく#です。 この2点でいかがでしょうか。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
@charset "utf-8";/* 半角スペースが必要 */ #footer{ width:1060px; padding:0; margin:0; float:left; list-style-type: none; } #footer li{ width:20%; list-style: none; text-align:center; } #footer li a{ width:auto; color:#fff; font-size:18px; font-weight:bold; padding:35px 0 35px; text-decoration:none; display:block; background:url(../img/footer-link01.png) no-repeat; } #footer a:hover{ background:url(../img/footer-link02.png) no-repeat; } /* }が抜けている。 */ .copyright{ margin-left:300px; } 基本的なこと ＞<script type="text/javascript"></script> ＞<style type="text/css"></style> HTML5なら不要!! HTML5なら <body> ・・・・ <footer> <ul> <li><a href="index.html">TOPへ戻る</a></li> </ul> <p id="copyright">Copyright Chat noir 2013 All Rights Reserved.</p> </footer> </body> HTML4.01なら <body> ・・・・ <div class="footer"> <ul> <li><a href="index.html">TOPへ戻る</a></li> </ul> <p id="copyright">Copyright Chat noir 2013 All Rights Reserved.</p> </div> </body> じゃないの？？ footerは他の場所でも存在しうるのでidじゃまずい。 div.footer ul{}で特定できるので、innnerのような意味のないもので囲わない。 div.footer{ width:1060px; padding:0; margin:0 auto; list-style-type: none; } div.footer ul,div.footer ul li{list-style: none;marin:0;padding:0;position:relative;} div.footer ul{display:block;text-alin:center;line-heiht:2em;} div.footer ul li{display:inline-block;width:20%;display:block;margin:0 1em;} div.footer li a{ display:block; width:100%;heiht:100%; text-decoration:non; color:#fff; font-size:18px; font-weight:bold; background:url(../img/footer-link01.png) no-repeat; background-size:cover; } とか・・
お礼
アドバイスありがとうございました。ちなみに他の方のお礼に書いたのですが、優先順位と記述ミスの修正で正常に反映されました。 まだまだ未熟な所があると痛感しました。 今回はお忙しい中ありがとうございました。
お礼
確認ありがとうございました。 講師に確認したところ、優先順位を考えてみては？とアドバイスを頂きまして、 #footerの下に#copyrightを配置したら正常に反映されました。 ありがとうございました。