SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2004
    Location
    Boston, MA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using CSS for Print

    I have created a contribution page ( that the donor is supposed to fill out and mail along with their contribution ) that I would like to print using CSS.

    Can someone please take a look at this page, and tell me what I'm doing wrong?

    http://www.digital-abode.com/tarr/contribution.html

    I have added the necessary coding inside the <head> section of my HTML document.

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

    I want to hide the header and left menu, but when I hit "print preview" on my browser, the whole form is shifted to the right instead of being centered in the middle.

    I've been trying to get it to work, but to no avail. Any help is appreciated.

    Thanks!

  2. #2
    SitePoint Zealot
    Join Date
    Mar 2004
    Location
    Boston, MA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I forgot to include the CSS code that specifies the appearance and layout of my printed page:

    ----------------------------------------------------------------------------------
    img.hide { display: none; }
    img.banner { display: none; }

    h1 { color: #000000; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12pt; font-weight: bold; padding: 15px 0 5px 0; }
    .main-col { color: #000000; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 9pt; font-weight: normal; padding: 0px 0 20px 0; line-height: 12pt; width: 454px; }
    .nav { display: none; }
    .sub-col { width: 500px: padding: 0 200px 70px 10px; }
    .border { border-style: none; padding: 0; margin: 0; }
    .hide { display: none; }
    .left-title { color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: bold; text-align: left; }
    .left-content { display: none; }
    .bodytext { color: #000000; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 9pt; font-weight: normal; }
    .smalltext { color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-weight: normal; }
    .index-cat { color: #000000; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 8.5pt; font-weight: bold; text-transform: uppercase; padding: 20px 0 5px 0; }
    .footer { display: none; }
    .footer-nav { color: #000000; font-size: 7pt; font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: normal; text-align: left; padding: 60px 0 8px 0; }
    ----------------------------------------------------------------------------------

    My html document is not completely table-less...it uses a few tables. Perhaps that could be the reason why I can't get just the contribution form, and nothing else, to print.

    Any CSS gurus out there? :-)

  3. #3
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suggest you take the <div class="hide"> out before the <td> that holds the navigation. Just associate that class on the <td> instead and that should help. DIVs shouldn't be put around TDs - if anything, they should be within them.

    Try that first...
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,809
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    I thnk bigsi's right except you need to hide the wholenav table instead.
    Code:
    		  <td bgcolor="#003366" width="168" valign="top"> 
    			<div class="hide"> 
    	<table border="0" width="168" cellspacing="0" cellpadding="0" align="left">
    			  <tr> 
    				<td width="4" class="nav"><img src="img/nav-arrow.gif" alt="" width="4" height="7" hspace="12" vspace="0" border="0" align="left"></td>
    				<td width="164" class="nav"><a class="nav" href="index.html">Home</a></td>
    			  </tr>
    			  <tr> 
    				<td width="4" class="nav"><img src="img/nav-arrow.gif" alt="" width="4" height="7" hspace="12" vspace="0" border="0" align="left"></td>
    				<td class="nav"><a class="nav" href="biography.html">Biography</a></td>
    			  </tr>
    			  <tr> 
    				<td width="4" class="nav"><img src="img/nav-arrow.gif" alt="" width="4" height="7" hspace="12" vspace="0" border="0" align="left"></td>
    				<td class="nav"><a class="nav" href="district-information.html">District 
    				  Information</a></td>
    			  </tr>
    			  <tr> 
    				<td width="4" class="nav"><img src="img/nav-arrow.gif" alt="" width="4" height="7" hspace="12" vspace="0" border="0" align="left"></td>
    				<td class="nav"><a class="nav" href="contact-information.html">Contact 
    				  Information</a></td>
    			  </tr>
    			  <tr> 
    				<td width="4" class="nav"><img src="img/nav-arrow.gif" alt="" width="4" height="7" hspace="12" vspace="0" border="0" align="left"></td>
    				<td class="nav"><a class="nav" href="honors-awards.html">Honors 
    				  &amp; Awards</a></td>
    			  </tr>
    			  <tr> 
    				<td width="4" class="nav"><img src="img/nav-arrow.gif" alt="" width="4" height="7" hspace="12" vspace="0" border="0" align="left"></td>
    				<td class="nav"><a class="nav" href="education.html">Education</a></td>
    			  </tr>
    			  <tr> 
    				<td width="4" class="nav"><img src="img/nav-arrow.gif" alt="" width="4" height="7" hspace="12" vspace="0" border="0" align="left"></td>
    				<td class="nav"><a class="nav" href="health-care.html">Health 
    				  Care</a></td>
    			  </tr>
    			  <tr> 
    				<td width="4" class="nav"><img src="img/nav-arrow.gif" alt="" width="4" height="7" hspace="12" vspace="0" border="0" align="left"></td>
    				<td class="nav"><a class="nav" href="environment.html">Environment</a></td>
    			  </tr>
    			  <tr> 
    				<td width="4" class="nav"><img src="img/nav-arrow.gif" alt="" width="4" height="7" hspace="12" vspace="0" border="0" align="left"></td>
    				<td class="nav"><a class="nav" href="economy.html">Economy</a></td>
    			  </tr>
    			  <tr> 
    				<td width="4" class="nav"><img src="img/nav-arrow.gif" alt="" width="4" height="7" hspace="12" vspace="0" border="0" align="left"></td>
    				<td class="nav"><a class="nav" href="public-safety.html">Public 
    				  Safety</a></td>
    			  </tr>
    			  <tr> 
    				<td width="4" class="nav"><img src="img/nav-arrow.gif" alt="" width="4" height="7" hspace="12" vspace="0" border="0" align="left"></td>
    				<td class="nav"><a class="nav" href="contribution.html">Make a 
    				  Contribution</a></td>
    			  </tr>
    			  <tr> 
    				<td width="4" class="nav"><img src="img/nav-arrow.gif" alt="" width="4" height="7" hspace="12" vspace="0" border="0" align="left"></td>
    				<td class="nav"><a class="nav" href="volunteer.html">Join Our 
    				  Team</a></td>
    			  </tr>
    			  <tr> 
    				<td width="4" class="nav"><img src="img/nav-arrow.gif" alt="" width="4" height="7" hspace="12" vspace="0" border="0" align="left"></td>
    				<td class="nav"><a class="nav" href="photo-gallery.html">Photo 
    				  Gallery</a></td>
    			  </tr>
    			  <tr> 
    				<td width="4" class="nav"><img src="img/nav-arrow.gif" alt="" width="4" height="7" hspace="12" vspace="0" border="0" align="left"></td>
    				<td class="nav"><a class="nav" href="thankyous.html">Thanks to 
    				  Bruce</a></td>
    			  </tr>
    			  <tr> 
    				<td width="4" class="nav"><img src="img/nav-arrow.gif" alt="" width="4" height="7" hspace="12" vspace="0" border="0" align="left"></td>
    				<td class="nav"><a class="nav" href="current-newsletter.html">Current 
    				  Newsletter</a></td>
    			  </tr>
    			  <tr> 
    				<td width="4" class="nav" style="border-bottom: 1px #1A4876 solid;"><img src="img/nav-arrow.gif" alt="" width="4" height="7" hspace="12" vspace="0" border="0" align="left"></td>
    				<td class="nav" style="border-bottom: 1px #1A4876 solid;"><a class="nav" href="store.html">BT 
    				  Store</a></td>
    			  </tr>
    			</table></div></td>
    		
    		<td bgcolor="#FAFAFA" width="100%" valign="top"> <table border="0" width="100%" cellspacing="0" cellpadding="0" align="left">
    			<tr> 
    			  <td width="100%" class="border" valign="top"> <table border="0" width="100%" cellspacing="0" cellpadding="0" align="left">
    				  <tr> 
    					<td rowpsan="2" width="100%" class="sub-col" valign="top"> 
    					  <div class="bodytext"> 
    						<h1>Make a Contribution</h1>
    						<p>To make a contribution to support our campaign effort, 
    						  please send a personal check, made payable to the &quot;<b>Bruce 
    						  Tarr Committee</b>,&quot; to the following address:</p>
    						Bruce Tarr Committee<br>
    						80 Essex Avenue<br>
    						Gloucester, MA 01930</p> 
    						<div class="smalltext" style="padding-bottom: 5px;">* 
    						  Please print this page, complete the necessary information 
    						  and include it when mailing your contribution.</div>
    						<p> 
    						<table border="0" width="100%" cellspacing="0" cellpadding="20">
    						  <tr> 
    							<td bgcolor="#FFFFFF" style="border: 1px solid #777777;" width="100%" class="bodytext" valign="top"> 
    							  <p align="center"><b>Enclosed is my personal check 
    								for $ ___________.</b></p>
    							  <div class="smalltext">* In order to comply with 
    								Campaign Finance Laws, we need your name and address.</div>
    							  <p> 
    							  <pre><b>NAME:</b>  ___________________________________________________________<br></pre> <pre><b>HOME ADDRESS:</b>  ___________________________________________________<br></pre> <pre>			   ___________________________________________________</pre> 
    							  <pre><b>HOME TELEPHONE (optional):</b>  ______________________________________</pre> <pre><b>MOBILE TELEPHONE (optional):</b>  ____________________________________</pre> <pre><b>WORK TELEPHONE (optional):</b>  ______________________________________</pre> 
    							  <pre><b>E-MAIL ADDRESS (optional):</b>  ______________________________________</pre> <div class="smalltext">* For 
    								contributions of $200 and above, we must also 
    								request your occupation and employer.</div>
    							  <pre><b>OCCUPATION:</b>  _____________________________________________________</pre> <pre><b>EMPLOYER:</b>  _______________________________________________________</pre> </td>
    						  </tr>
    						</table>
    					  </div></td>
    As bigsi said you could just apply the class to the inner table directly instead of adding a div.

    Paul

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2004
    Location
    Boston, MA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey it works!

    I've learned something new. You guys are just simply amazing. Thanks so much!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •