#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2000
    Location
    London, England
    Posts
    64
    Rep Power
    14

    Printing with CSS


    This is really annoying:

    I have a page which is made up of two columns, the first contains info I don't want printed, the second contains info I do want printed.

    The trouble is, the table is set at 780px wide and the first column is set to 194px wide. I can hide the first column but when I print the page the column with the content in it runs off the page and there is a large gap left by the 1st column.

    Ideally I would like to have all the content in the 2nd column visible when I print.

    I've tried using divs to prevent it displaying but nothing seems to work.

    If I could put div tags around the actual content and disregard everything else that would be great.

    Can anyone think of a way to do this or any other workaround?
    Last edited by Gareth; March 31st, 2003 at 02:45 PM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2002
    Location
    San Francisco, CA
    Posts
    226
    Rep Power
    12
    Is this for personal use or is this an app that other people will use too?

    If it's for personal use, your printer should, if it's relatively new, have a setting to fit all content to the page.

    If it's an app, can't you just make a print button that opens a new window with just the info from the 2nd column. Not a efficent solution, but it works. It would be nice if the info was pulled from a db so you wouldn't have to re-write it.

    Other than that, nothing comes to mind immediately. I don't understand how you were using the div tags to print thou. If you were hiding the first column with div tags, why is it there at all?
    -Samantha
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    Canberra, Australia
    Posts
    348
    Rep Power
    13

    Unhappy


    <--- removed incomplete post --->

    See below
    Last edited by Phil_work; April 2nd, 2003 at 12:15 AM.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    Canberra, Australia
    Posts
    348
    Rep Power
    13
    if your columns were laid out using CSS positioning and you had two different ID's control each DIV in your print stylesheet you could hide one and display the other, by using a different print CSS file, that only is invoked on print of the page.


    Set up your page like this.

    HTML:
    <link rel="stylesheet" title="default style" href="1.css" media="screen">
    <link rel="stylesheet" title="printer style" href="1.css" media="print">

    <div id="column1">
    I want to hide this content on print
    </div>

    <div id="column2">
    I want to print this content
    </div>

    on the other hand you could give your table cells an ID or Class,

    ID if there is only 1, class if there is mulitple.

    <td id="hideme">
    <td id="printme">

    CSS: Note that your CSS selector will also have declarations controlling the position of those elements.
    #column1 {
    display: none;
    }
    #column2 {
    display: block;
    }

    prolly confused the hell out of you, hope not though

IMN logo majestic logo threadwatch logo seochat tools logo