SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image when printing

    Hi

    I have a logo i need to appear when printing at top of page. The only way I can think of doing it is to have it in the header div as a background image in my print css - however...it doesnt print.

    Does anyone have any ideas, solutions.

    I attach both style sheets - screen first, then print.

    Many thanks

    Gavin


    html,body{margin:0;padding:0}
    body {
    text-align:center;
    margin-top:2px;
    margin-bottom:0px;
    background: #E6E6E6;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    }

    img {
    border:none;
    margin:0px; }
    #frame {
    width:750px;
    margin-right:auto;
    margin-left:auto;
    text-align:center;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    }
    * html #frame {width:752px;w\idth:750px;}
    #header{
    width:750px;
    margin:0px;
    padding:0px;
    background: #fff;
    text-align: center;
    }
    #news {
    float:left;
    width:750px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 18px;
    text-indent:22px;
    color: #666;
    padding-top:10px;
    padding-bottom:10px;
    background: #E6E6E6;
    font-weight: bold;
    }
    * html #news {height:70px;he\ight:50px}
    #news p{
    margin:0px;
    }

    #news a:link {
    font-family: Arial, Helvetica, sans-serif;
    color: #f90;
    text-decoration: none;
    font-weight: normal;
    font-size: 11px;
    }
    #news a:visited {
    font-family: Arial, Helvetica, sans-serif;
    color: #999;
    text-decoration: none;
    font-weight: normal;
    font-size: 11px;
    }
    #news a:hover {
    font-family: Arial, Helvetica, sans-serif;
    color: #666;
    text-decoration: none;
    font-weight: normal;
    font-size: 11px;
    }
    #nav {
    float:left;
    width:100%;
    height:20px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 20px;
    text-indent:22px;
    padding-bottom:10px;
    background: #fff;


    }

    #globe{
    float:left;
    width:750px;
    margin:0px;
    height:140px;
    padding:0px;
    text-align: center;
    border-bottom: 1px solid #999;
    clear:both
    }
    * html #globe{height:141px;he\ight:140px;}
    #footer{
    width:750px;
    padding-top:10px;
    margin-top:-10px;
    text-align: left;
    background: #D9D9D9;
    font-family: Helvetica, sans-serif;
    font-size: 10px;
    font-weight:normal;
    line-height: 10px;
    color: #666;
    text-indent:22px;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    position:relative;
    clear:both;
    }
    * html #footer {height:45px;he\ight:34px}
    #footer p {position:relative}
    #nav a:link {
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
    text-decoration: none;
    font-weight: normal;
    }
    #nav a:visited {
    font-family: Arial, Helvetica, sans-serif;
    color: #999;
    text-decoration: none;
    font-weight: normal;
    }
    #nav a:hover {
    font-family: Arial, Helvetica, sans-serif;
    color: #999;
    text-decoration: none;
    font-weight: normal;
    }
    #left{
    float:left;
    width:561px;
    margin:0px;
    padding:0px;
    height: 400px;
    background: #fff;
    text-align: left;
    }
    #left img{
    border:none;
    }
    #left_content{
    float:right;
    width:96%;
    height:350px;
    text-align: left;
    background: #fff;
    height: 400px;
    font-family: Helvetica, sans-serif;
    font-size: 12px;
    font-weight:normal;
    line-height: 14px;
    color: #666;
    overflow:auto;
    visibility: visible;
    padding-top:10px;
    padding-bottom:10px;
    }
    #right{
    float:left;
    width:187px;
    margin:0px;
    height:400px;
    padding:0px;
    background: #fff;
    text-align: left;
    border-left: 1px solid #999;
    font-family: Helvetica, sans-serif;
    font-size: 11px;
    font-weight:normal;
    line-height: 15px;
    color: #666;
    }
    #right img{
    display:block
    }
    #right p{
    float:right;
    width:95%;
    }
    #right h1{
    font-family: Helvetica, sans-serif;
    font-size: 18px;
    font-weight:bold;
    line-height: 18px;
    color: #666;
    }
    #right h2{
    font-family: Helvetica, sans-serif;
    font-size: 14px;
    font-weight:bold;
    line-height: 15px;
    color: #999;

    }
    #right h3{
    font-family: Helvetica, sans-serif;
    font-size: 12px;
    font-weight:normal;
    line-height: 14px;
    color: #333;
    margin-top:2px;
    margin-bottom:2px;




    }
    #right a:link {
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
    text-decoration: underline;
    font-weight: normal;
    }
    #right a:visited {
    font-family: Arial, Helvetica, sans-serif;
    color: #999;
    text-decoration: underline;
    font-weight: normal;
    }
    #right a:hover {
    font-family: Arial, Helvetica, sans-serif;
    color: #999;
    text-decoration: underline;
    font-weight: normal;
    }

    ul#nav, ul#nav ul {
    margin: 0;
    padding-left:0;
    list-style: none;
    }

    ul#nav li {
    position: relative;
    float: left;
    z-index: 2;
    margin:0px;
    }

    #nav li ul {
    position: absolute;
    left: 0; /* Set 1px less than menu width */
    top: 100%;
    display: none;
    width:180px;
    }


    /* Styles for Menu Items */
    ul#nav li a {
    display: block;
    text-decoration: none;
    color: #333;
    background: #fff; /* IE6 Bug */
    padding: 0px;
    height:20px;
    margin:0px;
    }
    /* commented backslash mac hiding hack \*/
    * html ul#nav li a {float:left}
    * html ul#nav li li a{float:none}
    /* end hack */
    #nav li ul li{float:none}

    /* this sets all hovered lists to red */
    #nav li:hover a,#nav li.over a,
    #nav li:hover li a:hover,#nav li.over li a:hover {
    color: #777;
    }

    /* set dropdown to default */
    #nav li:hover li a,#nav li.over li a {
    color: #777;
    background-color: #fff;

    }
    #nav li ul li a { padding: 2px 0px; } /* Sub Menu Styles */
    #nav li:hover ul,#nav li.over ul { display: block; } /* The magic */

  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is print css


    html,body{margin:0;padding:0}
    body {
    text-align:center;
    margin-top:2px;
    margin-bottom:0px;

    }

    img {
    border:none;
    margin:0px; }
    #frame {
    width:550px;
    margin-right:auto;
    margin-left:auto;
    text-align:center;
    }
    * html #frame {width:752px;w\idth:750px;}
    #header{
    background-image: url(resources/intl_ben_print.gif);
    background-repeat: no-repeat;
    background-position: left top;
    }
    #header img{
    display:none;
    }
    #news {
    float:left;
    width:750px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 18px;
    text-indent:22px;
    color: #000;
    padding-top:10px;
    padding-bottom:10px;
    background: #fff;
    font-weight: bold;
    }
    * html #news {height:70px;he\ight:50px}
    #news p{
    margin:0px;
    }

    #news a:link {
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    text-decoration: none;
    font-weight: normal;
    font-size: 11px;
    }
    #news a:visited {
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    text-decoration: none;
    font-weight: normal;
    font-size: 11px;
    }
    #news a:hover {
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    text-decoration: none;
    font-weight: normal;
    font-size: 11px;
    }
    #nav {
    display:none;


    }

    #globe{
    display:none;
    }
    * html #globe{display:none;}
    #footer{
    display:none;
    }
    * html #footer {display:none;}
    #footer p {display:none;}
    #nav a:link {
    display:none;
    }
    #nav a:visited {
    display:none;
    }
    #nav a:hover {
    display:none;
    }
    #left{
    float:left;
    width:561px;
    margin:0px;
    padding:0px;
    background: #fff;
    text-align: left;
    }
    #left img{
    border:none;
    }
    #left_content{
    float:none;
    width:auto;

    height:auto
    text-align: left;
    background: #fff;
    font-family: Helvetica, sans-serif;
    font-size: 12px;
    font-weight:normal;
    line-height: 14px;
    color: #666;

    }
    #right{
    float:left;
    width:187px;
    margin:0px;
    padding:0px;
    background: #fff;
    text-align: left;
    font-family: Helvetica, sans-serif;
    font-size: 11px;
    font-weight:normal;
    line-height: 15px;
    color: #000;
    }
    #right img{
    display:block
    }
    #right p{
    float:right;
    width:95%;
    }
    #right h1{
    font-family: Helvetica, sans-serif;
    font-size: 18px;
    font-weight:bold;
    line-height: 18px;
    color: #000;
    }
    #right h2{
    font-family: Helvetica, sans-serif;
    font-size: 14px;
    font-weight:bold;
    line-height: 15px;
    color: #000;

    }
    #right h3{
    font-family: Helvetica, sans-serif;
    font-size: 12px;
    font-weight:normal;
    line-height: 14px;
    color: #000;
    margin-top:2px;
    margin-bottom:2px;
    }
    #right a:link {
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    text-decoration: underline;
    font-weight: normal;
    }
    #right a:visited {
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    text-decoration: underline;
    font-weight: normal;
    }
    #right a:hover {
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    text-decoration: underline;
    font-weight: normal;
    }

    ul#nav, ul#nav ul {
    display:none;
    }

    ul#nav li {
    display:none;
    }

    #nav li ul {
    display:none;
    }


    /* Styles for Menu Items */
    ul#nav li a {
    display:none;
    }
    /* commented backslash mac hiding hack \*/
    * html ul#nav li a {display:none;}
    * html ul#nav li li a{display:none;}
    /* end hack */
    #nav li ul li{display:none;}

    /* this sets all hovered lists to red */
    #nav li:hover a,#nav li.over a,
    #nav li:hover li a:hover,#nav li.over li a:hover {
    display:none;
    }

    /* set dropdown to default */
    #nav li:hover li a,#nav li.over li a {
    display:none;
    display:none;

    }
    #nav li ul li a { display:none; } /* Sub Menu Styles */
    #nav li:hover ul,#nav li.over ul { display:none; } /* The magic */

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Are you supplying a width and height for the header so the background image has somewhere to show.

    If those two stylesheets are exclsuive to their media then it looks as though you have no dimensions for the image to show.

    Also note that a lot of browsers have images and backgrounds turned off by default when printing so there's not much you can do about that.

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok thanks

    i cant think of another way of getting a logo at top of page though without using the header div and having it in background...can you think of any other solutions?

    thanks

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    It doesn't have to be a background image as you can turn foreground images off as well.

    off:
    #header img {display:none}

    on:
    #header img {display:block}

  6. #6
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but i have a gif in the header div which i need to change when i go to print. So turning off and on wont work surely as i need to replace an existing image with another one??

    thanks

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can have a foreground image for printing, which you hide in your screen style sheet.

    Then you have another image as the background image, and hide that in your print style sheet.

    That way, the background image is shown on screen, and the foreground image when printing.
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    aha

    good thinking lol....as ever great help from ppl on this site.

    thanks

  9. #9
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have managed to get the image sorted as detailed above. thanks.

    However, it still seems to want to print the nav and the footer - could someone offer any advice.

    The page is at http://www.imageworks.co.uk/intl_ben...ntitled-2.html

    The 2 css styles are at http://www.imageworks.co.uk/intl_ben_web/intl_ben.css

    and intl_ben_print.css

    My client is going mad so any help would be great!

    Thanks

    Gav

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have an error in the <link> element for the print style sheet. Change type="print/css" into type="text/css" and see if it helps.

    (Opera 9 does not print the nav or the footer.)
    Birnam wood is come to Dunsinane

  11. #11
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok that works but now it doesnt take my hidden (reduced width) gif at the top anymore...grrrr.

  12. #12
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    any help please?

    many thanks

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    any help please
    Can you explain in more detail what the problem is as I didn't really understand what "but now it doesnt take my hidden (reduced width) gif " was referring to exactly. Are you talking about the print stylesheet or the normal stylesheet. and which element?

    You don't seem to have fixed the error that Tommy pointed out either!

  14. #14
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please view www.imageworks.co.uk/ibnfiles/intl_ben.css and /intl_ben_print.css

    The view www.imageworks.co.uk/ibnfiles/about-ibn.pdf (text cut off on r/hand side of page)
    www.imageworks.co.uk/ibnfiles/index.pdf (right div width not to full of page)

    Any tweaks would be greatly appreciated to solve thses problems. and thanks to all the peoiple who have helped me so far!!!!! i know it must be v tedious!

    Thank

    Gav

  15. #15
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can anybody please help me out?
    Thanks

  16. #16
    SitePoint Enthusiast simonpointer's Avatar
    Join Date
    Jun 2006
    Location
    Guildford UK
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi gav
    Wow a bit hard to keep up with what's going on here.....lol

    I think from what you have said, you have an image on your page a logo which you want to print through your print.css styles?

    Assuming that is the case, getting background images to print via your css styles sheet for print is a complete pain and not very consistent across the browsers, beleive me I have tried lots of times. Most browsers strip the bg images out when you go to print, even if you specifiy a display property of some kind.

    I recomment you approach it the other way around.

    Place your image into your mark up via a regular old <img> tag, and then if necessary hide it from the screen styles. That way it will print pretty well in most browsers. Remember that most borwsers are designed to show pages on screen as a primary purpose and are not really intended to be printing devises.

    Of course you may need to place the image into another container like a <div> to make it work - depends on what else you are doing.

    I hope that helps.


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
  •