Вопрос для новичка CSS - заголовок не принял назначенный цвет - PullRequest
Новая
       6

Вопрос для новичка CSS - заголовок не принял назначенный цвет

0 голосов
/ 18 сентября 2010

Я надеюсь, что вы можете помочь мне с упражнением, которое я сложил. Мне интересно, почему заголовок не отображается синим цветом - как я на самом деле назначил: Пожалуйста, не область заголовка. Я назначил цвет "синий". Но я пробовал любой цвет. Заголовок сохраняет белый цвет

Это код CSS. (HTML в соответствии с Dreamwaver)

Большое спасибо! С уважением, Берлин, Германия. 

* {
 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 ]

1 голос
/ 18 сентября 2010

Используйте Firebug для его отладки. Выберите элемент (со значком стрелки), затем посмотрите панель стилей CSS. Он расскажет вам все стили CSS и где они были определены для элемента.

1 голос
/ 18 сентября 2010

Дважды проверьте использование идентификаторов и классов.

Убедитесь, что ваш контейнер заголовка имеет значение высоты (используйте Firebug). Если вы используете плавающие элементы в своем заголовке, не забудьте поместить <div style='clear:both'></div> непосредственно перед закрытием контейнера заголовка.

0 голосов
/ 19 сентября 2010

Добавьте позицию, ширину и высоту к #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 - отличный ресурс.

...