CSS Colours not displaying_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-04 14:42 出处：网络

I\'m really new to using HTML and CSS and I\'m trying to create a rectangular box - <html> <head>

相关专题：colors css

I'm really new to using HTML and CSS and I'm trying to create a rectangular box -

<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"开发者_StackOverflow id= "bookAuthor">by {{ book.author|safe }}</text></br>
        </div>
    </div>


{% endfor %}
</ul>

</body> 

</html>

My css code is here -

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

why doesn't my html page display the coloured rectangle?

Thanks!

EDIT- I've included all the advice below and it still doesn't work - however, when I view the page through firebug, it says that there are no rules(there's some 404 error, despite the fact that I have the style sheets) - I think this is the problem- how do I fix it?

IDs are supposed to be unique in an HTML page. For formatting multiple elements on a page with similar rules, use the class attribute. Try to change the id attribute on your div to a class. Also change your CSS fro #bookInfo to .bookInfo.

Also, <ul> starts an unordered list. The only tag type that is allowed directly inside of it is a <li> which creates an entry in that list. <div>'s are not allowed here. You could either change the <div> to a <li> or just drop the <ul> altogether, depending on your actual semantic desires.

Another wrong usage are your </br> tags. If a tag starts with </ it is considered a closing tag, as opposed to <br/> which is an empty tag and is probably what you meant here.

As a final advise to style, you should stick to all lower classes and IDs.It makes debugging much easier and looks better.

You have few errors in your code.

the id attribute of an element must be unique across the whole html page. I assume that there will be more books than one. I recommend you to use attibute class="bookInfo" instead of id. The corresponding css selector could be: .bookInfo {} (notice the dot at the start)
value of style attribute here: <div id ="bookInfo" style = "display"> is invalid. If you wanted to set css display property, you should assign some value to it. Otherwise, you should delete the whole attribute.
You are missing <li> elements of the <ul>.

The correct HTML code should look like this:

<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>

and css:

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

Also make sure, that css file is really loaded with the page. I recommnend usage of Firebug (Firefox extension) or Chrome dev tools... Right click anywhere on page - inspect element. Very helpful.