Forum Moderators: not2easy

Message Too Old, No Replies

Print sheet hides menu but leaves a open space

         

trollza

1:49 pm on Oct 27, 2004 (gmt 0)

10+ Year Member



Hi all

I am new to all of this, i have desidned a page with a print css sheet , I can get the print version to drop the top and side menu bars and only print the rest of the page...... BUT the output still leaves a big gap on the page where the "hidden" sections are.

my style sheet is

.print {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
}
body {
color : #000000;
background : #ffffff;
font-family : "Times New Roman", Times, serif;
font-size : 12pt;
}
#top, #left, {
display : none;
}

Smad

1:54 pm on Oct 27, 2004 (gmt 0)

10+ Year Member



#top, #left, {
display : none;
}

I think the extra comma might be causing probs
#top, #left {
display : none;
}

trollza

2:07 pm on Oct 27, 2004 (gmt 0)

10+ Year Member



Gave it a try but still have the gaps on the printed page where the "hidden" sections are on the web page.

There must be a way to "force" the printed section to start in the top right of the printed page...... :(

Smad

2:24 pm on Oct 27, 2004 (gmt 0)

10+ Year Member



have you got the css file setup for media print?

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

DrDoc

2:41 pm on Oct 27, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to WebmasterWorld! [WebmasterWorld.com]

There must be a way to "force" the printed section to start in the top right of the printed page

Look at it this way -- What you're doing is simply telling the "top" and "left" sections not to be displayed. But what about other elements? If they are absolutely positioned, then they will remain in the same position, since that's what you're asking them to do. If the printed contents don't start in the top-left (or top-right, as you want it to do) it is because you're telling 'em not to, somewhere in your style sheet.

trollza

2:57 pm on Oct 27, 2004 (gmt 0)

10+ Year Member



Hi Ther e

here is the HTML

<link rel="stylesheet" type="text/css" href="/css_files/print.css" media="print">
</head>
<body leftmargin="0" topmargin="0">
<div id="top" name="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="150" rowspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="150" valign="top"><img src="/images/base/top-left.jpg" width="150" height="119"></td>
</tr>
</table></td>
<td width="100%" valign="top"> <table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="134" valign="top"><img src="/images/base/home-new.jpg" width="134" height="41" border="0" usemap="#Map"></td>
<td width="100%" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="100%" height="31" valign="top" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000033', endColorStr='#3366CC', gradientType='1')"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td height="10" background="/images/base/top-shadow.jpg"></td>
</tr>
</table></td>
<td width="202" valign="top"><img src="/images/base/telephone.jpg" width="202" height="39"></td>
</tr>
</table></td>
<tr>
<td valign="top"> <table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="100%" valign="top"><img src="/images/base/interlink-full.jpg" width="398" height="78"></td>
</tr>
</table></tr>
</table>
</div id="top" name="top">
<table width="718" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="157" height="459" valign="top">
<div id="left" name="left"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="150" height="300" valign="top"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="150" height="300">
<param name="movie" value="/flash_files/menu.swf">
<param name=quality value=high>
<embed src="/flash_files/menu.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="150" height="300"></embed>
</object></td>
<td width="7" rowspan="2" valign="top" background="/images/base/left-shadow.jpg"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td height="40" valign="top" bgcolor="#000033"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td height="119" colspan="2" valign="top"><img src="/images/base/bottom-left.jpg" width="157" height="119"></td>
</tr>
</table></div id="left" name="left"></td>
<td width="19">&nbsp;</td>
<td width="542" rowspan="2" valign="top"><div id="main" name="main">
<table width="100%" border="0" cellpadding="20" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="322" height="90" valign="middle"><h1>Test </h1></td>
<td width="140" valign="middle"> <div align="right"></div></td>
</tr>
<tr>
<td height="369" colspan="2" valign="top"><h1></h1>
test</td>
</tr>
<tr>
<td height="33" colspan="2" valign="top"><div align="center">
<p><a href="javascript:windowHandle = window.open('/terms.htm','Terms','width=600,height=400,scrollbars=yes'); windowHandle.focus()">Terms
and Conditions </a></p>
</div></td>
</tr>
</table></div id="main" name="main"></td>
</tr>
<tr>
<td height="33">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<map name="Map">
<area shape="rect" coords="9,6,53,24" href="/welcome.htm">
<area shape="rect" coords="64,6,126,23" href="/jade/Listings.html">
</map>
</body>

the style sheet is

.print {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
}
body {
color : #000000;
background : #ffffff;
font-family : "Times New Roman", Times, serif;
font-size : 12pt;
}
#top, #left {
display : none;
}

I am LOSTTTTTTTTTTT

trollza

3:35 pm on Oct 27, 2004 (gmt 0)

10+ Year Member



his might be easier to see

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="/css_files/print.css" media="print">
</head>

<body>
<table width="718" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="157" height="459" valign="top">
<div id="left" name="left"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="150" height="300" valign="top"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="150" height="300">
<param name="movie" value="/flash_files/menu.swf">
<param name=quality value=high>
<embed src="/flash_files/menu.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="150" height="300"></embed>
</object></td>
<td width="7" rowspan="2" valign="top" background="/images/base/left-shadow.jpg"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td height="40" valign="top" bgcolor="#000033"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td height="119" colspan="2" valign="top"><img src="/images/base/bottom-left.jpg" width="157" height="119"></td>
</tr>
</table></div id="left" name="left"></td>
<td width="19">&nbsp;</td>
<td width="542" rowspan="2" valign="top"><div id="main" name="main">
<table width="100%" border="0" cellpadding="20" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="322" height="90" valign="middle"><h1>Test </h1></td>
<td width="140" valign="middle"> <div align="right"></div></td>
</tr>
<tr>
<td height="369" colspan="2" valign="top"><h1></h1>
test</td>
</tr>
<tr>
<td height="33" colspan="2" valign="top"><div align="center">
<p><a href="javascript:windowHandle = window.open('/terms.htm','Terms','width=600,height=400,scrollbars=yes'); windowHandle.focus()">Terms
and Conditions </a></p>
</div></td>
</tr>
</table></div id="main" name="main"></td>
</tr>
<tr>
<td height="33">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

Style sheet is

.print {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
}
body {
color : #000000;
background : #ffffff;
font-family : "Times New Roman", Times, serif;
font-size : 12pt;
}
#top, #left {
display : none;
}

Smad

8:10 am on Oct 28, 2004 (gmt 0)

10+ Year Member



i think the problem is that although you remove the div the table still ultimately is controlling the layout.

Maybe work toward a css layout which would give you better control over these types of elements