I have the following HTML Code, If I have a lot of text inside my div called content, the footer div doesn't move downward and the texts go over my footer div.
To see the problem, please check this link http://jsfiddle.net/LhzrQ/
Could You please tell me how to solve the problem?
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;width:400px;float:left;">
HyperText Markup Language (HTML) is the main markup language for displaying web pages and other information that can be displayed in a web browser.
HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content. The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com
</div>
</div>
</body>
You can delete the height element of the content div.
See: http://jsfiddle.net/LhzrQ/1/
Working fiddle
remove the fixed height to the content div. it will work .
Related
Im trying to change the html code of a website. As you can see here: https://share-your-photo.com/b12b204e8c
The Code starts with an h3 tag. i want to replace it with a p tag. at beginning with <p class=and at the end of the code with </p>. But the code turns red at the end. can you give me a solution how i can do?
So I see that you had the <h3></h3> wrapped around everything and that is not the proper syntax in html. Its called hierarchy. Hierarchy is
An element that is directly above another element in the hierarchy is
called the parent of the element below it. The element below the
parent is called the child. When two elements are equal in the
hierarchy, they are known as siblings.
--Thx Google... A <h3></h3> tag can't wrap all of those elements only tags like a <div> can or a <span>. A <div> tag is a block element. So if you have 2 <div> tags like this... <div>HI</div> and <div>Hello</div> "HI" will be on top and "Hello" will be on the bottom but if it were <span> It will make it horizontal <span>Hi</span> and <span>Hello</span> the output will be "Hi Hello". If you check out this link they briefly explain nesting. But there are many many places you can go to understand this [https://www.w3schools.com/html/html_elements.asp1 Hopefully that helps you! Keep on coding! 👍
You said: "_the code turns red at the end...". The end of what??? Are you trying to edit the code locally in an editor such as sublime, vscode?
Basically, think of an Html document as a Word document that contains titles, subtitles, etc..
In Html documents, we have the following hierarchy structure.
<h1>My Page Title</h1>
<h2>My Page Subtitle</h2>
<p>here we can have only text, <strong>bold text</strong>, <i>italic</i>, and other styled text with <span>spanned texts</span></p>
<div>
<h3>Layouts</h3>
<p>you can use divs to structure your layout, so, doesn't make sense to have divs inside paragraphs.</p>
<p>If you want, you can break lines with <br> tags</p>
</div>
For example, I have a page that has HTML like this
<div class="row">
<div class="col-md-4">
<!-- Dynamic content here that can contain html tags -->
</div>
<div class="col-md-4">
<!-- Dynamic content here that can contain html tags -->
</div>
<div class="col-md-4">
<!-- Dynamic content here that can contain html tags -->
</div>
</div>
is there a simple solution to prevent this "Dynamic content" to messed up my page HTML template.
For example, if the "Dynamic Content" contain HTML div tag that does not have a closing div tag, then my page template/style will be broken because of this "Dynamic Content"
Usually for some servers if minor mistakes like this happen in html/css/script it automatically neglects it and displays the design as we expect.
Note: it happens sometimes for some servers.
But for some servers, even a div is not closed or bracket is not closed properly it shows server error.
In general, it is better to design the html section separately in any editor and then update it dynamically.
Better to avoid these issues at initial stage...
regarding to that article https://www.polymer-project.org/0.5/articles/spa.html i want to know how to add some content?
i know there is an example which loads external html files. but how to add my own content in the other examples?
Thank you
kind regards
Viktoria
on the page you linked there is a section headed "then drop in your content:"
then it is followed with this code.
<div layout horizontal center-center fit>
<core-animated-pages selected="0" transitions="slide-from-right">
<section layout vertical center-center>
<div>Single</div>
</section>
<section layout vertical center-center>
<div>page</div>
</section>
...
</core-animated-pages>
</div>
in that code each section tag is a diff page and the content of that page is in the enclosed div tag <div>Single</div> replace that tag to change the app content. it might also help to look over the documentation on the elements used in that example so you have a better understanding of how they work.
animated pages
https://www.polymer-project.org/0.5/docs/elements/core-animated-pages.html
I'm curious as to exactly what the flexibility is for the html5 <object> tag.
If I have a main web page set up like this
<body>
<div id="container">
<object data="??"></object>
</div>
</body>
and in a separate webpage I have this:
<body>
<div id="info">
<p> text text blah blah text </p>
</div>
</body>
Is there a way to pull specifically the html from the "info" div on the secondary page into the object on the primary page? If not, what kind of alternative solution should I look into?
object is not an HTML5 specific tag, it also existed in HTML 4.01. It is not useful for including pages into other pages, rather it allows the page to contain Java Applets, Flash etc. The only HTML solution for including pages is the iframe tag.
You should instead insert some JavaScript that makes an AJAX call to fetch the second page. Parse it using innerHTML. Then you can select the desired element using getElementById and insert it into the container div.
If you want to do it from the server side, have a look at PHP...
Currently when I attempt to use data-role=collapsible there is nothing left (no button, link or content). According to the documentations it uses a h1-h6 tag but mine is inside a html5 header block.
Should I forget about the html5 semantics since this is a mobile site? Or should I attempt to make it work somehow, if so any ideas?
Link to docs: http://jquerymobile.com/demos/1.0a3/#docs/content/content-collapsible.html
Example of my current setup:
<article data-role="collapsible" data-collapsed="true">
<header>
<h2>Title</h2>
</header>
<div class="content">
<!-- some data -->
</div>
<footer>
<!-- some data -->
</footer>
</article>
jQuery Mobile is built with progressive enhancement in mind, so it assumes you want your app to work in any device possible ("work" meaning just support basic features)
Try replacing your nicely named tags with DIVs and remove wrapper around H2. Should help.