CSS3の記述の一部が反映されない。

Question

職業訓練のグループ課題で、ウェブサイトを造っているのですが、CSS３の記述が反映されない所がありまして、marginやpaddingでやっても無理でした。「．」と「＃」の違いかなとも思ったのですが全然反映されませんでした。 divタグも考えられる並べ方を試したのですが実行されませんでした。不躾な質問ですがよろしくお願いします。問題点 HTML

をmarginを使い真ん中に、fontを白文字の太文字に装飾結果 copyrightだけ反映されない。以下ソースコード ○HTML 【chat noir】生活雑貨と自然素材を使ったハンドメイド雑貨のお店 ○CSS3 @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; } ※HTML、CSS３の記述はこれ以外にもあります。

hakuchou_maru · Accepted Answer

(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点でいかがでしょうか。

ORUKA1951 · Answer

@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;
}
とか・・

CSS3の記述の一部が反映されない。

(1)下から6行目にある

@charset "utf-8";/* 半角スペースが必要 */

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング