CSSでナビゲーションメニューまわりに設定をした背景が適用されない

現在会社のHPを作成しております。
HTMLとCSSで作成しているのですが、
HTMLで書いたナビゲーションメニューの周囲に
背景を設定したいのですが、どうしてもCSSで書いたものが反映されなくて困っております。
すべてのＷＥＢページに適用している背景はきちんと適用されているのですが、
ナビゲーションメニューまわりの背景が反映されません。
こちらのサイトの画像を使用しました
すべてのＷＥＢページに適用している背景：

ナビゲーションメニューまわりの背景：

【こちらがCSSです】

@charset"UTF-8"; 

/*すべてのWebページに適用される*/
body{
	background-image: url(../images/bg023_08.gif);
}

/* すべてのページに適用 -navまわり-*/
#nav li {
         display:inline;
	 list-style-type:none;
	 padding-right:30px;
}
#nav {	
      height:30px;margin:0px 0px 5px 0px;padding:15px 0px 0px 8px;
      font-size:18px;font-weight:bold;color:#333333;  
      background-image: url(../images/bnr003_07.gif) 
}```

【こちらがHTMLです(会社にかかわる情報は＃で伏せてます、topページのみになります)】

<!doctype html> 
 <html> 
 <head> 
 <meta charset="UTF-8"> 
 <title>株式会社＃＃＃＃＃</title> 
 <link rel="stylesheet"type="text/css"href="css/style.css"> 
 </head> 
 </body> 
 <div class="wrapper"> 
 <!--ヘッダー --> 

<h1 id="logo"><a href="top.html><img src="＃＃＃＃＃＃＃＃ alt="logo"> 
 </a></h1> 
 <ul id="nav">  
 <ul style="list-style:none"> 
 <listyle="float:left"><a href="top.html">トップページ</a></li> 
 &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; <listyle="float:left"><a href="salutation.html">ごあいさつ</a></li> 
 &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<listyle="float:left"><a href="company.html">会社概要</a></li> 
 &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<listyle="float:left"><a href="entry.html">登録からの流れ</a></li> 
 <listyle="float:left"><a href="business.html">事業内容</a></li> 
 <listyle="float:left"><a href="access.html">アクセス</a></li> 
 <listyle="float:left"><a href="inquiry.html">お問い合わせ</a></li> 
 &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<listyle="float:left"><a href="management.html">運営取組</a></li> 
 </ul> 
 <!--ヘッダーここまで --> 
 <!--メイン--> 

<p>＃＃＃＃＃＃＃＃＃＃＃＃＃＃</p> 
 <!--メイン ここまで--> 
 <!--フッター --> 
 </div> 
 <div id="footer"> 
 <P>＃＃＃＃＃＃＃＃＃ All Right Reserved.</p> 
 </div> 
 <!--フッター ここまで--> 
 </body> 
 </html>

【追記】
【上記のHTMLの中でkei344さんにご指摘された点を修正しました】

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>株式会社#########</title>
<link rel="stylesheet"type="text/css"href="css/style.css">
</head>
<body>
<div class="wrapper">
         <!--ヘッダー -->

	<h1 id="logo"><a href="top.html"><img src="images/######" width="960" height="50" alt="logo"></a></h1>
	<div id="nav">
        <ul style="list-style:none">
<li style="float:left"><a href="top.html">トップページ</a></li>
<li style="float:left"><a href="salutation.html">ごあいさつ</a></li>
<li style="float:left"><a href="company.html">会社概要</a></li>
<li style="float:left"><a href="entry.html">登録からの流れ</a></li>
<li style="float:left"><a href="business.html">事業内容</a></li>
<li style="float:left"><a href="access.html">アクセス</a></li>
<li style="float:left"><a href="inquiry.html">お問い合わせ</a></li>
<li style="float:left"><a href="management.html">運営取組</a></li>
	                                                                                                      </ul>
</div>
<a><img src="images/" width="" height="" alt=""></a>

     <!--ヘッダーここまで -->
     <!--メイン-->

		
	
       <div>
	<p>########################</p>
     <!--メイン ここまで-->
     <!--フッター -->
	</div>
        <div id="footer">
	         <P>&copyrignt #########All Right Reserved.</p>
	</div>
    <!--フッター ここまで-->
</body>
</html>

【追記2】
【ginさんの追記を反映したコードです、無事に(../images/bnr003_07.gifが表示されました】
[CSS]

@charset"UTF-8"; 

/* すべてのページに適用 -navまわり-*/
#nav {
    height: 30px;
    margin: 0px 0px 5px 0px;
    padding: 15px 0px 0px 8px;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    background-image: url(../images/bnr003_07.gif);
    list-style: none;
}
#nav:after {
    clear: both;
    display: block;
    content: "";
}
#nav li {
    float: left;
    display: inline;
    padding-right: 30px;
    list-style-type: none;
}

/*すべてのWebページに適用される*/
body{
	background-image: url(../images/bg023_08.gif);
}

[HTML]

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>#######</title>
<link rel="stylesheet"type="text/css"href="css/style.css">
</head>
<body>
<div class="wrapper">
         <!--ヘッダー -->

	<h1 id="logo"><a href="top.html"><img src="########" width="960" height="50" alt="logo"></a></h1>
<ul id="nav">
    <li><a href="top.html">トップページ</a></li>
    <li><a href="salutation.html">ごあいさつ</a></li>
    <li><a href="company.html">会社概要</a></li>
    <li><a href="entry.html">登録からの流れ</a></li>
    <li><a href="business.html">事業内容</a></li>
    <li><a href="access.html">アクセス</a></li>
    <li><a href="inquiry.html">お問い合わせ</a></li>
    <li><a href="management.html">運営取組</a></li>
</ul></div>
     <!--ヘッダーここまで -->
     <!--メイン-->

		
	
       <div>
	<p>###########</p>
     <!--メイン ここまで-->
     <!--フッター -->
	</div>
        <div id="footer">
	         <P>&copyrignt ########## All Right Reserved.</p>
	</div>
    <!--フッター ここまで-->
</body>
</html>

gin

2016/10/24 08:32

コードは「```」で囲むと見やすくなりますので、囲んでください。詳しくはヘルプに「https://teratail.com/help」

