CSS Colours not displaying - html

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?

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.

Related

Forms not clickable inside div in HTML

I am writing an app in Django and it works perfectly fine when not including divs but when including divs, I cannot click on any forms or texts after the post request (weirdly, it works fine before the post request).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Some title</title>
<link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-0.13.0.min.css" type="text/css" />
</head>
<body>
<div style="width:1200px;">
<div style="width:300px; float:left;">
{% block content %}
<form method="post" action="">
{% csrf_token %}
<table>
{{ form.as_table }}
</table>
<input type="submit" value="Calculate"/>
</form>
<li>Some text</li>
{% endblock %}
</div>
<div style="width:900px; float:right"; >
Some text
</div>
</div>
<body>
</html>
I am very new to HTML but I read that it is related to CSS somehow but I want to avoid fiddling with that when using Django.
The <body> tag should go immediately after <head>. Close out the <body> tag at the end of your code.
There are some conventions which need to follow while working in HTML.
we write html just like xml (Open tag and closing tag)
html tag is the root element of DOM
In html, we have two major tags: head and body
In head, we normally add dependencies tags required to our web page and meta data of our page and this part this not visible to user in browser's view
In body, we write code that we can see in browser
divs, spans, input fields, forms and all other tags should be inside the body
So according to 1 - 6, you are violating the conventions of html. You need to include your all div tags under body

Html and css doesnt work

My css doesnt work (html and css file are in the same folder) and i tried to give all the path ton href ,here is my files.First file is menu2.html and second is menu2style.css.Can anyone help?
html:
<head>
<title>
test menu
</title>
<style>
<rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.html">
</style>
</head>
<body>
<nav>
PHOTO 1
PHOTO 2
PHOTO 3
PHOTO 4
PHOTO 5
</nav>
</body>
and css:
nav{ background-color:#99FF66;}
<style>
<rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.html">
</style>
The style element is for inline style. Don't put HTML to load an external stylesheet in it. Remove <style> and </style>
<rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.html">
HTML start tags require a type before you put any attributes. In this case you need a link element.
<link rel...
The URL to your CSS should be:
To your CSS, not to an HTML document.
Either relative to the root of your website (e.g. /css/styles.css) or relative to the current document (styles.css since you say they are in the same folder). Not the full path on your local filesystem.
You don't need a type attribute here either.
Thus:
<link rel="stylesheet" href="styles.css">
If you include an external stylesheet, you must not wrap the element in style tags.
<!-- styles in menu2style.css -->
<link rel="stylesheet" type="text/css" href="menu2style.css">
<!-- inline styles -->
<style>
nav { background-color:#99FF66;}
</style>
Make sure you have the correct path specified in the href attribute!
You can write your style in the head, by using style tag.
if you want to external css you should use only link tag. you go to wrong way, because you are write the link tag in style tag.
<link rel="stylesheet" type="text/css" href="Your_directory/menu2style.css">
you write the wrong extension of style css style.It should be the dot css(.css)
Hmm.. I think you need to see the basics of HTML/CSS...
Here's an example of full html document :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="path/to/your/file/styles.css">
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
You can see more examples here :
W3Schools
you have no need to write style tag
and you missing the link rel for add css style sheet
test menu
<***link*** rel="stylesheet" href="var/www/html/css_tests/menu2style.html" type="text/css">
<body>
<nav>
PHOTO 1
PHOTO 2
PHOTO 3
PHOTO 4
PHOTO 5
</nav>
</body>
test menu
<rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.html">
<body>
<nav>
PHOTO 1
PHOTO 2
PHOTO 3
PHOTO 4
PHOTO 5
</nav>
</body>
test menu
<link rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.css">
<body>
<nav>
<img src="">PHOTO 1</A>
<img src="">PHOTO 2</A>
<img src="">PHOTO 3</A>
<img src="">PHOTO 4</A>
<img src="">PHOTO 5</A>
</nav>
</body>
The problem is with your link where you have given the path of your CSS file. It becomes difficult for the browser to understand what kind of path he has to point in order to get the relevant styles.
What I have done is I have created a separate file named menu2style.css and I have refered in my HTML page. This is a kind of using stylesheet, and it is called External Style.
Step 1: Create a file with named menu2style.css (css is the extension of stylesheet just in case if you are not aware of)
<style>
nav{
background-color:#99FF66;
}
</style>
Step 2: Refer the path of the CSS stylesheet that you just created in step1.
<link rel="stylesheet" type="text/css" href="C:/MyFolder/menu2style.css">
If you see above in the path I have given absolute path. This points the exact location in your file/ folder and renders the stylesheet from it onto a webpage.
Hope this helps.

Html Hierarchy: Whats acceptable when extending the <head>?

When creating an html document my code works either way, but how do others like to organize their html hierarchy? for example I like to put my site's banner and the navigation bar in <head>.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script type='text/javascript' src='script.js'></script>
<title> User's Profile'</title>
<div id="header">
<img src="http://svc004.bookeasy.com/images/MARGS/flourish-website-banner3.jpg" />
</div>
<div id="toolbar">
<span>Username</span>
<p>Profile</p>
<p>Medals</p>
<p>Account Settings</p>
<p>logout</p>
</div>
</head>
<body>
<div id="left_nav">
<p>Home</p>
<p>Scout</p>
<p>Attack</p>
<p>Fourms</p>
<p>Contact</p>
</div>
</body>
</html>
You shouldn't put anything in your head that you want to display as en element, because it's not the correct element for it.
It may work but you never know when it may not (or have subtle bugs). It will also confuse anyone who has to maintain this markup after you.
The spec says that the <head> element has to contain:
One or more elements of metadata content, of which exactly one is a title element.
Further down:
Metadata content is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band" information.
You can only put these tags in there:
<base>
<link>
<meta>
<noscript>
<script>
<style>
<title>
The way you're doing it isn't good. Put the header in a <header> element in the <body>.

How to structure layout of an HTML page?

I was wondering if anyone had any suggestions as how to structure a website. I have a logo at the top, I wanted a navigation bar below that, and finally below that I wanted to have the page's contents. I messed around with it for hours, but I can't seem to get the navigation bar to go below the logo and above the main content. Does anyone have any ideas? Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="slideshow.js"></script>
<style>
#Slideshow1 img { width:1200px; height:500px }
</style>
<title> Law Firm </title> <!-- Seriously, don't forget to change that.-->
<div class="heading">
<div id="head">
<div id="logo">
<img src="logo.png" alt="Logo" width="1700" height="175">
</div>
<div id="navigation">
Home
About us
Areas of Practice
Reviews
I'm running out of ideas
Boring....
</div>
</div>
</div>
<!-- Include content types, links to external resources, keywords for the search engine, epirations and stuff, and whatever else needs to go here like titles and website icons. -->
</head>
<body> <!-- Obviously, the body starts here. -->
<div class="main">
<div id="content"> <!-- Let's kick it off with some stuff, of course. -->
<!-- Now let's get some java up in here!! -->
<script>
var imgArray = new Array();
imgArray[0] = "images/pic1.png";
imgArray[1] = "images/pic2.png";
slideshowFade('Slideshow1','',imgArray,20,5000);
</script>
</div>
</div>
</body>
</html>
It might help if you made a JSFiddle of what was going on, but I think I can answer this.
1) You're putting stuff in the head tag. I think you misunderstand what it means. It's not the "heading" of the page, it is ment for information that won't show up on the page itself (like what the page is called, what type of page it is). EVERYTHING (Meaning every div) goes in the body tag! The body doesn't mean the body of the website, it means what shows up on the page!
2) I can only guess because you haven't attached the style sheet, but I'm guessing you don't have clear: both on navigation, heading, and logo styles.
3) To the same elements I mentioned in #2, you may also want to add display: block just in case that isn't already set.
4) If 2 and 3 don't work, try defining heights for all of the elements as well (Sometimes this works for me, depending on what is causing the problem)
1 doesn't fix your problems, but it's right. 2 should fix your problem, but you really need to put main.css into your question because I can't know for sure. Also, look into using a ul tag for menue. It's worth doing.
Here is a JSFiddle example: http://jsfiddle.net/5JqUt/
You cannot have structural elements (like your <div>s) in a <head> element. All structural elements belong in the <body>.
You are writing your HTMLK code in the head trag so it's not visible. You should
write everything in between <body></body> tags of your page. Just bring your <div class="heading"> out of the head tags and put it inside body tag.
Here is an answer about HTML, if you look at the fiddle examle then you can understand it a bit. Remember that, every visible elements in a web page is the contents of the body tag, which means that, whatever you see in a web page, belongs to <body>your page content goes here</body>.
Here's a little messy code (functional, though) that I make for you:
<body bgcolor="#f5f5f5">
<link href='http://fonts.googleapis.com/css?family=Lato:100|Lato:300' rel='stylesheet' type='text/css'>
<div style="position:absolute;top:0px;left:0px;width:100%;">
<center>
<div style="color:#c3c3c3;font-size:75px;font-family:Lato;padding-top:25px;font-weight:100;">designing rocks</div>
<div style="text-align:left;width:465px;font-size:20px;font-family:Lato;font-weight:300;padding-top:10px;"><span style="color:#00bbbb;">home</span> <span style="color:#c3c3c3;">blah</span> <span style="color:#c3c3c3;">blah</span> <span style="color:#c3c3c3;">blah</span> <span style="color:#c3c3c3;">blah</span> <span style="color:#c3c3c3;">blah</span> <span style="color:#c3c3c3;">blah</span>
</center>
<div style="position:absolute;top:165px;left:0px;width:100%;">
<center>
<div style="text-align:left;width:600px;background-color:white;font-family:Lato;font-weight:300;padding:25px;color:gray;">I LOVE content!</div>
</div>
</div>
You can always do embellishments, like a hover effect for the navigation links...
Tell me if it's functional. :)
You could always scrape a little of the ideas for your project.
Oh, and the other answers are correct, the reason why your layout doesn't work could be due to the fact that the page content is in the head. The head is for the title of the page, (title), and scripts you want to load before any other go in the head. The body is the part of the page that's visible to the user.

