I want to add a footer to an HTML page that will be repeated across all pages WHEN PRINTING. I have managed to achieve this through this code:
#media print {
p.note {
bottom: 0; position: fixed;
}
}
But now I have a problem with this paragraph going on top of the rest of the copy
According this Mirosoft article, this should work for me:
#page :first {
margin-bottom: 4in;
}
But it doesn't, it doesn't change anything... any ideas?
Here's the solution that worked, CSS is this:
#media print {
p.note {
display:block;
bottom:0;
position:fixed;
font-size:11px;
}
}
And everything needs to be contained in a separate div with this CSS
#wrapper {
position:relative;
bottom:1in;
margin-top:1in;
width:974px;
margin:0 auto;
}
This worked perfectly!
How about adding some z-index ? It seems that the footer overrides the last paragraph
Also try to use
#media print {
p.note {
bottom: 0; position: fixed;
margin-top:10px;
}
}
Make sure that the container for the main content makes room for the footer. For instance, if your markup looks something like this:
<div id="content"><p>Lorem Ipsum Latin et cetera</p></div>
<p class="note">Footer</p>
You'd want some css like this:
#content {margin-bottom:4in}
To create room for your footer text you can use a table with tfoot. Use tfoot>tr to create a spacer. Place your footer text inside a div container that has position:fixed; to bottom:0;.
CSS
table {width:100%;}
#media print {
tfoot>tr {height:20mm;}
tfoot div {position:fixed;bottom:0;}
}
HTML
<body>
<table>
<thead><tr><td>Page header</td></tr></thead>
<tbody><tr><td>
<p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>
</td></tr></tbody>
<tfoot><tr><td><div>Page footer</div></td></tr></tfoot>
</table>
</body>
Related
How can I repeat some footer information on each print page using #page?
I don't want to use a fixed position div as suggested in a "duplicate" question.
I've just got a completely standard HTML template with the following in the body:
<div id="main">
<h1>This is the title</h1>
<p>And the content</p>
</div>
This is my css:
#media print {
.page-break {
page-break-after: always!important;
}
}
#page {
size: 7in 9.25in;
margin: 27mm 16mm 27mm 16mm;
}
#page :left {
#bottom-left {
content: "This is a test";
}
}
At the moment in the latest version of Chrome it's not showing anything in the print preview. Where am I going wrong?
i've been playing around with this. seems #page has very limited use.
here's what i could get. not what you were hoping for. a positioned div might be best if you can.
#media print {
.page-break {
page-break-after: always !important;
}
/* this adds the content to the bottom of the first page only.
div::after {
content: "This is a test";
bottom: 0;
position: absolute;
} */
/* this adds the content right beside the div. kind of useless.
.page-break::after {
content: "This is a test";
} */
/* this adds the content to the bottom of the first page only,
but multiple times; once for every page-break class i guess.
.page-break::after {
content: "This is a test";
position: absolute;
bottom: 0;
} */
}
You can try it like this:
<head>
<style>
p { page-break-after: always; }
.footer{ position: fixed; bottom: 0px; }
.pagenum:before { content: counter(page); }
</style>
</head>
<body>
<div class="footer">Page: <span class="pagenum"></span></div>
<p>lorem ipsum ...</p>
<p>lorem ipsum ...</p>
</body>
My example is for page footer but you can do the same with page header by specifying top where I said bottom and of course 'footer' becomes 'header'. You can put both header and footer
Another option you could try is something I used for a while, you will need to setup a local to view php files (look into wamp for windows and mamp for mac -- linux manually), but if you make a php file just containing your footer or navbar etc you can use the php load function to get it into another page.
//In footer.php
<footer>Footer Stuff</footer>
//In index.php or other pages
<body>
<div id="whereFooterShouldBe"><?php load('footer.php') ?></div>
</body>
In doing this your file references in your footer.php (css links js tags etc) will need to be file-pathed relative to the file which your are using the php load function in, not the footer.php itself.
Even further this method could be used to load any html from one file into another. This is very useful for rapid development, with my clients I use this method for my footer and navbar so I only have 1 file to change that will result in the correct changes being made across all pages.
Contents of my webpage(be it header,menu etc.,) are not fitting into browser window.Below is the HTML & CSS code i have used
HTML
<div id="header">
</div>
CSS
#header {
height:150px;
width:100%;
position: relative;
background-image: url("top_frame.png");
And here is the output I get:
Add the following:
body {
margin: 0;
}
in the CSS.
Here is the fiddle.
I replaced background-image with background : red; for testing purpose as I didn't have the image
Please use Normalize.css before your custom css.
I have a fixed navigation(header on the homepage. I am using wordpress therefore this fixed header is in the header.php I do not want the fixed header to also work on the other pages. How can I do that:
This is the style I am applying:
#header, #footer{
position:fixed;
display:block;
width: 100%;
background: #05556d;
z-index:9;
text-align:center;
color: #f2f2f2;
}
#header{
top:0px;
}
#footer{
bottom:0px;
padding:10px 0px;
font-size:12px;
}
What Can I do to fix this ?
Look at the classes added on the body element. Multiple classes are there and differ with the template used, the current page etc caetera.
Use one of these to condition the position css property on your header.
#header, #footer{
display:block;
width: 100%;
background: #05556d;
text-align:center;
color: #f2f2f2;
}
#footer{
padding:10px 0px;
font-size:12px;
}
.homeClass #header, .homeClass #footer{
position:fixed;
z-index:9;
}
.homeClass #header{
top:0px;
}
.homeClass #footer{
bottom:0px;
}
If you can't see a different class you can add one conditionnaly in functions.php:
add_filter('body_class','custom_body_class');
function custom_body_class($classes) {
if(YOUR_ISHOMEPAGE_CONDITION) $classes[] = 'homeClass';
return $classes;
}
[EDIT]
Looking at the staging version I see you theme adds no class to the body whatsoever. Look at header.php and find the opening body tag. If it has no class attribute, then add
<body <?php body_class(); ?>>
Also
The code in page-js.js invokes the jQuery fullPage plugin on every page. You should edit it so it checks the body class before calling fullPage like so:
if(!$('body').hasClass('home')){
$('#fullpage').fullpage({...});
}
With CSS
The body class should be .home on the home page. So you can make the header fixed on the home page and not the other pages by prepending .home to your styles:
.home #header, .home #footer{
position:fixed;
...
}
Or as #Armel answered, perhaps the class differs depending on the template/theme. You should be able to look into it with a browser developer tool and replace .home with whatever class it ends up being.
Might need to do the opposite and declare that all other #header and #footer elements are set to position: static, and it might be required to declare that it's important to override other styles: position: static !important.
With WordPress PHP function
Alternatively, you could make your own class in header.php by using WordPress's is_front_page() function. Add a class or even just add the styling conditionally.
http://jsfiddle.net/AmKHx/
Hello all,
I linked my code on the top. My main problem is that I have my header, content and footer perfectly set that works with all websites. It does not have a scrolling feature or anything. Everytime I try to add the Intel Logo to the screen. It does what it is up there. I move it around and tweek it and then it works for one browser and not the other... It keeps changing. I want the logo to stick to the left perfectly along with the header I made with CSS. Also I want the Mobility Group Text at that height right next to the logo, but for some reason it always messes up my header content and footer as well when I paly with it. So pretty much I want The Logo on first then Mobility Group Right next to itand make it very smooth!
Also I have just learned html css and php and if you guys see something in my code that could be done smarter please let me know. I need critical feedback so that I can progress in learning these new languages better so that I can succeed in this field of programming!
Thank you in advance for all the input and advice!!
HTML CODE:
<div id="page">
<div id="header">
<h1><img src="http://wireless.fm.intel.com/test/logo2.png">
<h2>Mobility Group</h2>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
CSS CODE:
Html, body
{
Padding:0;
Margin:0;
Height:100%;
}
#page
{
Min-height:100%;
position:relative;
height:100%;
}
#header
{
background-color:#115EA2;
height:100px;
width:97.5;
}
#main
{
width:1300px;
margin-left:auto;
margin-right:auto;
background-color:#F1F2F3;
min-height:87%;
height:auto;
height:87%;
margin:0 auto -50px;
vertical-align:bottom;
}
#footer
{
Position:fixed;
Width:100%;
Bottom:0;
Height:50px;
background-color: #115EA2;
}
#header h1
{
position:absolute;
text-align:left;
left:0px;
top:0px;
}
#header h2
{
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
}
I'm still not sure I understood the question, but here's what can you do to make it more natural looking. Close the h1 tag, don't make it absolutely positioned, but rather make it float left. The same thing goes to the h2 element. And since the original image is missing, I've put another one, and fixed its height to 60px.
It's basically this:
#header h1 {
text-align:left;
left:0px;
top:0px;
float: left;
}
#header h1 img {
height: 60px;
}
#header h2 {
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
float:left;
}
See the results here: http://jsfiddle.net/AmKHx/1/ It should look the same in every modern browser.
Also, try not to use capital letters for CSS attributes - it's a standard to use lower case, and even some browsers might not like it.
Do you have a reset sheet?
Copy this to a new css file, call it reset.css and then load it in your page before you load your main css.
html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
legend{color:#000}
How do I declare that a DIV should be displayed in top-left corner of every page and not in its relative position.
I have a div like:
<div id=header>Document</div>
and I would like to display it on every page in top left corner using css like:
#page {
size: 8.5in 11in;
margin: 0.25in;
border: thin solid black;
padding: 1em;
#top-left {
content: ???? ;
}
}
Thank you.
I realise that this question is a bit old, but for anyone like me who comes here searching for a way to do this, it is possible using CSS3 running elements: http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#running1
In this example, the header is hidden from view in all media types except print. On printed pages, the header is displayed top center on all pages, except where h1 elements appear.
<style>
div.header { display: none }
#media print {
div.header {
display: block;
position: running(header);
}
#page { #top-center { content: element(header, last-except) }}
</style>
...
<div class="header">Introduction</div>
<h1 class="chapter">An introduction</div>
Doesn't
#header {
position: fixed;
top: 0;
left: 0;
}
work? See Printing Headers. Also, have a look at the W3C specification of position: fixed.
EDIT: if I read the CSS 3 specs concerning Margin Boxes well enough, together with the CSS 2.1 specs about the content property, I don't think you can embed a <div> from your page into the contents of a Margin Box, alas.