kei344

2016/10/26 04:54

バッククオート3つの前後には改行を入れてください。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

yuuy

2016/10/26 04:59

ご指摘ありがとうございます。訂正しました。

kei344

2016/10/26 05:11 編集

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。

行動規範の内容に同意します

回答3件

ベストアンサー

もしかしてですが…タイピングミスなのでは…

css
1background-image: url(../imges/bnr003_07.gif);
2              ↓
3background-image: url(../images/bnr003_07.gif);

###追記

css
1#nav {
2	height: 30px;
3	margin: 0px 0px 5px 0px;
4	padding: 15px 0px 0px 8px;
5	font-size: 18px;
6	font-weight: bold;
7	color: #333333;
8	background-image: url(../images/bnr003_07.gif);
9	list-style: none;
10}
11#nav:after {
12	clear: both;
13	display: block;
14	content: "";
15}
16#nav li {
17	float: left;
18	display: inline;
19	padding-right: 30px;
20	list-style-type: none;
21}

html
1<ul id="nav">
2	<li><a href="top.html">トップページ</a></li>
3	<li><a href="salutation.html">ごあいさつ</a></li>
4	<li><a href="company.html">会社概要</a></li>
5	<li><a href="entry.html">登録からの流れ</a></li>
6	<li><a href="business.html">事業内容</a></li>
7	<li><a href="access.html">アクセス</a></li>
8	<li><a href="inquiry.html">お問い合わせ</a></li>
9	<li><a href="management.html">運営取組</a></li>
10</ul>

投稿2016/10/24 08:30

編集2016/10/26 05:44

gin

総合スコア2722

yuuy

2016/10/26 05:01

ご指摘の部分をimagesに訂正したのですが、それでも表示されません。すみません。

gin

2016/10/26 05:45

整理しましょうか。追加削除して追記してみました。

yuuy

2016/10/26 06:40

コードを【追記２】のものにしたところ、反映されるようになりました。ありがとうございます。お世話になりました。

行動規範の内容に同意します

HTMLの文法をとりあえず直してからCSSの修正をされたほうが良いです。

下記部分は ul要素直下にul要素を置き、さらに閉じタグが一つ少ないためブラウザによってはどちらかの要素が無視されるなどします。

また、listyle では無く li style です。要素名と属性はスペースで離さないと意味が変わります。

HTML
1<ul id="nav">    
2<ul style="list-style:none">   
3<listyle="float:left">

投稿2016/10/26 05:15

kei344

総合スコア69407

yuuy

2016/10/26 05:51

ありがとうございます。ご指摘された点を追記したのですが、問題ないでしょうか？

行動規範の内容に同意します

最近のブラウザには開発者ツールなるモノが標準装備されています。
Chromeであれば、調べたいWEBページを開いた状態でF12を押すとツールが開きます。
そのツールで調べたい箇所を見てみると、その要素に適用されているCSSが何か、またそれがどのファイルで定義されているかが表示されます。

CSSで「反映されない」系の問題は、あるCSS定義が他のCSS定義により上書きされたり、優先度の問題で上書きできなかったりしているのがほとんどです。
CSSの優先順位

投稿2016/10/24 08:27

kunai

総合スコア5405

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

CSSでナビゲーションメニューまわりに設定をした背景が適用されない

関連した質問