navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

Microsoft MVP

 

Prints pages using CSS

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> Prints pages using CSS
Page: [1]
 
Avick

 

Posts: 181
From: Ireland
Status: offline

 
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.


_____________________________

Alan
http://www.newebirl.net
Donkey

 

Posts: 3866
Joined: 11/13/2001
From: Blackfield United Kingdom
Status: offline

 
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.

_____________________________

:)

I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't.
Samuel Clemens

(in reply to Avick)
Avick

 

Posts: 181
From: Ireland
Status: offline

 
RE: Prints pages using CSS - 1/19/2005 11:03:25   
Thats exactly what I was looking for.. Thanks a lot :)

_____________________________

Alan
http://www.newebirl.net

(in reply to Donkey)
Karl

 

Posts: 172
From: Chucktown, SC
Status: offline

 
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

_____________________________

Create, validate, and communicate!
Adonnis Networks

(in reply to Avick)
Avick

 

Posts: 181
From: Ireland
Status: offline

 
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.


_____________________________

Alan
http://www.newebirl.net

(in reply to Karl)
Karl

 

Posts: 172
From: Chucktown, SC
Status: offline

 
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

< Message edited by Karl -- 1/20/2005 8:09:37 >


_____________________________

Create, validate, and communicate!
Adonnis Networks

(in reply to Avick)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> Prints pages using CSS
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts