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
Related
I generate and send an email with text/html content.
General structure:
<!DOCTYPE html>
<html>
<head>
<title>{title}</title>
<style type="text/css">
{% block stypes %}
{% endblock %}
</style>
</head>
<body>
{% block content %}
{% endblock %}
</body>
In my email box, I received properly generated the email (html/css works as expected).
But when I forward the message it seems that <styles> tag is removed.
Is it possible to retain css styles on forwarding?
Forwarded mail dosnt hold the same styles as the original html/css. The mail client will add and remove a lot og styles in your code..
What you can do is to Attach the mail to another mail, then the format will hold.
I know you 'should not' do this but I noticed something interesting with forms nested within a parent form element. If you have mulitple forms the rendering engine seems to strip out the first child form then remove all other child forms and add them after the closing form tag of the parent. Why does the rendering engine behave this way? Tested in Chrome and Firefox:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Form Test 1</h2>
<form id="form1">
<form id="form2">
</form>
<form id="form3">
</form>
<form id="form4">
</form>
</form>
</body>
</html>
If you open this in a browser form 2 will be removed and all others added after form 1.
I am working with a very big HTML file, which has a lot of content in the body section.
Are there any "compilers" or merging applications for HTML that can merge multiple HTML files?
Example:
a.htm
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
INCLUDE "b.htm"
<div>
INCLUDE "c.htm"
</div>
</body>
</html>
b.htm
some text
Link
INCLUDE "c.htm"
c.htm
more <span>text</span>
would be merged to:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
some text
Link
more <span>text</span>
<div>
more <span>text</span>
</div>
</body>
</html>
There are indeed – depending on your needs these offer drastically different mechanisms and tools.
One particular quite simple HTML compiler that is fashionable at the moment is Jekyll. Jekyll powers the blogging engine on GitHub Pages and is both easy to use and extensible.
In your case, you’d for instance write
{% include c.htm %}
instead of
INCLUDE "c.htm"
I decided to write htmlcat for exactly this purpose.
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>.
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.