Prints pages using CSS (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Avick -> Prints pages using CSS (1/19/2005 9:57:33)

I’m not sure if this can be done but I will ask just in case.

I have two Style sheets in my website. One is for media type Screen and the other is for print.

What I am trying to do is setup the print style sheet so it only prints the information on my site along with the logo. I don’t want to print the colours or the menus.

90% of my site is built using CSS and div tags. Very few tables.



Donkey -> RE: Prints pages using CSS (1/19/2005 10:48:58)

I would make the screen sheet first then copy it and save as the Print Style Sheet.

On the print style sheet;
For anything you don't want to print (navigation etc.)give it the visibility:hidden property.
e.g. 
nav
{visibility:hidden;}


Then change everything else - colours, fonts etc to how you want them to print.

You can check in print preview as you go to see how it looks.



Avick -> RE: Prints pages using CSS (1/19/2005 11:03:25)

Thats exactly what I was looking for.. Thanks a lot [:)]



Karl -> RE: Prints pages using CSS (1/20/2005 0:15:53)

You can also choose the option of going another route.

Create a specific header (logo header) for print view. HOwever, in the screen style sheet, describe the img:

display: none;

Do the reverse in the print for anything you do not want to show up. Here is an example of how it can be done (view the print preview):

Sample Company Site

Feel free to let me know if you have any questions. I hope this helps.

Karl



Avick -> RE: Prints pages using CSS (1/20/2005 5:44:36)

Thanks folks.

When I used the visibility command it worked to an extent. What actually happened was that the page was displaying with a large white gap between the first line of text and the second. I could not get it right no matter what I done. When I previewed in Mozilla the gap was gone but the first part of the text was indented about 200-300px

I then changed some of the commands from visabilty:none to display:none and bingo, everything worked as expected.

I like the idea of a special print logo. I will give that a go when I get a chance.

Thanks again.



Karl -> RE: Prints pages using CSS (1/20/2005 7:54:23)

I am glad it worked out Avick. Let me know if you have any questions.

Also, have a look at the W3Schools' CSS Print Media page to learn some more on what can be done with print style sheets.

Karl



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875