Print CSS

Hello,
I'm trying to create a print.css for configuring the webpage
for printing properly. I have a simple webpage created using CSS
with 3 major Divs (header, centreposition, footer). Within the
centreposition div is a centrecontent div which is off to the right
to allow for the nav bar (when in screen media). For whatever
reason, hopefully someone here can explain, when in pint preview
the content section does not split itself over several pages when
using Firefox. IE formats everything properly and takes as many
pages as required. Firefox on the other hand, displays the content
as if is runs indefinetly on the first page and does not make it
span numerous pages. I have been tring to play with my print.css
file and can get it to configure it properly. Below is my print.css
file
#nav, #nav2, #tr {
display:none;
#centreposition {
padding-right: 0px;
padding-left: 0px;
#centrecontent {
padding: 10px;
body,p{
font-family: Arial, Helvetica, sans-serif;
h1{
font-size: x-large;
font-weight: bolder;
Thanking you in advance for the help,
Daniel

FYI, you can change DW8 to render for media="print" using:
View > Style Rendering > Print media type
HTH,
Randy
> I'm trying to create a print.css for configuring the
webpage for printing
> properly.

Similar Messages

How can I change wiki print.css to print the banner?

We want to create a wiki containing instructions for students and staff that can be viewed online or printed. If an instruction sheet is printed we would like the banner (showing the College's logo) to appear at the top of the page to make it look more official. Unfortunately, no matter what I try I can't get this to work. Does anyone have any suggestions, please?

You'd need to look into changing the print.css for the theme you are using, and then I imagine restart the wiki server.

Create print.css that repeats the content twice on page when printed

Clear as mud, right? I have a form that the user can fill in and then print to bring to the office. They need two copies. It fits on half of the page and could be printed twice on one page and then torn in half in the office. This would save the user paper.
I have a @media print css that removes everything from the page except the content div and it works fine. Is there a way to repeat that div twice on the page via the css?
Here's the css code:
@media print {
.sidebar1, .sidebar2, .title, .title2, .footer { display:none}
.content { position:absolute;top:10px;left:10px}

I have never tried to do anything like that in Dreamweaver - this is more a printer management thing. Can you not set the printer up to tile the page so it displays 2 copies on each page?
Having said that, the only workaround I can think of (someone else might have another idea) is to duplicate your content div in the HTML and position it under your first, then {display:none} the 2nd div in screen.css and turn it on with the print.css.
Edit:// Having read a little closer, this would only work with static content. The fact you are using a form would be more difficult as you would need to populate both divs with their content.

Print CSS Printing 2 identical pages...

I have attached a Print CSS file to my website. At first
glance, all appeared to be well. However, upon closer scrutiny, the
page appears to be correct in print preview, but when I go to print
- one page prints with the print logo and then a second identical
page prints with a blank space where the print logo should be. The
page also appears to be truncated at what I am going to guess is
about 1200 pixels, unless I reduce the size of the page printing.
Lastly, these two pages, rather than one, started after I turned my
master page into a template.
Can anyone help me, PLEASE? Thank you kindly.
P.S. If you would like to see it for yourself...
http://www.mhaoapreview.bandr-consulting.com/

I have attached a Print CSS file to my website. At first
glance, all appeared to be well. However, upon closer scrutiny, the
page appears to be correct in print preview, but when I go to print
- one page prints with the print logo and then a second identical
page prints with a blank space where the print logo should be. The
page also appears to be truncated at what I am going to guess is
about 1200 pixels, unless I reduce the size of the page printing.
Lastly, these two pages, rather than one, started after I turned my
master page into a template.
Can anyone help me, PLEASE? Thank you kindly.
P.S. If you would like to see it for yourself...
http://www.mhaoapreview.bandr-consulting.com/

Layout pages and print css

The problem i'm having, under the pages i'm seeing four of the layout files from my Web Apps that were created. They weren't there the other day and can't workout how to make them go away again, don't really want the client to see the layout pages or to accidentally delete them.
Also how to i edit the print view? the client would like me to style the print view but not having much luck with the old way <link href="../../stylesheets/print.css" rel="stylesheet" type="text/css" media="print.css"/>

Print view is gone in BC now since you would set that up with media queries in your CSS etc. Its not needed.
In terms of those folders I think I mentioned to you in another thread - You need to contact BC support. You have somehow made a simialr folder name and caused BC to open view the folders and have web apps in that folder. BC will need to take a look at that and sort it our for you.

Print.css: when does the page load images for this?

I have a print.css for an image I don't want on screen, but
instead only for printing (normally set to display:none, and set to
display:block when printing). Works great, but this image is
loaded in any case as far as I know. 2 questions:
1.) Would an image referenced in print.css load only when
printing/previewing?
2.) If so, could a printable (by default, i.e,
non-background) image be loaded here in some way?
Thank you!

> 1.) Would an image referenced in print.css load only
when
> printing/previewing?
I think so, but I'm not sure - so, I built a test page -
http://www.murraytestsite.com/test-print.html
It contains a single image that is display:none in the screen
CSS, and
display:block in the print CSS. Both YSlow and Safari's
Activity window
show the browser as fetching that image. Looks like the
answer is *no* - it
is fetched even when it is not displayed onscreen.
> 2.) If so, could a printable (by default, i.e,
non-background) image be
> loaded
> here in some way?
I don't know what you are asking here.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Nick616" <[email protected]> wrote in
message
news:g8faeh$c9r$[email protected]..
>I have a print.css for an image I don't want on screen,
but instead only
>for
> printing (normally set to display:none, and set to
display:block when
> printing). Works great, but this image is
loaded in any case as
> far as
> I know. 2 questions:
>
> 1.) Would an image referenced in print.css load only
when
> printing/previewing?
>
> 2.) If so, could a printable (by default, i.e,
non-background) image be
> loaded
> here in some way?
>
> Thank you!
>
> link rel="stylesheet" href="print.css" type="text/css"
media="print">
>

