I've made website with bootstrap fixed navbar. It has fixed navbar so in stylesheet body have top-padding of 70px.
When i print the page it add that extra space at top of paper. What can i do to remove that extra space causing by that top-padding.
Below is print preview with padding
Below is print preview without padding which i want with less space at top.
If i remove the padding the print is as i want but the in browser the content get behind the nav bar and i can't see the first 2-3 lines.
Please give me some solution to retain the fixed navbar and also the padding don't get include in print.
Add a new print stylesheet like so (place this after your main stylesheet):
<link rel="stylesheet" href="/css/print.css" media="print">
In print.css set your new CSS rule for the body tag like so:
body {
margin-top: 0;
}
I know you may or may not want to show the navbar in print. I wanted to show it, so I added this in my CSS (Bootstrap 3):
#media print {
.navbar {
display: block;
border-width:0 !important;
}
.navbar-toggle {
display:none;
}
}
The accepted answer works perfectly, but if you don't want to add a new style sheet, an alternative is to wrap the body padding in a media tag. In your Site.css:
#media screen {
body {
padding-top: 50px;
padding-bottom: 20px;
}
}
This specifies that the style should only be applied when viewing the page, not printing.
Related
I'm having a problem about loading 2 sections in Bootstrap and as you can see here in jsfiddle there is a little white space between the page header and the top menu... So how to remove that so the both sections will stick together... Not that I also tried margin-top:0; padding-top:0; but they didn't work !
The bootstrap .navbar has a default margin-bottom of 50px. To remove that, add a new style which overrides it.
.navbar {
margin-bottom: 0;
}
I have a Wordpress website installed "Quidus Theme" http://theme.socialflag.net/latest-free-wordpress-themes/.
There is a big unnecessary space from the right side which looks is very bad.
I want to remove this space and want my web pages to fit to the whole screen.
If there is something i can change in my CSS style please let me know.
One of my friend provided this code but I don't know what to do with this or where to put the code.
Note: I want all my posts to fit to full width not only the page link i provided.
<pre>
#media screen and (min-width: 1105px){
.site-content {
width: 78%;
}
</pre>
Undertake the following:
Override the max-width property in the layout to 100% (or if you'd like, you can look for the rule and remove it in your css
Set your div with id content to a width of 78%
click here for codepen
Change the css site-content in media screen and it will look like the attached image:
<pre>
#media screen and (min-width: 1105px){
.site-content {
width: 78%;
}
</pre>
Use the developer tools in your browser (i.e inspector in Chrome or firebug in Firefox) to see where the padding is coming from.
Either the padding is applied to something other than the body, or the padding is applied to the body but is still overriding your CSS. For example:
body.class {
padding: 20px;
}
Would override your CSS. or
body {
padding: 20px;
}
Declared after your CSS would still override.
I face same problem on my website http://calendarsnews.com/ But when I used this process after it solve my problm
I'm having some trouble with an area of space between the top of the browser window and my 'head' element, and the 'head' element and my 'body'.
Thus far, adding the following class has not resulted in any improvement:
.header{ <=== I have also attempted .head with no effect
position: absolute;
top: o;
}
I have also experimented with padding and margins, but simply cannot get the head content to "kiss" both the top of the screen and body content.
You can see a rundown of my HTML and CSS here: https://jsfiddle.net/2w3vzstf/
How do I overcome this?
body {
margin: 0;
}
The lower spacing you dont like is the #menu having a margin-top of 10px
Should sort out the spacing above the page.
Try, commenting out the top margin in the menu CSS definition.
#menu {
/* margin-top: 10px; */
Is this what you wanted?
JsFiddle
Your fiddle shows some markup problems.
<head> is not the place for any page content, even the "header". That should all go in the <body> tag.
I have modified your fiddle to show how the css can be modified to get the effect you want:
https://jsfiddle.net/1kn4tnjz/
Basically you set
margin: 0;
for the <body> and <div id="menu"> elements
I want to print the content of tag. All the previous question on portal shows the answer but in that the card shape in print tab is distorted.I want the exact same print of ID card. I want the output as the div content is written.I want to print the ID card with the black borders. the tag has a css file include.
Please see the picture
Look into CSS media queries.
#media print{
}
Can be used to apply specific CSS rules to the document when outputted to the printer. I'm guessing your issue is that you are trying to print the entire page and not just the card, causing scale-based distortion.
EDIT:
Here's a nice thorough introduction to print styles: http://edutechwiki.unige.ch/en/CSS_for_print_tutorial
EDIT:
Here's a more concrete answer to your question:
#media print{
*{
display: none;
}
html, body, #card{
display: block;
margin: 0;
max-width: 100%;
height: auto;
}
}
The * rule is a wildcard to hide everything -- you may need to customize this if your #card is wrapped in anything (you don't want to hide those -- you'll just want to remove any styles on them, such as background color, margins, or padding).
The next rule makes sure html, body, and #card are shown and have no margins applied to them -- this is to ensure that #card is positioned flush with the top-left of the page.
I've also thrown a max-width: 100% and height: auto on those elements to ensure #card can't be larger than the page.
I am re-writing this question to better convey the problem:
I have 3 output mechanisms:
Screen
PDF
Print
PDF's are generated using the same media type as screen.
On screen: I just want the footer to appear below the content ... Simple... easy!
PDF: I want the footer to display at the bottom of the last page of the content
Print: As above, I want the footer to display at the bottom of the last page of the content
The problem is: If I set absolute positioning for media type=print there are two problems:
This has no effect of the PDF display
If the content spans over multiple pages, the content prints under the footer which is fixed at the bottom of the first page.
If on screen - I need footer to display at the bottom of an imaginary page so that when the pdf is generated, it appears at the bottom of the last page of content
If on print - I need footer to display at the bottom of the last page of content
You can define 2 stylesheets for the page; 1 for "screen" and 1 for "print". Link to them this way:
<LINK rel="stylesheet" type"text/css" href="screen.css" media="screen">
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">
This way you have total separation of how each device should render your page.
You should definitely check out http://www.cssstickyfooter.com/. It's an excellent, modern "sticky footer" solution. At a minimum, it should help lead you in the right direction.
You can achieve this by having a separate CSS stylesheet for printed documents. CSS Media Types allow you specify separate rules for printed documents (and many other representations).
If this is the only style that needs special handling then you can put the print style in your existing stylesheet like this:
#footer { position: static; }
#media print {
#footer { position: absolute; bottom: 0; }
}
If you have a lot of print-specific rules, put them in a separate stylesheet and include both stylesheets in your HTML like this:
<link rel="stylesheet" type="text/css" href="all.css">
<link rel="stylesheet" type="text/css" media="print" href="printonly.css">
When displayed on the screen only the all.css stylesheet will be used; when printed both the all.css and the printonly.css stylesheet will be used — so you don't need to duplicate your styles in both files, just add printer-specific ones to printonly.css.
Useful reference:
http://www.w3.org/TR/CSS21/media.html
Use a single container css class.
Add the footer to the end after header & body containers.
Set the container height to 100% & the footer class will appear at the bottom.
I think what you might be looking for is the CSS Sticky Footer
Ultimately your footer needs to be outside of your wrapper
Page
<div id="wrap">
<div id="main"></div>
</div>
<div id="footer"></div>
CSS
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/
* {margin:0;padding:0;}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
/* IMPORTANT
You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
*/
Taken directly from the cssstickyfooter website.
I posted my answer before the OP edited his answer to explain that he was looking for print.