latest reactions

David Levin
Does the trim still work if the form fie …
mal
as long as the join keys are same in eac …
Tarida
I am using ipinfodb.com to redirect the…
David Levin
Good stuff. For those interested in a UD …
PtcBux
oh Wilbur Gans wrote thank you so much…

Clicky Web Analytics
Use OpenDNS
ZERIGO DNS

Ultimate dns hosting based on pre-defined templates, DNS redirection and lot's more.

mxna feeds

Video : Security improvements in ColdFusion 10Adobe ColdFusion Webcast: Evolutions of ColdFusion and Application Predictions for 2013Resolve Stability Problems and SPEED UP ColdFusion 10Strange Interaction Between DeserializeJson(), ArrayContains(), And Database Values In ColdFusionNot able to apply Hotfix from ColdFusion 10 Administrator on Windows with Lockdown guide imposed on server. How to setInfinite Scroll Example with ColdFusionColdFusion Summit 2013ColdFusion Dev Needed: Albany, NYCF911: New Adobe document about #ColdFusion security hotfixes: required reading, I'd sayColdFusion Summit AnnouncedAdobe Announces ColdFusion Summit 2013Circular Thumbnails with ColdFusion / CSSColdFusion Dev needed: South FloridaeBay Looking for a ColdFusion DeveloperFace Cropped Thumbnails with ColdFusion

All files are strictly confidential: all information is classified.
© Copyright 2002 - 2013 mximize.com.
All right reserved.

Visit Carlos GallupaMXNA webfeed

Adding a print stylesheet to your website

I decided to add a nice print stylesheet to mximize.com so that if you would like to print a page you can without any hassle.. just click on the print button in your browser. To get this to work nicely I read the "going to print" article on A List Apart. Below is the result of the stylesheet. It will display only the article you are viewing and not all the stuff that isn't important, like the menu, images, form, ads etc etc... A quick and really simple way to make your webpage even more friendly for your viewers. To test you could click on the "print preview" button in your browser.


body,code {     font-family:verdana,arial,sans-serif;
    background: white;
    font-size: 12pt;
}
code {
    font-family:courier new;
    font-size:80%
}

#head,#menu,#google-line,.ad1,#extra,.details,form    {
    display:none
}

#content a:link:after, #content a:visited:after {
    content: " (" attr(href) ") ";
    font-size: 90%;
}

#content a[href^="/"]:after {
    content: " (http://www.mximize.com" attr(href) ") ";
}


To let the browser see the stylesheet just put the following code in your browser

<link rel="stylesheet" type="text/css" href="/print.css" media="print" />

13166 viewed | 2 opinion(s)  | del.icio.us | Digg it | Tjarko @ 03/07/07 16:10 cet


Reactions:

kees moerman wrote.... (mail)

hHello Carlos,

I read about printing and stylesheets on your website http://www.mximize.com/adding-a-print-stylesheet-to-your-website. I like to make a printbutton or text on my website togehter with a print CSS. Can you tell me what code i should use for this PRINT THIS PAGE on my site. I hope you understand what i mean.

Regards,
Kees Moerman

25 July 2007 12:24 cet  

Sebastiaan wrote.... (site)

Hey Kees,
that is the beauty of it all, you don't need a print-button. The print-stylesheet is automagically accessed by your browser of choice if available.

For the sake of your argument, you could do this as follows:
- Create a Javascript function that prints the browserwindow, like this: function printMe() { window.print() }
- Then call this Javascript function in a link or in a button like this: <a href="#" onclick="printMe();" onkeypress="printMe();" title="Print me">Print this page</a> or <input type="button" value="Print this page" onclick="printMe();" onkeypress="printMe();" />

Good luck!

28 July 2007 14:25 cet  

Leave your comment

Your name


Your url/website/link/email....


Some room for your reaction is placed here..



The answer to the ultimate question is?? (42 ;-))




URL en mail addresses are translated for you... life sometimes is that simple!!