cssでナビエリアの色を設定するにはどうすればよいですか？

navbar領域を薄い青色に変更したいと思っていたCSSを設定しましたが、その代わりにnavbar項目の背後にのみ配置され、navbar領域全体ではありません。どのようにしてNavbar領域全体の色を取得できますか？私はwrapに設定し、.containerにflexを使用することになりcssでナビエリアの色を設定するにはどうすればよいですか？

HTML

<!doctype html> 
<html> 
<head> 
<title>Cities Gallery</title> 
<link rel="stylesheet" type="text/css" href="css/myStyles.css"> 
</head> 

<body> 
<div class="container"> 

<header> 
    <h1>City Gallery</h1> 
</header> 

<nav> 
    <ul> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="london.html">London</a></li> 
     <li><a href="paris.html">Paris</a></li> 
     <li><a href="tokio.html">Tokyo</a></li> 
    </ul> 
</nav> 


<article> 
    <div class="intro_text"> 
     <h1>City Navigator</h1> 
     <p>Welcome to my cities website. Click on a link on a left to view City information</p> 
     </div> 

<img src="images/cities.jpg" alt="Cities" style="width:352px;height:211px;"> 


</article> 
</div> 
</body> 



<footer> 
    <p>Posted by: German Jimenez</p> 
    <p>Contact information: <a href="mailto:[email protected]"> 
    German Jimenez</a>.</p> 
</footer> 
</html>

CSS

div.container{ 
    width:100%; 
    border:1px solid gray; 
    } 


header, footer{ 
    padding:1em;  
    color:white; 
    background-color:black; 
    clear:left; 
    text-align:center 
    } 


nav { 
    float:left; 
    max-width:160px; 
    margin:0; 
    padding:1em; 
    background-color:lightblue; //this did not work 
} 


nav ul { 
    list-style-type: none; 
    padding:0; 
    } 


nav ul a { 
    text-decoration: none; 
    } 


article{ 
    margin-left:170px; 
    border-left:1px solid gray; 
    padding:1em; 
    overflow:hidden; 
}

出典

2017-04-21 John M.

あなたのHTMLは無効です。あなたは 'の後に内容を持つことはできません。 – j08691

私はこれを読むのが非常に愚かであると感じます。私はすぐにそれを修正した。ありがとうございました。 –

、それはflex-basis: 100%だと、行全体を占有しますflex: 0 0 100%にheaderを設定します。その後flex: 1 0 0;にarticleを設定し（それがflex-grownavから残された空間を埋めるためになります）

div.container { 
 
    width: 100%; 
 
    border: 1px solid gray; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
header, 
 
footer { 
 
    padding: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    clear: left; 
 
    text-align: center 
 
} 
 

 
nav { 
 
    max-width: 160px; 
 
    margin: 0; 
 
    padding: 1em; 
 
    background-color: lightblue; //this did not work 
 
} 
 

 
nav ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 

 
nav ul a { 
 
    text-decoration: none; 
 
} 
 

 
article { 
 
    border-left: 1px solid gray; 
 
    padding: 1em; 
 
    overflow: hidden; 
 
    flex: 1 0 0; 
 
} 
 

 
header { 
 
    flex: 0 0 100%; 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <title>Cities Gallery</title> 
 
    <link rel="stylesheet" type="text/css" href="css/myStyles.css"> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 

 
    <header> 
 
     <h1>City Gallery</h1> 
 
    </header> 
 

 
    <nav> 
 
     <ul> 
 
     <li><a href="index.html">Home</a></li> 
 
     <li><a href="london.html">London</a></li> 
 
     <li><a href="paris.html">Paris</a></li> 
 
     <li><a href="tokio.html">Tokyo</a></li> 
 
     </ul> 
 
    </nav> 
 

 

 
    <article> 
 
     <div class="intro_text"> 
 
     <h1>City Navigator</h1> 
 
     <p>Welcome to my cities website. Click on a link on a left to view City information</p> 
 
     </div> 
 

 
     <img src="images/cities.jpg" alt="Cities" style="width:352px;height:211px;"> 
 

 

 
    </article> 
 
    </div> 
 
</body>

出典

2017-04-21 20:29:47

cssでナビエリアの色を設定するにはどうすればよいですか？

答えて

関連する問題