SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    ********* Streaker Lister14's Avatar
    Join Date
    Jun 2002
    Location
    C:\Documents and Settings\Desktop\Recycle Bin
    Posts
    677
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Printing differently using CSS

    hi all,

    i came accross this a while ago. one is able to specify a different css file for printing purposes. unfortunately i am unable to find the place anymore where it was described.

    would someone please be kind to post what goes into the <head> tag, or maybe a link to an appropriate page?

    -cheers x
    roy.lu
    C:\DOS... C:\DOS\RUN... RUN\DOS\RUN...!

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm only quoting from elsewhere on the web, but I'm keen to investigate this myself hence the research.

    The following are three ways of achieving the same thing:
    Code:
    <!-- The most familiar way is to use the LINK element and simply add one or more media attributes -->
    <LINK rel="stylesheet" type"text/css" href="print.css" media="print,projection">
    
    <!-- You can list one or more media types on an @import statement -->
    @import url(paged.css) print,projection;
    
    <!-- the @media rule -->
    <STYLE type="text/css">
    @media print {
       BODY {font-size: 10pt; line-height: 120%; background: white;}
    }
    @media screen {
       BODY {font-size: medium; line-height: 1em; background: silver;}
    }
    </STYLE>
    Hope that helps,

    Andy
    From the English nation to a US location.

  3. #3
    SitePoint Zealot Hulkur's Avatar
    Join Date
    Oct 2001
    Location
    Estonia
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @media print { style here }

    http://www.w3.org/TR/REC-CSS2/media.html
    (2B) or (not 2B) = FF

  4. #4
    ********* Streaker Lister14's Avatar
    Join Date
    Jun 2002
    Location
    C:\Documents and Settings\Desktop\Recycle Bin
    Posts
    677
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you ever so much guys...

    the idea is that instead of adding a .pdf copy to download my cv from my site i try to keep it easy by letting people press the print button, however it should fit on an A4 page...

    roy.lu
    C:\DOS... C:\DOS\RUN... RUN\DOS\RUN...!

  5. #5
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Lister14
    the idea is that instead of adding a .pdf copy to download my cv from my site i try to keep it easy by letting people press the print button, however it should fit on an A4 page.
    That's a good idea and a good practical application of CSS. My CV (resume) is currently in Word format which isn't ideal and looks really ugly on-screen. However I created it in Word format to aid printing. When I get a chance, I'll follow your lead.

    Just out of interest, do you know if the text size defined in the user's browser affects the size of the printed output if you weren't using hard-coded text sizes in your HTML? I mean, it's one thing checking that it fits on A4 when printing it off on your printer, but does it automatically follow that the potential employer's print will look the same?

    Also, as an aside, I'm not sure about having your CV on the same site as links to wresling and comedy sites. I'd probably have it somewhere that's not linked to all that stuff


    Andy
    From the English nation to a US location.

  6. #6
    ********* Streaker Lister14's Avatar
    Join Date
    Jun 2002
    Location
    C:\Documents and Settings\Desktop\Recycle Bin
    Posts
    677
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well cgeers for the input... the site is still in its 'puberty'...

    i put the 'font-size' in pixels and think that 12px on my printer should equal 12px on theirs, still i wanna leave some margin, so that it should fit on any A4 (it should be centered but a little smaller than A4 actually).


    -still have an issue though:

    can't seem to remove div#topbar, div#banner, div.nav fro the printout...

    tried the following:

    @media print { div#topbar { width: 0px;
    height: 0px;} -no difference
    div#topbar { font-size: 0px;
    border: 0px;} -only border
    } dissapears

    however, there is no problem moving the div's around, lets say it's supposed to be

    div#main { top: 50px;
    left: 70px;}

    the following @media print { div#main { top: 10px;
    left: 10px;}
    }
    will actually move the div's position on the printout/print preview.

    why are the other values not taking any effect, and how can i specify to only print the div.main/div#main in A4 size?
    roy.lu
    C:\DOS... C:\DOS\RUN... RUN\DOS\RUN...!

  7. #7
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    two things...for print, it's usually best to define font sizes etc in points (pt), not pixels.
    and to make things disappear, just stick "display: none" in the relevant style definition.
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  8. #8
    ********* Streaker Lister14's Avatar
    Join Date
    Jun 2002
    Location
    C:\Documents and Settings\Desktop\Recycle Bin
    Posts
    677
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i love you redux!!


    ...well, thanks
    roy.lu
    C:\DOS... C:\DOS\RUN... RUN\DOS\RUN...!


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
  •