HTML5 Validation Errors

I have a bit of problem when trying to validate my page as HTML5. There are two errors. The first says, 'Element head is missing a required instance of child element title', and the second error is, 'Element hr not allowed as child of element ul in this context. (Suppressing further errors from this subtree)'.
Here is my source code
<!DOCTYPE html>
<html lang="en">
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="core/css/style.css">
</head>
<body>
<nav>
<h1>Name</h1>
<ul>
<hr>
<li><img src="core/images/home.png" alt="Home"></li>
<hr>
<li><img src="core/images/about.png" alt="About"></li>
<hr>
<li><img src="core/images/projects.png" alt="Projects"></li>
<hr>
</ul>
</nav>
-Thank you in advance for any help
As Juhana's comment points out the errors are self-explanatory:
Element head is missing a required instance of child element title
This means you are simply missing a <title> tag in your <head> tags. You should definitely give your page a title!
Element hr not allowed as child of element ul in this context
By there very nature, <ul> (unordered list) tags can only contain <li> (list item) tags. You are wrong to use a horizontal-rule inside your list. You can achieve the same effect with CSS. I suggest read a few more tutorials on HTML and basic CSS.
I had the same problem with <hr> tags inside an <ul>. Instead of applying new css rules to your list you just have to contain <hr> inside of a <li>.
<ul>
<li><hr/></li>
<li>text</li>
</ul>
Then all of your elements inside of a <ul> are properly nested and contained. No extra work necessary.