I have a print page, and I want to put a div with some instructions on how to print the page in it. I don't want this section to appear when they actually print the page.
How would I achieve this using CSS or JavaScript?
A common method is to use a separate CSS for printing.
You can have a css for all media and one for print:
<link rel="stylesheet"
type="text/css"
media="print" href="print.css" />
In the print.css just put the display:none on the div.
Davide
Since it hasn't been stated here before, you don't necessarily need to have an external style sheet:
<style type="text/css" media="print">
.hideMeInPrint { display: none; }
</style>
The simplest solution is to add this in the main CSS file. Do note that, when you link the CSS file, you should not specify the media attribute (<link type="text/css" rel="stylesheet" href="/path/to/css.css" />):
#media print {
div.classname {
display:none;
}
}
You are looking for #media print.
http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
Bit more info on Print Style Sheets
Insert a stylesheet just for print:
<link rel="stylesheet" href="/path/print.css" media="print" />
Then put css to hide the div in that stylesheet
<link type="text/css" rel="stylesheet" media="print" href="/css/print.css" />
in this css file style put display: none; for elements you don't want to be printed
In your html, indicate a stylesheet used for printing:
<link rel="stylesheet" type="text/css" media="print" href="print.css"/>
And in this CSS:
#mydiv {display: none;}
You can include a stylesheet that is only applied when printing.
<LINK REL="stylesheet" TYPE="text/css" MEDIA="print" HREF="print-specific-styles.css">
In that style sheet, you can hide your divs and make any other necessary changes.
Anyone working with div's inside php then take Divya's recommend. I spent hours on this until ran across this, put into external and all class in other code with php page, works great :) Also, works good with bootstraps whereas bootstrap can otherwise be ignored and still print.
#media print {
div.classname {
display:none;
}
}
Related
I can't understand why the utilities "show-on-small" and so on do not work. Even though the following script should only show on small, it shows all the time (please note that other materialize classes work, so it's not that I can't access their files).
Example:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<div class="show-on-small"> <p style="color: black" class="show-on-medium">Only smaall</p></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
Any idea? Thanks a lot!
By looking at what .show-on-small does, we can clearly see it never hides the element. It only makes sure it is shown on small:
#media only screen and (max-width: 600px) {
.show-on-small{
display:block !important
}
}
So the next example will work:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<p class="show-on-small" style="display:none;">I only show on small</p>
... because it has display:none on all cases, except on small where it is overridden by Materialize's CSS with !important.
Do note you can also use .hide-on-* classes in Materialize, which do what you seem to want.
You can use hide-on-med-and-up which sets display: none for screens bigger than 601px in width.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/><!-- Do you have this line? -->
</head>
<body>
<div class="hide-on-med-and-up">Only smaall</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</body>
</html>
Their files can be found at https://github.com/Dogfalo/materialize. From there you could also contribute.
For only showing on mobile use .hide-on-med-and-up
It will work
I've searched around a bit and can't find a clean solution.
Bootstrap is overriding my custom css. I have ensured that my custom script file is below the bootstrap css file, but this still doesn't solve the issue.
If i tack the !important tag on to a font-size, that works. I just feel like going through and putting !important after everything is sloppy and time consuming. Thoughts?
I am running a rails app, if that is germane to my issue.
Script
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href='//fonts.googleapis.com/css?family=Poppins' rel='stylesheet' type="text/css">
<link rel="stylesheet" type="text/css" href="style.scss">
CSS
h1 {
font-weight: 600;
color: #fff;
font-size: 5.5em !important;
}
You need to use CSS specificity to override the default Bootstrap CSS without using !important. So your h1 tag could be defined using the following:
CSS
body h1 {
color: #fff;
font-size: 5.5em;
font-weight: 600;
}
Just adding body before any of your CSS declarations should override the Bootstrap CSS. See this Code Pen to see an example with your code.
I have the following setting and only want to have this setting for IE only.
Is there the way to do so
.login-space {
padding-right: 30px;margin-right: 20px;
}
Thanks
K
One solution is create a style sheet for only IE and put that selector in it and add the style sheet in head section like this
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-style.css" />
<![endif]-->
More detail Here
everything in my style sheet will work apart from divs. Kinda strange. I created a test page to try and see why it won't work but no joy.
If I include the div in a tag at the top of the page it will work. Just not if I link the css file itself. I will put my code below.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="boxed">
This should be in a box
</div>
And a clean stylesheet. With just the information for the div class.
#charset "utf-8";
/* CSS Document */
.boxed {
border: 1px solid green;
}
Hopefully, someone can point me in the right direction.
Instead of this, try just typing the full URL , so instead of "style.css" ,
type "http://yourWebsite.com/style.css" instead of "style.css"
<link type="text/css" rel="stylesheet" href="style.css" />
edit: also add type="text/css"
2nd edit:
you also need to have a title in your head, that is required. maybe it's causing this issue, maybe not
<head>
<title>This is my Title! </title>
</head>
Try this in your Style.css file:
.boxed {
border: 1px solid #008000;
display: inline;
}
check to see if you haven't misplaced any '}' or semi columns and i don't think you need the
#charset "utf-8" in your stylesheet since you already specified it in your head
i have a problem in display:inline and display:inline-block.......how should i define both in css...i.e display:inline for ie and display:inline-block for ff and chrome....
You can use Conditional Comments to load a CSS file with overrides that will only be loaded by Internet Explorer. For example:
<!-- main stylesheet for all browsers (uses display: inline-block) -->
<link href="main.css" media="screen" rel="stylesheet" type="text/css" />
<!-- overrides for IE 7 and earlier (uses display: inline where necessary) -->
<!--[if lte IE 7]>
<link href="main-ie.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->
<!-- overrides for IE 6 and earlier (uses display: inline where necessary) -->
<!--[if lte IE 6]>
<link href="main-ie6.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->
Here is a good overview of CSS browser hacks:
http://brainfart.com.ua/post/css-hacks-overview/
I guess section 4, 8 or 9 could apply for your case.
IE7 and below doesn't support inline-block. But there's a simple workaround. As an inline-block is - simply put - an element that behaves like a block but aligns as inline, you only need to tell IE it's an inline element with a layout (a IE idiossincracy). So:
.el { display:inline-block; *display:inline; *zoom:1; }
There you have it! Really simple. You may as well use conditional comments and avoid the star hack. I personally use Paul Irish's HTML declaration (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) and then I target specifically IE7 and below using:
.el { display:inline-block; }
.lt-ie8 .el { display:inline; zoom:1; }
The problem with IE is that it does not properly support "inline-block". Therefore, to compensate for this you have to float the element. The container for the floated elements thus has to to be cleared, using "clear:both" unless everything is a fixed size, such as menu links.
I much prefer figuring out what isn't supported in each browser than writing individual style sheets for each.