CODEWITHSUNDEEP
htmlcsscolors
praks5432
praks5432

Reputation: 7792

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

Upvotes: 0

Views: 1283

Answers (2)

JoshuaBoshi
JoshuaBoshi

Reputation: 1286

You have few errors in your code.

  1. 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)
  2. 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.
  3. 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.

Upvotes: 1

Holger Just
Holger Just

Reputation: 55718

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.

Upvotes: 2

Related Questions