Having problem with layout for File->Print option ( not aligning)
I
have the footer with a stamp and address details and it is declared as follows
in the MasterPage. The image below it shows how it renders. However when I do
File->Print instead of the addresses aliging horizontally along the stamp ,
they are being printed vertically down one below the other. Any ideas how I can
fix this?
For make the print version look good, you have different options. The first option is to make a dedicated stylesheet, for you print version. When you have added the style in the dedicated stylesheet for the print version, then you need to add a link to it in the master template. It looks like this
The media attribute specifies what media/device the target resource is optimized for. This attribute is mostly used with CSS stylesheets to specify different styles for different media types. So when it has the media="print" this stylesheet, is only used for print.
The second option is using media queries to adding the print styling. For this you can use this syntaxs:
@media screen { body { width: 75%; } }
A good basic print stylesheet is e.g from the HTML5 boilerplate http://html5boilerplate.com/ and then you just need to add styling, to make elements looks as it should for printing.
As you can see the HTML5 boilerplate uses the section option I mentioned with the media query, but you can also just take this into a separate stylesheet, and link to this in the master template with the media attibute set to print.
Thanks for your response and i had looked at all the websites and did the exact same way you suggested that is to add a print css with media=print. Mostly everything looks fine in the print preview. We use bootstrap.css also. So the address listed in the footer is each has class="span2" and hence they get stacked up one below the other. is there a way to change the class (style) for print.
Having problem with layout for File->Print option ( not aligning)
I have the footer with a stamp and address details and it is declared as follows in the MasterPage. The image below it shows how it renders. However when I do File->Print instead of the addresses aliging horizontally along the stamp , they are being printed vertically down one below the other. Any ideas how I can fix this?
<div class="span2 contact-info">
<umbraco:Macro Alias="RenderAddress" addressType="Physical" runat="server" /></div>
<div class="span2 contact-info">
<umbraco:Macro Alias="RenderAddress" addressType="Mailing" runat="server" /></div>
<div class="span2 contact-info">
<umbraco:Macro Alias="RenderContactPhoneNumbers" runat="server" />
<umbraco:Macro Alias="RenderEmailAddress" runat="server" /></div>
In the File->Print it looks like this:
Hi sg,
For make the print version look good, you have different options. The first option is to make a dedicated stylesheet, for you print version. When you have added the style in the dedicated stylesheet for the print version, then you need to add a link to it in the master template. It looks like this
<link rel="stylesheet" type="text/css" href="print.css" media="print">
The media attribute specifies what media/device the target resource is optimized for. This attribute is mostly used with CSS stylesheets to specify different styles for different media types. So when it has the media="print" this stylesheet, is only used for print.
The second option is using media queries to adding the print styling. For this you can use this syntaxs:
A good basic print stylesheet is e.g from the HTML5 boilerplate http://html5boilerplate.com/ and then you just need to add styling, to make elements looks as it should for printing.
As you can see the HTML5 boilerplate uses the section option I mentioned with the media query, but you can also just take this into a separate stylesheet, and link to this in the master template with the media attibute set to print.
http://www.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/
http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
Hope this helps,
/Dennis
Hi Dennis,
Thanks for your response and i had looked at all the websites and did the exact same way you suggested that is to add a print css with media=print. Mostly everything looks fine in the print preview. We use bootstrap.css also. So the address listed in the footer is each has class="span2" and hence they get stacked up one below the other. is there a way to change the class (style) for print.
Thanks
Shilpi
is working on a reply...