I'm trying to hide header and footer on a page when printed from Chrome on Mac. The header and footer does not appear by default via Chrome on Windows. Based on a basic Google, looks like I should set page margin to 0 like this:
#page {
margin:0;
}
Then configure the margin property in #media print body definition like this:
body {
margin:20px;
}
I'm experiencing weird behavior though. Setting the property as above does nothing. Setting the property like this only changes the top margin:
body {
margin: 20px auto !important;
}
I also tried setting each margin explicitly in this way like this:
body {
margin: 20px auto !important;
margin-bottom: 20px auto !important;
margin-left: 20px auto !important;
margin-right: 20px auto !important;
}
However, using this approach also only changes the top margin. Am I correct in setting the #page{margin:0} in order to eliminate the header and footer from the printout? What do I need to do in order to properly set the margins in the body like I'm trying to do in the examples above? Or is there a better way?
The trick to disable specific items from being printed is to explicitly hide those in the #media print css definition.
Here is the css code to hide navbar, footer-section, background and shadows from being printed:
#media print {
.navbar {
display: none;
}
.footer-section {
display: none;
}
* {
text-shadow: none !important;
color: #000 !important;
background: transparent !important;
box-shadow: none !important;
}
}
The above example also sets text colour to black for printing.
Personally, I would suggest just removing them from the display view entirely with a simple media query;
/* Where the magic happens */
#media print {
#header, #footer { display: none !important; }
}
#header {
padding: 1rem;
background-color: #00f;
display: block;
}
main {
background-color: #0f0;
padding: 5rem;
}
#footer {
padding: 1rem;
background-color: #f00;
}
<header id="header">
<h1>Header (will not be in print version)</h1>
</header>
<main>
<p>The main body of stuff whatever it might be...</p>
</main>
<div id="footer">
<strong>Footer (will not be in print version)</strong>
</div>
Related
Is there any solution to make first page background different from other page background for print pages?
And also to make margins different for each pages?
I have tried different solutions but it didn't work; here is the solution I tried:
#page {
margin: 0px;
}
#page :first {
background: none;
margin-bottom: 60px;
}
#media print {
body {
background: url('../img/background.jpg') repeat-y !important;
}
}
I don't think you can accomplish this by using :second, as it doesn't seem to be a valid value.
See the Index of standard pseudo-classes.
And even if you would use just :first, I don't think the background image can be applied as stated in the above link.
Since you already tried different solutions but it didn't work, here's a solution for you.
Depending on your sites layout and requirements, you can estimate where you want to break the page, and surround that in its own container so you have full control on them when being printed.
See example code:
window.print();
body{
background-color: black;
margin: 0px;
}
.page-break{
height: 1054px;
width: 100%;
margin: 0px;
position: relative;
}
#first{background-color: green;}
#second{background-color: pink;}
h1{
padding-top: 5px;
text-align: center;
color: white;
margin: 0px; //Add margin 0px for the first div in page-break
}
h2{
text-align: center;
color: lightblue;
}
#page {
margin: 0;
}
#media print {
html, body {
//style body here
}
.page-break{
page-break-before: always;
}
#first{
background-color: maroon;
-webkit-print-color-adjust: exact;
}
#second{
background-color: gray;
-webkit-print-color-adjust: exact;
}
#third{
//style the third page;
}
}
<div class="page-break" id="first">
<h1>First Page header</h1>
<h2>Some text here </h2>
</div>
<div class="page-break" id="second">
<h1>Second page header</h1>
<h2>Some text here </h2>
</div>
<div class="page-break" id="third">
<h1>Third page header</h1>
<h2>Some text here </h2>
</div>
From the docs about #page:
You can only change the margins, orphans, widows, and page breaks of
the document. Attempts to change any other CSS properties will be
ignored.
It looks like changing the background of the first printed page only (using #page) is not possible.
build a function that will add a class to the first container, and then call the window.print() function.
the class will look something like that:
.div_with_bg {
height: 3508px;
width: 2480px;
background: url('../img/background.jpg');
background-repeat: repeat-y;}
The give example is based on the default Angular 2 skeleton created by ng init.
Lets assume I want my main component to fill the entire screen with a blue background.
app.component.css:
my_component_div {
background-color:lightblue;
height:100%;
}
(global) styles.css:
html, body {
height: 100%;
margin:0; padding:0;
}
This is the result:
I do not want a scroll bar. I don't like scroll bars. Why is there a scroll bar? Why is there a white border on top? According to inspection (see screenshot), this padding-margin-something in the top is outside of body, yet inside of html. How can this totally basic functionality be achieved?
This is because, by deafult, your angular component is using a <h1>app works!</h1>
browser has some built in default CSS which gives your H1 a margin of .67em
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
try setting the h1 margin to 0 and your body will re-align with your window.
h1 {
margin:0;
padding: 0.67em 0;
}
Maybe
my_component_div {
background-color:lightblue;
height:100vh;
}
html, body {
height: 100vh;
margin:0;
padding:0;
overflow: auto;
}
You need to try to use Reset css as mentioned in the below link-
A CSS Reset, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
http://cssreset.com/what-is-a-css-reset/
html {
background-color: #e2e2e2;
margin: 0;
padding: 0;
white-space:nowrap;
}
body {
background-color: #fff;
border-top: solid 10px #000;
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}
#body {
min-width:1015px;
background-color: #efeeef;
padding-bottom: 35px;
position: relative;
display: inline-block;
vertical-align: top;
}
I have css above in a page of mine. The #body is used for a div that's getting populated by partial views using ajax.
The problem is that when content in #body is overflowing to the right then body does not encapsulate the content of #body, it stays the size of the window when loaded. So when scrolling horizontally the background looks different for the body part in the region that becomes visible when scrolling.
How can i get the body to continue look the same when #body owerflows to the right?
http://jsfiddle.net/q2j4wcmo/
UPDATE:
Hashem Qolami did solve part of my problem, when zooming in on the content in #body, body still incapsulates #body and it looks as it supposed to. But in my solution when loading the page and the content in #body is overflowing body is not encapsulating the content in #body.
Any idea what could be different when running in jsfiddler where it's obviously working as supposed to?
UPDATE 2:
new example
http://jsfiddle.net/q2j4wcmo/10/
One option is changing display type of the <body> to inline-block to let it grow horizontally by its contents.
Also you could use min-width: 100%; to make sure that the <body> always fills the entire page even if its content is not that wide:
EXAMPLE HERE
html {
white-space:nowrap;
width: 100%;
}
body {
display: inline-block;
min-width: 100%;
}
Note: Since a percentage value of min-width refers to the width of the containing block, you have to specify an explicit width of <html> element as well (as I did).
Currently, I'm using
<hr align="left" />
on my HTML5 page, but I've read that the align property was deprecated in XHTML 4.01 and supposedly removed from HTML5. I'd like to be using CSS rather than an inline attribute like this, but when I tried
hr{align: left; max-width: 800px;}
or hr{text-align: left;} or hr{left: 0;} or hr{float: left;}, it just showed up in the center.
So what should I use instead of the inline attribute above?
One option would be to set the left margin to zero:
hr{max-width: 800px; margin-left:0;}
You're trying to use something in a way that (as Eliezer Bernart mentions.. and apparently that comment with the link to the MDN doc disappeared) no longer "works that way". You can, as long as you don't mind it being screwy in IE, just set the margin to zero - http://jsfiddle.net/s52wb/
hr {
max-width: 100px;
margin: 0px;
}
A better idea though would be to mimic the HR's old way of doing things by way of CSS without the use of the HR. Check out http://jsfiddle.net/p5ax9/1/ for a demo:
p:first-child:before {
display: none;
}
p:before {
content: " ";
border: 1px solid black;
margin-top: 15px;
margin-bottom: 15px;
display: block;
max-width: 100px;
}
I don't know what browsers were used for some above answers, but I found neither text-align:left nor margin-left:0 worked in both IE (11, Standards mode, HTML5) and Firefox (29).
IE11: text-align:left works, margin-left:0 leaves rule centred.
FF: margin-left:0 works, text-align:left leaves rule centred.
So, either use both, or I found that margin-right:100% works for both!
You can use div tag instead.
<div style="border: thin solid lightgray; width: 100px;"></div>
do this
hr {
display: inline; //or inline-block
text-align: left;
}
<hr> tags have margin-inline-start and margin-inline-end properties set to auto, which centers the element horizontally (similar to setting both left and right margins of an element to auto).
To left-align an hr tag, you can set margin-inline-start to 0:
hr {
margin-inline-start: 0;
}
...and you can right-align an hr tag by setting margin-inline-end to 0:
hr {
margin-inline-end: 0;
}
.line {
height: 2px;
background-color: var(--itemBorder);
color: var(--itemBorder);
}
.width100 {
width: 100% !important;
}
.width90 {
width: 90% !important;
}
.width80 {
width: 80% !important;
}
.width70 {
width: 70% !important;
}
.width60 {
width: 60% !important;
}
.width50 {
width: 50% !important;
}
.width40 {
width: 40% !important;
}
.width30 {
width: 30% !important;
}
.width20 {
width: 20% !important;
}
.width10 {
width: 10% !important;
}
<div class="line width100" />
* { margin: 0; padding: 0; }
body {
margin: 8px auto;
background: #20272D;
width: 900px;
}
body, td, input, textarea {
font: 11px Tahoma;
color: #DDD;
}
#content {
width: 400px;
margin: auto;
background: url(img/blixt.png) 0px 18px no-repeat;
padding-left: 25px;
}
There's a image (blixt.png) that I want to show up as background no matter how long the content inside <div id="content"> is! If its short only a bit of the image shows and as longer the text the more it shows. How can I fix so it shows the whole image no matter what? I don't want to set height.
You can set a min height, but that will require you to set a IE height fix because min-height won't work in IE.
The problem here is pretty obvious. You have an element with a background image but no height on it, so of course it's going to default to the height of the content inside it.
You can either put a height on the #content element, or move the background image to the body.
try this in the body css:
background-image: url(img/blixt.png) no-repeat;
background-color: #20272D;