Making a web page print sensibly

[jeanm]

I've created a web page listing heaps of photos of products I sell, (see it here in its temporary location): http://d7806.mysite.westnethosting.com.au/tin-ceilings-patterns.php and I need to have it so clients can print it. Printing it just as is doesn't work so I've created a page with all the images on the left side, see: http://d7806.mysite.westnethosting.com.au/print.ceilingpatterns.page.php

When I try to print it all works well till it gets to row 8. Somehow the Beresford pattern gets omitted and it continues on printing and shoves the remaining panels forward by one position.

I thought I'd save it as a PDF file but that doesn't seem a possibility within Dreamweaver CS5.

I really don't know how to move forward on this one. Does anyone have any suggestions please?

 

[Phreaddee]

print friendly version / separate css?

 

[jeanm]

This is what I have for the css for the printable page:

div.container-printable
{
width:920px;
height:auto;
background-color:#FFFFFF;
margin-top:0px;
margin-right:50px;
margin-bottom:5px;
margin-left:50px;
border:1px #000000;
}



div.patterns-printable-page-white
{
margin-left:20px;
width:665px;
height:2600px;
border:solid 2px #CCCCCC;
background-color:#FFFFFF;
padding:0.2em;
}

 

[DHDdirect]

Hello Jeanm

You shouldn't have to change the style names any. It is as simple as adding a second link to a css file with media type print.

Such as:

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

print.css will basically be a copy of the screen.css styles with the styles content modified to hide divs, images, change background and font size etc.

 

[jeanm]

Thanks for replying Jason. I'm a bit limited in my understanding and knowledge.

Are you saying I should input both those lines of code into my "printable" page along with the line I already have in there?

What else do I have to do? What changes are needed in the css side of things please?

I probably need answers suitable for a 5 year old

 

[jeanm]

I think I'm getting the idea. I've created a page called print.css and you can see its contents here:

body {color:#000000; background:#ffffff; font-family:"Times New Roman", Times, serif; font-size:0.7em;}

h1 {font-size:0.9em; color:#000000; text-transform:capitalize;}

a:link {text-decoration:underline; color:#0000ff; font:size:0.7em;}

div.header, div.jeans-photo, div.navigation, div.footer {display:none;}

div.individual-thumbnails {color:#000000; font-size:1.1em;}



In the normal web page showing all the patterns I've written:

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


I've still got a few things to iron out though. When I print the page it has a huge blank area all down the left side of each page and the far right of the page is missing so I need to align it better. Any suggestions?

I've noticed that the print at the top of the page prints out well enough but as soon as it gets to the actual rows of patterns it skips the rest of the page and begins printing the patterns on a fresh page. This makes page one look a bit silly but I don't know what would cause that. Anyone know?