<div id="header">header</div>
<div id="content">
content spanning several pages...
</div>
<div id="footer">Footer - Fixed at the bottom of each page</div>
I want to print #header and #footer on every page in print mode. I searched a lot but nothing seems to work, even position:fixed doesn't work as expected.
If you're willing to switch over to tables for your layout (not necessarily ideal), you can do it with the <thead> and <tfoot> elements. They'll print at the top and bottom of every page:
<table>
<thead>
<!-- Will print at the top of every page -->
</thead>
<tbody>
<!-- Page content -->
</tbody>
<tfoot>
<!-- Will print at the bottom of every page -->
</tfoot>
</table>
Another option is to use display table-header-group and table-footer-group but cross-browser support isn't great:
#header {
display: table-header-group;
}
#main {
display: table-row-group;
}
#footer {
display: table-footer-group;
}
I think I arrived too late :), but I was looking for something like this, and I found one answer that helps me (source https://www.youtube.com/watch?v=yDgFLysON98).
I wrote the div tag before and after the content like this
<div id="header">Top div content</div>
.
.
.
<div id="footer">Bottom div content</div>
Example:
<!DOCTYPE html>
<html>
<head>``
<style>
body {
background-color: #CCC;
margin:48px 0px 0px 64px;
}
div#header {
position:fixed;
top:0px;
left:0px;
width:100%;
color:#CCC;
background:#333;
padding:8px;
}
div#footer {
position:fixed;
bottom:0px;
left:0px;
width:100%;
color:#CCC;
background:#333;
padding:8px;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<h1>Page Heading</h1>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<div id="footer">FOOTER</div>
</body>
</html>
... I hope this helps.
For that you need to use the mso (microsoft office css properties) in your style:
<style><--
#page
{
size:21cm 29.7cmt;
margin:1cm 1cm 1cm 1cm;
mso-title-page:yes;
mso-page-orientation: portrait;
mso-header: header;
mso-footer: footer;
}
#page content {margin: 1cm 1cm 1cm 1cm;}
div.content {page: content;}
</style>
Nisse Engstroms answer is correct. You just need to put the thead and tfoot content inside a tr to make it work.And it also is the best method because when you use absolute positioning in a div to make header and footer it will always overlap with your main body content on the next page.
<table>
<thead>
<tr> !-- these are important
<th id="header"> !--- these are important
!--- content of header here
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
!---- main body here
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th id="footer">
!----- content of footer here
</th>
</tr>
</tfoot>
</table>
Related
I have the following html structure:
<main class="previous-knowledge">
<h1>Title 1</h1>
<section>
<article>
<h2>Subtitle 1</h2>
<p>Very big paragraph 1</p>
</article>
<article>
<h2>Subtitle 2</h2>
<p>Very big paragraph 2</p>
</article>
</section>
</main>
And the following css:
main.previous-knowledge h2 {
position: sticky;
top: 0px;
}
I want to stick every subtitle while a user scrolls over every article, unfortunately, even when the subtitle stays stick on top, it does not "push" the p element. What I mean with push is that the p element stays below the h2 while scrolling.
I have a div container that contains 2 divs: banner and content. Both banner and content have css property width set to 100% but they are different when rendered.
this is my index.html
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet"/>
<title>JoeY34kaze's gw2 stuff</title>
<body>
<div id="container">
<header>
<h1>
This is my header.
</h1>
</header>
<div id="banner">
<h2>
This is the banner.
</h2>
</div>
<div id="content">
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
<p>Content goes here.</p>
</div>
</div>
</body>
</html>
this is my style.css
body {
text-align:center;
}
header {
width:100%;
height:100px;
background: #dbdbdb;
z-index:10;
position: fixed;
}
#container {
overflow:hidden;
min-width:100%;
padding:0;
}
#banner {
width:100%;
height: 500px;
padding:0;
position: fixed;
top: 100px;
background-color:#707070;
}
#content {
height:100%;
width:100%;
position: relative;
top:400px;
background-color: #ebebeb;
}
and the page looks like this:
website
Until i resolve this issue the page is also live here https://gw2stuff.herokuapp.com/
The problem is that on the right side the 2 divs aren't aligned, but they should be.
I think that the problem comes from the relative position of the content div, but i was unable to fix it, so my question is how do i align the 2 divs so that their widths will match?
Remove the default margin on the body
body {
margin:0;
}
The #content div is affected by that margin but the fixed position elements are not although they are placed in relation to that margin becausee you have not stated a left:0 position for them.
This should be automatically included in any CSS Reset.
Addmargin: 0 to the content,
If this doesn't work, move the content a little, perhaps left: 5px would work
Change position of content to:
position: fixed;
I'm trying to put a fixed element within another fixed element like this
<div class="wrapper-fixed">
<div class="content">
<div class="element-fixed">
<p>I'm fixed in Chrome, FF</p>
<p>Why not in IE ?</p>
</div>
</div>
</div>
When I scroll the page in Chrome and FF element-fixed stay fixed but in IE it scrolls too and I guess that should not happen because a fixed element is outside the document flow.
I tried pulling it out of the content but did not work, pulling it out of wrapper-fixed it does but in my case I can't.
HERE A JSFIDDLE similar to my real situation
So why that happens and how fix it without pulling it out of wrapper-fixed
Adding images to illustrate the problem:
Option 1
Change your wrapper position to absolute
.wrapper-fixed{
position: absolute;
...
Fiddle - http://jsfiddle.net/za4hdmpf/
Option 2
Won't be suitable as this requires a solution that does not involve pulling element-fixed out of wrapper-fixed.
Change your markup and make position adjustments to your element-fixed
<div class="wrapper-fixed">
<div class="content">
<p>Content</p>
<p>Content 1</p>
<p>Content 2</p>
<p>Content 3</p>
<p>Content 4</p>
<p>Content 5</p>
<p>Content 6</p>
<p>Content 7</p>
<p>.</p>
<p>.</p>
<p>.</p>
</div>
</div>
<div class="element-fixed">
<p>I'm fixed in Chrome, FF</p>
<p>Why not in IE ?</p>
</div>
CSS
.element-fixed{
position: fixed;
width: 170px;
border-radius: 10px;
top: 70px;
left: 50%;
margin-left: -290px;
background-color: #fff;
}
Fiddle - http://jsfiddle.net/vuykwu76/
I am trying to access Foundation 4 sections by clicking a link on a page. Here's my problem explained in more detail. This is what sections in Foundation look like :
And here's the code for it.
<div class="section-container vertical-tabs" data-section="vertical-tabs">
<section>
<p class="title" data-section-title>Section 1</p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Section 2</p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Section 3</p>
<div class="content" data-section-content>
<p>Content of section 3.</p>
</div>
</section>
</div>
When you click on Section 1, it opens the content of section 1. The same thing for section 2 and 3. Now, is there a way to post a link somewhere on a site, for example link to Section 1, 2 and 3. When you click on one of them, it will go on the sections part and will open the right section content based on which linked we clicked on.
http://foundation.zurb.com/docs/components/section.html
Checkout deep linking section for examples of how to get this functionality working.
Here is a quick example;
<div class="section-container auto" data-section data-options="deep_linking: true">
<section>
<p class="title" data-section-title>Section 1</p>
<div class="content" data-slug="section1" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Section 2</p>
<div class="content" data-slug="section2" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
To get the linking to work just add the ID to your URL. eg. http://someurl.com/#section2
I'm a bit puzzled how I'm supposed to use the HTML5 <header>, <section>, and <footer> tags. Currently, I can't work out whether to use them like this:
<section id="example_section">
<header>
<h1>Example Section</h1>
<p>etc</p>
</header>
<p>Content para 1</p>
<p>Content para 2</p>
<p>Content para 3</p>
<footer>
Wasn't that swell?
</footer>
</section>
Or like this:
<header>
<h1>Example Section</h1>
<p>etc</p>
</header>
<section id="example_section">
<p>Content para 1</p>
<p>Content para 2</p>
<p>Content para 3</p>
</section>
<footer>
Wasn't that swell?
</footer>
Or compromising, like this:
<section id="example_section_wrapper">
<header>
<h1>Example Section</h1>
<p>etc</p>
</header>
<section id="example_section">
<p>Content para 1</p>
<p>Content para 2</p>
<p>Content para 3</p>
</section>
<footer>
Wasn't that swell?
</footer>
</section>
I've included the ID's to show the intended meaning of the sections. I realise that they are unnecessary. Which method is correct?
All are correct in one way another but this is more better then any other
<section id="example_section_wrapper">
<header>
<h1>Example Section</h1>
<p>etc</p>
</header>
<section id="example_section">
<p>Content para 1</p>
<p>Content para 2</p>
<p>Content para 3</p>
</section>
<footer>
Wasn't that swell?
</footer>
</section>
Couple of best practice and tuts links
HTML 5 and CSS 3: The Techniques You’ll Soon Be Using
HTML5 Overview (*best practice block)
Designing for the Future with HTML5+CSS3 : Tutorials and Best Practices
A section can contain a section but a better general container is actuall article. Instead of this:
<section id="example_section_wrapper">
<header>
<h1>Example Section</h1>
<p>etc</p>
</header>
<section id="example_section">
<p>Content para 1</p>
<p>Content para 2</p>
<p>Content para 3</p>
</section>
<footer>
Wasn't that swell?
</footer>
</section>
You might want to use this:
<article>
<header>
<h1>Example Section</h1>
<p>etc</p>
</header>
<section id="example_section">
<p>Content para 1</p>
<p>Content para 2</p>
<p>Content para 3</p>
</section>
<footer>
Wasn't that swell?
</footer>
</article>
Like this it feels natural to have various sections in one article.
The tags themselves are pretty abstract, right now. You can use them in any of the ways described above, but your third option is most-correct.
They can all make sense, but the first one is the most correct, in general.
Assuming the whole snippet represents a real section (content about the same topic) it makes sense for it to have a header and a footer inside of the section itself. Also a section needs a heading (h1-6, at least one. Possibly with a hgroup if more than one) and it's missing from your second and third example.