CSS Colours not displaying
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.
加载中,请稍侯......
精彩评论