0


0

CSS初心者の質問–ヘッダーに割り当てられた色が採用されていません

私が積み重ねてきたエクササイズで助けてくれることを願っています。 私は実際に割り当てたように、ヘッダーがなぜ青色で表示されないのか疑問に思っています:ヘッダー領域ではありません。 色「青」を割り当てました。 しかし、私も色を試してみました。 ヘッダーは白のままです

これがCSSコードです。 (DreamwaverによればHTMLは問題ありません)

どうもありがとう! ドイツのベルリンからよろしく。

* {
 margin: 0;
 padding: 0;
}

body {
 background-color: #eeeeee;
 font: 1.1em/1.3em Georgia, "Times New Roman", Times, serif;
 /*1.1em/1.3 typischer Code für: Schriftgröße 1.1em und Zeilenhöhe 1.3em*/
}

h1, h2, h3 {
 padding: 0.7em 0;
}

p {
 padding: 0.3em 0;
}

/*-------- CONTAINER POSITION (#CONTAINER)----------*/

#container {

 margin: 1em 6%;
 background-color:#ffffff;
 border:1px solid #1166cc;
}

/*-------- TOP AREA POSITION (#HEADER)----------*/
#header {
 background-color: blue;

}

#header h1 {
 color: white;
 float: left;
 width: 65%;
 padding: 0.5em 2%;
}

#header form {
 padding: 0.4em 1%;
 float: right;
 background-color: #77aadd;
 width: 20%;
 margin: 0.5em;

}

#header input {
 padding:5px;
 background-color: #ffffff;
 border: 2px solid;
 font-size: 1em;
 color: #999999;
 width: 70%;
}


/*-------- CONTAINER NAVIGATION POSITION (#NAVBAR)----------*/

#navbar {
 clear:both;
 background-color:#77aadd;
 padding: 0.1em;
}

#navbar ul {
 padding: 0.6em;
}

#navbar li {
 display:inline;
 list-style:none;
}

#navbar li a {
 padding: 0.3em;
 color: #fafafa;
}

/*-------- CONTENT POSITION (#CONTENT)----------*/

#content {
 float: left;
 width: 65%;
 padding: 0.5em 3%;
}

/*-------- INFOBAR DESIGN (#SIDEBAR)----------*/


#sidebar {
 float:right;
 padding: 0.5em 3%;
 font-size: 0.95em;
 background-color:#cceeff;
 width: 23%;
}

/*-------- FOOTER POSITION (#FOOTER)----------*/

#footer {
 clear:both;
 background-color:#5599dd;
 text-align: right;
 color: white;

}

#footer p {
 padding: 0.5em;
}

3 Answer


1


IDとクラスの使用を再確認してください。

Headerコンテナに高さの値があることを確認してください(Firebugを使用)。 ヘッダーでフローティング要素を使用している場合は、「

ヘッダーコンテナを閉じる直前。


1


firebugを使用してデバッグします。 要素を選択し(矢印アイコンを使用)、CSSスタイルパネルを表示します。 すべてのcssスタイルと、それらが要素に対して定義された場所が表示されます。


0


位置、幅、高さを#headerに追加します。例:

#header {
  background-color: blue;
  position: absolute;
  width: 80%;
  height: 20%;
}

そうしないと、ブラウザには#headerの大きさを知る方法がありません。

また、http://validator.w3.orgを使用して、コードに問題がないことを確認します。 Dreamweaverよりもはるかに信頼性があります。 少なくとも私が使用しているDreamweaver 8。それ以降のバージョンはより良いかもしれません。

ところで、HTML、CSS、または他のいくつかのコンピューター言語のいずれかを学習している場合、http://www.w3schools.comは素晴らしいリソースです。