BOOK Studio947
狩野祐東・狩野さやか著書

168P 背景画像の繰り返し でのご質問

書籍Q&ACategory: スラスラわかるHTML&CSSのきほん168P 背景画像の繰り返し でのご質問
asked 4年 ago

コードの間違いを探していますが、どうしても分からず質問させて頂きました。
HTML
<!–フッター –>
<div id=”footer”>
<p>©Copyright KUJIRA cafe. All rights reserved.</p>
</div>
<!–フッターここまで –>
</div>
</body>
</html>
CSS
#footer
{
background-image: url(../images/footer-bg.png);
background-repeat: repeat-x;
margin-top: 30px;
padding: 20px 0 20px 0;
font-size: smaller;
color: #442220;
}

上記コードでフッターに背景画像が適用されません。
原因がわからずに悩んでおります。宜しくお願いいたします。

4 Answers
answered 4年 ago

適用できました。スタイルシートで下記のコードより上に記載すると適用されるようになりました。

/* すべてのページに適用 -navまわり - */
#nav li{
display: inline;
list-style-type: none;
padding-right: 30px;
}

#nav {
margin: 0 0 0 0;
padding: 15px 30px 10px 30px;
background-image: url(../images/menu-bg.png);
}

#nav li a:link{
color:#f5f3ed;
text-decoration: none;
}

#nav li a:visited{
color:#f5f3ed;
text-decoration: none;
}

#nav li a:hover{
color:#e4dbb9;
text-decoration: none;

#nav li a:active{
color:#ffffff;
text-decoration: none;
}

これより下にコードを記載すると適用されません。
ページに固有のスタイルを適用も出来ませんでした。

answered 4年 ago

文字間違いです。
174Pのページに固有のスタイルに適用も出来ませんでした。
すべて上の質問のコードより下に記載すると適用されなくなってしまいます・・・
原因がわかりません、よろしくお願いいたします。

狩野 祐東 Staff answered 4年 ago

tsubaさんこんにちは。
CSSが適用されないのは、ソースコードの中で、「#nav li a:hover」の「}」が抜けているからでしょう。

#nav li a:hover{
color:#e4dbb9;
text-decoration: none;
}←この「}」が抜けています

この「}」を足せば解決すると思いますので、試してみてください。

answered 4年 ago

ご指摘の通りでした。確認をよくしていたつもりでいました・・・
今後はもっとよく確認いたします。
大変助かりました、ありがとうございます!