Print css won't work

Hi everybody,
could you please give a look to this page?
http://www.udeurcamera.it/propostedilegge.asp
As all the pages reachable from the orange navigation, it has
a stylesheet defining the aspect of the page on paper sheet.
I can't figure out why it doesn't work for this particular
page, while for the others it works fine.
I also attach the code of the print.css file.
Thank you very much,
Giuseppe,
Rome
Text

Most likely there are two things -
1. You have linked the stylesheet with a root relative link.
2. You have not enabled Preview with Temp files
If you would change the link to a document relative link, it
would work. If
you would enable preview with temp files, the root relative
link would work.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"neilgauld" <[email protected]> wrote in
message
news:fp40ur$l9q$[email protected]..
>I have made a basic page using an external style sheet.
When I preview the
>page
> the style sheet does not work. When I upload the page
and style sheet to
> my
> server it does, whats going wrong?
>
> Any ideas??
>

@media print css tag

I am using the @media print rule to present my data in a printable format (letter size). The problem I am having is Safari shrinks the output to about 1/4 of the desired size. It works fine in IE and Firefox.
Has anyone else experienced this issue?

yup, I've seen this as well. I had to create a print stylesheet, and I provided css styles in inches that Safari didn't respect. Everything was smaller than I had defined.
After a bit of experimentation, it turns out that Safari is subtracting the user-defined page margins (1 inch on all sides by default), rendering the page as if it was 8.5 x 11 wide, and then scaling it to fit in the printable area.
Extremely lame.
Does anyone know where I can report bugs?

Printing CSS background image

Hi:
Working on a new site, using a Template Monster (no jokes
please) that my client wants me to use. I am not thrilled using
some else's setup, and it's no picnic to work with, but my graphic
skills are not nearly as good as my technical, and the client wants
something more artistic.
I have a background image in the CSS that does not print --
it's the client's photo, so it's important. So as an alternative, I
took it out of the background and did an AP Div and was able to
position it properly on screen, and it prints fine. However, in
Safari and Google Chrome, the whole page is blown apart. In IE and
FF, no problem.
Is there an easy fix? I am going to restore the page tonight
with the original bg image setup (which rendered in all my browsers
but didn't print) and post it for help, but it's not ready now.
Here's the link to the "printable" version.
Thanks in advance for your help.
Rgds, Ned

The browser has a setting under tools advanced printing to
check a box to
print background colors and images if you want to print them.
Dave
"Nedward" <[email protected]> wrote in
message
news:gqgvc9$aib$[email protected]..
> Hi:
>
> Working on a new site, using a Template Monster (no
jokes please) that my
> client wants me to use. I am not thrilled using some
else's setup, and
it's no
> picnic to work with, but my graphic skills are not
nearly as good as my
> technical, and the client wants something more artistic.
>
> I have a background image in the CSS that does not print
-- it's the
client's
> photo, so it's important. So as an alternative, I took
it out of the
> background and did an AP Div and was able to position it
properly on
screen,
> and it prints fine. However, in Safari and Google
Chrome, the whole page
is
> blown apart. In IE and FF, no problem.
>
> Is there an easy fix? I am going to restore the page
tonight with the
> original bg image setup (which rendered in all my
browsers but didn't
print)
> and post it for help, but it's not ready now.
>
> Here's the link to the "printable" version.
>
> Thanks in advance for your help.
>
> Rgds, Ned
>

Firefox is having problems with print css

I have a website at http://matformannfolk.blogspot.no that I'm trying to make printer friendly. However, even though all other browsers I've tried work, Firefox does not. This is really strange as everything seems great if I emulate print media, but if I try to print the page comes out blank.
Anyone able to help me find the problem? It's really kind of annoying when the browser doesn't behave consistently, and I don't know how to debug the problem when everything looks ok in web developer tools.
Thanks,
Lars

Ok, turns out this was because of some printer issue. Used the trick to reset print settings and things are looking better :)

