Все правила стиля CSS удалены из одного элемента div, но без других элементов

0

Я пытаюсь создать заголовок для веб-сайта, где заголовок сайта отображается над изображением. Я установил его для использования элемента div-класса с фоновым изображением. Однако я не могу понять, почему фоновое изображение в этом элементе класса div, которое я создал, не отображается.

После проверки выяснилось, что правила стиля CSS, связанные с элементом класса div, удаляются из элемента при его рендеринге (в Firefox и Chrome не пробовал IE).

У меня такая настройка css:

.text-over-image {
   width: 960px;
   height: 100px;
   background-image: url("http://www.lupenet.org/wp-content/themes/Lupenet/images/header.jpg");
   margin-left: auto ;
   margin-right: auto ;
}

h8 { 
   position: absolute; 
   top: 20px; 
   left: 400px; 
   width: 960px;
}

h8 span { 
   color: black; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   padding: 10px; 
}

h8 span.spacer1 {
   padding:0 5px;
}

И html выглядит так:

<div class="text-over-image;" >
   <h8><span style="position:absolute;">La Unión Del Pueblo Entero<span class='spacer1'></span>
   <br><span class='spacer1'></span>"Celebrando el Pasado y Viendo Hacia el Futuro"</span></h8>
</div>

Поняв, что возникла проблема, я задал атрибуты высоты и ширины элемента .text-over-image в случае, если div просто был слишком мал для просмотра изображения, но фоновое изображение все еще не отображалось. Когда я проверил элемент с помощью firebug, я обнаружил, что элемент div .text-over-image вообще не показывает атрибуцию фонового изображения. На самом деле все правила стиля CSS стираются из этого элемента div.

Я даже попытался скопировать css и html другого веб-сайта, который делает именно то, что я пытаюсь сделать, но когда я это делаю, происходит то же самое (правила стиля удаляются из этого элемента div). Однако правила стиля CSS не удаляются из других элементов.

Теги:

2 ответа

2

Удалите ; от вашего класса:

<div class="text-over-image;">

Это должно быть просто <div class="text-over-image">

Пример jsFiddle

0

Я прочитал ваш css, и после этого я только что пришел к этому вопросу! В HTML нет законного элемента h8.

Поэтому я предполагаю, что проблема заключается в использовании h8, попробуйте заменить его на h6.

  • 0
    даже с недопустимым тегом h изображение все равно должно появиться. я думаю, что ошибка была ; в теге, как описано ниже

Ещё вопросы

Сообщество Overcoder
Наверх
Меню