Results 1 to 9 of 9

Thread: Print Question please

  1. #1
    Join Date
    Jan 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Print Question please

    How can I pirnt only one containt or something from the hole page..
    I mean I have a page which has images and text and dynamic table with data..
    I need to print only the table and data.
    Thanks

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    You can use a
    Code:
    @media print {
    }
    section in your stylesheet to apply different styles for printing. For example, to hide everything but an element with the ID of "text":
    Code:
    @media print {
      body {
        visibility: hidden;
      }
      #text {
        visibility: visible;
      }
    }
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Twey
    You can use a
    Code:
    @media print {
    }
    section [...]
    Or, if the changes are substantial, use a link element with a media attribute:

    HTML Code:
    <link rel="stylesheet" type="text/css" href="print.css" media="print">
    Code:
    @media print {
      body {
        visibility: hidden;
      }
      #text {
        visibility: visible;
      }
    }
    It may be more advisable to use display: none to hide for two reasons:

    1. The visibility property only prevents rendering of a box. That box will still affect layout, so that #text element may appear in the middle of the paper (if that were the intent, it should be done so explicitly).
    2. IE renders all descendants of a hidden element invisible and cannot be overridden later (unlike with Op and Fx), so the simple treatment shown above won't work anyway.
    Mike

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Quote Originally Posted by Mike
    It may be more advisable to use display: none to hide for two reasons:

    1. The visibility property only prevents rendering of a box. That box will still affect layout, so that #text element may appear in the middle of the paper (if that were the intent, it should be done so explicitly).
    2. IE renders all descendants of a hidden element invisible and cannot be overridden later (unlike with Op and Fx), so the simple treatment shown above won't work anyway.
    Blast... I did ponder this one for a few minutes, before deciding that visibility would be better because the text could end up in odd positions that would destroy its meaning. Evidently, I was wrong.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  5. #5
    Join Date
    Feb 2005
    Posts
    71
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    I am having a similar problem to the one above.

    I want to enable viewers to print just the map that I have uploaded to http://www.vweekender.co.uk/location.htm

    I've tried using the "display: none" code but for some reason it still prints a blank page 1 and then prints the map on page 2.

    Can anyone suggest what I can do to enable viewers to just print the map on page 1?

    I was thinking about using the "print this page button" from
    http://www.dynamicdrive.com/dynamicindex9/other1.htm too? Could that help in anyway?

    When replying, please make any instructions as idiot-proof as possible - my knowledge of code is fairly basic. I tend to be a bit sloppy with my HTML too, so apologies if the page I referred to is a mess!

    Looking forward to receiving your replies.

    Rob

  6. #6
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by robertsaunders View Post
    I want to enable viewers to print just the map that I have uploaded to http://www.vweekender.co.uk/location.htm

    ...

    I tend to be a bit sloppy with my HTML too, so apologies if the page I referred to is a mess!
    That happens to be the problem, here. With valid markup, the document would print properly.

    The first problem is that of character encoding. Your server advertises the ISO-8859-1 encoding scheme, but your document starts with what appears to be a UTF-8 byte order mark[1] (BOM). Under HTTP, the former is authoritative and any user agent worth its salt will respect the Content-Type header (once again, MSIE excludes itself from being labelled 'decent'). Make sure that you're saving documents for that site using ISO-8859-1, or change the server configuration.

    There are five syntactic errors: the first meta element is missing the greater-than symbol (>) for the end of the start-tag; the link element can only be a child of the head element; the end-tag of the first p element is also missing its greater-than symbol; the href attribute of the anchor uses ampersands (&) directly, not the &amp; entity reference; the center element is missing its end-tag, which is required.

    There are two technical issues: you use a br element for vertical spacing between two block-level elements, when its use should be restricted to breaking in-line content; you used "click here"-style link text, which should be avoided.

    There are also errors in your style sheet: the first margin-bottom declaration has a non-zero length value with no unit; white space cannot occur before the unit specifier in a length value, as in the letter-spacing declarations.

    Again, there are a few technical issues.

    • None of the font-family declarations includes a generic. This isn't required, but it is strongly recommended.
    • Only one of the color declarations has a paired background (or background-color) declaration.
    • You specify a pt unit for all media, when it's only really appropriate for print media.
    • Body text will be reduced to 80% of the default, when it should be left at 100%. Verdana is a larger font: if it's too large at the default size, don't use it. Don't shrink it as that smaller size may be uncomfortably small for the other, fall back fonts.
    • The link underline has been removed for a link that's within text. Removing the underline when it's clear that a link is a link is OK - for example, in a navigation menu - but colour alone should not be used to indicate a link when surrounded by normal text.


    Here's a reimplementation, with an embedded style sheet for simplicity - separate it, if you wish.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en">
        <head>
            <title>VWeekender.co.uk ― How to find Balcombe, Sussex</title>
    
            <meta name="description"
                content="How to find VWeekender.co.uk, VW campervan hire in Balcombe, West Sussex">
            <meta name="keywords"
                content="VW, Camper, van, campervan, campers, campervans, hire, Balcombe, Sussex, UK, Brighton, London, Gatwick, airport, weekends, weekend, festivals, festival, holidays, type 2, glastonbury, Volkswagen, Isle of Wight, Reading, Sunny">
    
            <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            body {
                background: #ffffff;
                color: #000000;
                padding: 0.5em;
            }
            body, body * {
                font: 100%/1.3 Arial, sans-serif;
            }
            a:link {
                background: transparent;
                color: #0000ff;
            }
            a:visited {
                background: transparent;
                color: #000080;
            }
            h1 {
                font-size: 150%;
                letter-spacing: 1px;
                text-align: center;
            }
            p {
                margin-top: 0.5em;
            }
            p+p {
                margin-top: 0;
                text-indent: 1.5em;
            }
            .container {
                margin: 0 auto;
                min-width: 754px;
                max-width: 50em;
            }
            .map {
                margin-top: 1em;
                text-align: center;
            }
            .map img {
                border: 2px solid #000000;
                vertical-align: top;
            }
    
            @media print {
                * {
                    margin: 0 !important;
                    padding: 0 !important;
                }
                h1, p {
                    display: none;
                }
                .map img {
                    border: none;
                }
            }
            @page {
                margin: 0;
            }
            </style>
        </head>
    
        <body>
            <div class="container">
                <h1>How to find us</h1>
                <p>Below is a printer-friendly map of Balcombe which shows how to find us once you
                    arrive in the village.</p>
                <p>For directions on how to get to Balcombe itself, the <a href="http://maps.google.co.uk/maps?f=q&amp;hl=en&amp;q=balcombe&amp;ie=UTF8&amp;om=1&amp;z=9&amp;ll=51.170733,-0.032959&amp;spn=0.778398,2.752075&amp;iwloc=addr"
                    >Google Map of Balcombe</a> can give you directions from anywhere in the UK. You
                    can also use it for planning your journey in Sunny thereafter.</p>
                <div class="map">
                    <img alt="Balcombe village map" src="balmap.gif">
                </div>
            </div>
        </body>
    </html>
    You might want to add the address explicitly in this document so that visitors can find all location-related information in one place.

    Hope that helps,
    Mike


    [1] A BOM doesn't make much sense under the UTF-8 encoding scheme as there are no byte order options, though it can be useful for identifying UTF-8 documents when a higher protocol isn't available that can provide other means. In XML, this is the XML declaration within the prologue (prolog). Under HTTP, this is the charset parameter of the Content-Type header for all text MIME types, and other types that define an analogous parameter.
    Last edited by mwinter; 11-27-2006 at 12:32 AM. Reason: Mentioned adding address.

  7. #7
    Join Date
    Feb 2005
    Posts
    71
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much indeed. Your reply was very helpful. I feel like I'm back at school and have just got my homework back with red pen scribbled all over it.

    Just one problem: using the code you propose, although the image now prints on page 1, it is cropped on the right hand side. Do I just need to reduce the size of the gif image or is there another way? Is there a max pixel width of image on a web page that an A4 printer will print without cropping?

    Thanks for the suggestion to add the address, which I will do. We are still working on the text but I wanted to get the technical side sorted out first.

    Finally, the new host that I am using seems to be pretty bad. Can you suggest a decent (and cheap) host? If that is not allowed on this forum, you could send me a private message?

    Thanks again.

    Rob

  8. #8
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by robertsaunders View Post
    I feel like I'm back at school and have just got my homework back with red pen scribbled all over it.
    Sorry, it wasn't meant to come across like that.

    Just one problem: using the code you propose, although the image now prints on page 1, it is cropped on the right hand side. Do I just need to reduce the size of the gif image or is there another way?
    The former, more than likely. The printer settings will affect the output: I included the CSS means of removing page margins, but few browsers will actually honour it, unfortunately. It's still up to users to remove them in the majority of cases. Some browsers will scale the output to fit the page, which makes life a little easier for those users.

    Is there a max pixel width of image on a web page that an A4 printer will print without cropping?[
    Technically, it should depend on the resolution - that is, the pixel density - specified when the image was created. I don't know if browsers actually care, but I doubt they do. There's always trial and error - not ideal, I know - based on the default margin sizes (which seem to be around 0.75 inches all around, at the largest).

    Finally, the new host that I am using seems to be pretty bad.
    The encoding thing isn't really their fault, just a default setting, though it can be an awkward problem to spot at times. You should be able to get them to change it, or you could even try and change it yourself using a .htaccess file. However, I can appreciate that you might have other problems with them.

    Can you suggest a decent (and cheap) host?
    What sort of features are you looking for? Do you need strong technical support? Does location matter? There have been threads on hosts in the past which might give you some hints, and you can always start your own with a list of your ideal services. There are a lot of people here that have used a lot of hosts - good and bad.

    Mike

  9. #9
    Join Date
    Feb 2005
    Posts
    71
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    I've resized the image to 640 width which seems to work fine now. Thanks.

    As for host, no location doesn't matter. Reliability and cost are my main concerns. I have about 10 sites that I run now on four different hosts, so really I'm looking for a host where I can host them all at a reduced cost and add on extra sites as and when I create them.

    I'll browse the other threads and maybe start a new one if necessary. I've read a few reviews which indicate that lunarpages might be a good option.

    Thanks again for all your help Mike.

    Rob

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
  •