Print CSS bg-image

Hello,
I found a thread here that states that a bg-image (in a print
style sheet) does not print and that it is an end-user browser
setting. So the question is what alternative can I use (in my print
style sheet) that will print instead of "background-image".
Thanks,
Patrick

.oO(the707)
>I figured it out. Sometimes I am guilty of re-inventing
the wheel.
>
>If you want an image to print just use an image instead
of a bg-image. Duh!
Question is still why you want that. If the image is
important, then you
should have used an 'img' element right from the beginning.
If it's just
decoration, then there's no point in wasting any ink unless
the user
wants it. There are reasons why background colors and images
are not
printed by default in many browsers.
Micha

Switch CSS while editing page to print media

My site uses media:print CSS which gives a totally different
layout to a page (including revealing some hidden DIVS).
My users are editing with Macromedia Contribute 3. Is it
possible to switch the view to show the print css (media:print)
while editing?
I just can't seem to be able to find a way of doing it.
There's a nice toolbar in Dreamweaver 8 how come there isn't in
Contribute?

My site uses media:print CSS which gives a totally different
layout to a page (including revealing some hidden DIVS).
My users are editing with Macromedia Contribute 3. Is it
possible to switch the view to show the print css (media:print)
while editing?
I just can't seem to be able to find a way of doing it.
There's a nice toolbar in Dreamweaver 8 how come there isn't in
Contribute?

Printing with CSS

How do I setup a specific area to print using CSS. Currently,
I have a certain table with misc. info that I assigned a CSS class:
<table.SingleListing> I would like to have visitors print
this table (area) only and not the rest of the webpage.

The quickest would be to simply put it anywhere within the
head tags, e.g.
<head>
<style type="text/css" media="print">
html, body {
visibility:hidden;
table.SingleListing {
visibility:visible;
</style>
</head>
The other way would be to save it to a CSS file (named
'print.css', for example), then you can place the following within
any page from which you want to call the stylesheet (print.css, in
this case).
The contents of print.css would be:
html, body {
visibility:hidden;
table.SingleListing {
visibility:visible;
And you'd include the following in the HTML file(s)
<head>
<style type="text/css" media="print">
@import url(print.css);
</style>
</head>

When I try and print a web page in the print screen ALL the Print Frame options are greyed out. It won't let me print a page as I see it. I need to pring a page as is. How do I do it in the new 8.0??

I go to print and try to select the radio button to print all frames, but It's not working

The '''Print Frames''' options are greyed out unless the web page is made with Frames. I-Frames don't work the same.
Check out this '''''frames test page''''' - http://www.draac.com/framestest.html <br />Is the '''Print Frames''' part of the print dialog box active?
As far as printing a page as you see it, many web pages use '''print.css''' files for print-media. The print.css specifies exactly what is to be sent to the printer and it can control the formatting of the printed page.

I would like to print links as regular text i.e. not underlined or in a different font and color.

I have created a page with my resumé, using Dreamweaver CS4 on my iMac (running OS X 10.6.6). You can see the page here: http://www.peterforkes.com/Resume.html
It looks great when it is on the screen, but when I print it I would like the links to not be underlined and also to be displayed in the same font (and color) of the text surrounding it (a link is largely useless on a piece of paper, if it it not showing the URL).
So, I created a stylesheet called "print.css" and have this in it:
a:link {
text-decoration: none;
In my html document (Resume.html) I have this code, at the top:
<link href="_css/Resume.css" rel="stylesheet" type="text/css" media="screen" />
<link href="_css/Print.css" rel="stylesheet" type="text/css" media="print" />
Now, things such as the graphics in my document do not print out (this is how I want it) but links seesm to be doing unexpected things for me. As I mentioned, when I print the page I would like them to:
a) not print with an underline (which I would expect the code snippet shown above to do).
b) I would like the link color to be the same as the surrounding text (I have links in several places, such as in <h2>, <h3> and <p>).
c) I would like the link to have the same font and text size as the surrounding text.
Any help is always appreciated.
Peter A. Forkes

You've solved it for a:link but you may print the page with the <a> tag in link or visited state so you need to cover both.
In http://www.peterforkes.com/_css/Print.css
change
a:link {
text-decoration: none;
to
a:link, a:visited {
color: #333;
text-decoration: none;

Print CSS

Similar Messages

Maybe you are looking for