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

解決済

質問者：zakusuke2000
質問日時：2013/07/04 09:18
回答数：2件

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

不躾な質問ですがよろしくお願いします。

問題点
HTML
<div id="copyright">をmarginを使い真ん中に、fontを白文字の太文字に装飾
結果
copyrightだけ反映されない。

以下ソースコード
○HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="chat noir,シャノワール,神奈川,箱根,生活雑貨,雑貨,木製、布ナプキン,タオル,かご,ほうき,道具,暮らし,ナチュラル,ハンドメイド,ネットショップ,ヘアゴム,黒猫,インテリア">
<meta name="description" content=" chat noirはフランス語で黒猫の意味です。自然素材を使った布ナプキン、ヘアゴム、ポーチなどのハンドメイド雑貨や、暮らしにちょっぴり彩りを添えるシンプルナチュラルな生活雑貨を取り扱っています。">
<title>【chat noir】生活雑貨と自然素材を使ったハンドメイド雑貨のお店</title>
<style>/*CSS*/</style>
<script>/*JavaScript コード*/</script>
<link rel="stylesheet" href="css/cahtnoir.css" type="text/css" media="all">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. …
<script type="text/javascript"></script>
<style type="text/css"></style>
</head>

<body id="body">

<div id="footer">
<div class="inner">
<ul>
<li><a href="index.html">TOPへ戻る</a></li>
</ul>
<div id="copyright">Copyright Chat noir 2013 All Rights Reserved.</div>
</div>
</div>
</body>
</html>

○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３の記述はこれ以外にもあります。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： hakuchou_maru
回答日時：2013/07/04 12:57

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

- 0
- 件

通報する

この回答へのお礼

確認ありがとうございました。
講師に確認したところ、優先順位を考えてみては？とアドバイスを頂きまして、
#footerの下に#copyrightを配置したら正常に反映されました。
ありがとうございました。

通報する

お礼日時：2013/07/04 13:57

No.1

回答者： ORUKA1951
回答日時：2013/07/04 10:12

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