Цвета CSS не отображаются - PullRequest
Новая
       4

Цвета CSS не отображаются

0 голосов
/ 14 сентября 2011

Я действительно новичок в использовании HTML и CSS, и я пытаюсь создать прямоугольное поле - 

<html>
<head>
<link rel="stylesheet" type="text/css" href="style2.css" /> 
<link rel="stylesheet" type="text/css" href="stylesAgg.css" />
</head>
<body>
<h1>Testing the class page</h1>

<ul>
{% for book in books %}
    <div id ="bookInfo" style = "display">
        <div>
            <text class= "text" id = "bookTitle">{{ book.title|safe }}</text></br>
            <text class= "text" id= "bookAuthor">by {{ book.author|safe }}</text></br>
        </div>
    </div>


{% endfor %}
</ul>

</body> 

</html>

Мой код CSS здесь - 

#bookInfo {
    float:right;
    width:700px;
    height:300px;
    background-color:#dd2424;
    padding-left:12px;
    padding-top:17px;
}

почему немоя html страница отображает цветной прямоугольник?

Спасибо!

РЕДАКТИРОВАТЬ - я включил все приведенные ниже советы, и они все еще не работают - однако, когда я просматриваю страницу через firebug, он говорит, что нет никаких правил (есть ошибка 404, несмотря на то, что у меня есть таблицы стилей) - я думаю, что это проблема - как я могу это исправить?

Ответы [ 2 ]

2 голосов
/ 14 сентября 2011

идентификаторы должны быть уникальными на странице HTML.Для форматирования нескольких элементов на странице с похожими правилами используйте атрибут class.Попробуйте изменить атрибут id на вашем div на class.Также измените свой CSS с #bookInfo на .bookInfo.

Также, <ul> запускает неупорядоченный список.Тип тега only , который разрешен непосредственно внутри него, является <li>, который создает запись в этом списке.<div> здесь не разрешено.Вы можете изменить <div> на <li> или просто удалить <ul>, в зависимости от ваших реальных семантических желаний.

Еще одно неправильное использование - ваши </br> теги.Если тег начинается с </, он считается закрывающим тегом, в отличие от <br/>, который является пустым тегом и, вероятно, имеет в виду именно то, что вы здесь имели в виду.

В качестве последнего совета по стилю, вам следует придерживатьсядля всех низших классов и идентификаторов. Это значительно упрощает отладку и выглядит лучше.

1 голос
/ 14 сентября 2011

В вашем коде есть несколько ошибок.

  1. атрибут id элемента должен быть уникальным для всей HTML-страницы.Я предполагаю, что книг будет больше, чем одна.Я рекомендую вам использовать attibute class="bookInfo" вместо id.Соответствующий селектор CSS может быть: .bookInfo {} (обратите внимание на точку в начале)
  2. значение атрибута стиля здесь: <div id ="bookInfo" style = "display"> недопустимо.Если вы хотите установить свойство отображения css, вам следует присвоить ему какое-то значение.В противном случае вы должны удалить весь атрибут.
  3. Вам не хватает <li> элементов <ul>.

Правильный код HTML должен выглядеть следующим образом: 

<html>
<head>
<link rel="stylesheet" type="text/css" href="style2.css" /> 
<link rel="stylesheet" type="text/css" href="stylesAgg.css" />
</head>
<body>
<h1>Testing the class page</h1>

<ul>
{% for book in books %}
  <li>
    <div class ="bookInfo">
        <div>
            <text class= "text" id = "bookTitle">{{ book.title|safe }}</text></br>
            <text class= "text" id= "bookAuthor">by {{ book.author|safe }}</text></br>
        </div>
    </div>
  </li>

{% endfor %}
</ul>

</body> 

</html>

и css: 

.bookInfo {
    float:right;
    width:700px;
    height:300px;
    background-color:#dd2424;
    padding-left:12px;
    padding-top:17px;
}

Также убедитесь, что файл css действительно загружен вместе со страницей.Я рекомендую использовать инструменты Firebug (расширение Firefox) или Chrome dev ... Щелкните правой кнопкой мыши в любом месте страницы - проверьте элемент.Очень полезно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...