Page 2 of 2 FirstFirst 12
Results 11 to 16 of 16

Thread: CSS and Printing!

  1. #11
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Those are CSS3 properties for rounded corners. They only work in Firefox and Safari at the moment. You can learn more here:
    http://css-tricks.com/video-screencasts/24-rounded-corners/

  2. #12
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Also, I didn't add them, they were in your original definitions.

    Now, when I tested the code, the images shrank proportionally, they were not squished in either dimension, same thing with the captions.

    The problem was - in IE at least - that the division that contains the images is being treated as a single page element. So, if it is too big to fit on the the first page, it's moved to the second page, and then if it is too big for that, its bottom was getting cut off. I redefined the print dimensions for the images to 91 x 91. So, as I say, they should not appear squished, as they were already square at 140 x 140.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #13
    Join Date
    Apr 2008
    Posts
    109
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    I redefined the print dimensions for the images to 91 x 91. So, as I say, they should not appear squished, as they were already square at 140 x 140.
    Yeah. However, there are other pages with thumbnail images that have irregular dimensions, such as http://www.froso.dk/test/produkter/laager.html. And they look awful when the height is modified here:

    Code:
    .thumbnailcenter {
    	height: 91;
    	width: 91;
    	text-decoration: none;
    	padding: 0px;
    	background:none;
    }
    I think that letting height and width stay fixed at 'auto' is best for print, so that printed images resemble most realism.

    Unfortunately, I think that may be it for this endeavor. I don't think there's a way to compromise with this situation.


    Cheers,
    Bassa

  4. #14
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That's not what I had, I had:

    Code:
    ..thumbnailcenter {
    	height: auto;
    	width: auto;
    	text-decoration: none;
    	padding: 0px;
    	background:none;
    }
    Then for the images themselves:

    Code:
    .thumbnailcenter img {
    width:91px;
    height:91px;
    }
    Which, if that is distorting the aspect ratio of some images, could probably be:

    Code:
    .thumbnailcenter img {
    width:auto!important;
    height:91px;
    }
    Either that or (if it doesn't work out) individual dimensions can be given for any image that might require them.

    Another approach would be to redesign the layout in such a way that would allow page breaks within the image display area. Then the images would only have to fit horizontally, which I believe most browsers will handle gracefully in their 'shrink to fit' print mode.

    This may not be as hard as it seems, you could simply use more than one container division for the images and give them all the:

    page-break-after: always;

    style property/value pair. With a little trial and error, a nice arrangement of the divisions could be made for each page that would render a good looking printout.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #15
    Join Date
    Apr 2008
    Posts
    109
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thanks, John!

    You actually gave me an idea for a CSS container that holds the horizontal lines of thumbnail images (usually 4 images in each line).

    Controlled through this simple method:

    Code:
    #thumbnail_container {
    	width:100%;
    	height:auto;
    	margin:0px;
    	padding: 0px 0px 20px;
    }
    With the .HTML looking like this:

    Code:
    <div id="thumbnail_container">
    <div class="thumbnail">
    <div class="thumbnailtop"></div>
    <div class="thumbnailcenter">
    <a href="bordplader/1071158_5568.gif" rel="lightbox" title="5568 - Everest"><img src="bordplader/1071158_5568_thumb.gif" alt="5568 - Everest" width="140" height="140" border="0" /></a></div>
    <div class="thumbnailbottom">5568 - Everest</div>
    </div>
    
    <div class="thumbnail">
    <div class="thumbnailtop"></div>
    <div class="thumbnailcenter">
    <a href="bordplader/1071158_5816.gif" rel="lightbox" title="5816 - Mineral"><img src="bordplader/1071158_5816_thumb.gif" alt="5816 - Mineral" width="140" height="140" border="0" /></a></div>
    <div class="thumbnailbottom">5816 - Mineral</div>
    </div>
    
    <div class="thumbnail">
    <div class="thumbnailtop"></div>
    <div class="thumbnailcenter">
    <a href="bordplader/1071158_5906.gif" rel="lightbox" title="5906 - Mahogny"><img src="bordplader/1071158_5906_thumb.gif" alt="5906 - Mahogny" width="140" height="140" border="0" /></a></div>
    <div class="thumbnailbottom">5906 - Mahogny</div>
    </div>
    
    <div class="thumbnail">
    <div class="thumbnailtop"></div>
    <div class="thumbnailcenter">
    <a href="bordplader/1071158_5984.gif" rel="lightbox" title="5984 - Sandstorm"><img src="bordplader/1071158_5984_thumb.gif" alt="5984 - Sandstorm" width="140" height="140" border="0" /></a></div>
    <div class="thumbnailbottom">5984 - Sandstorm</div>
    </div></div>
    Works perfectly. I'll have to double-check for other browsers than IE as well, though.


    Cheers,
    Bassa

  6. #16
    Join Date
    Apr 2008
    Posts
    109
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Ok, so I'm nearing the end of my website and are just putting the final touches and optimizations upon it before launch.

    I've a question, though. Nothing serious, but rather something that annoys me slightly.

    Check these two webpages.

    Kitchen Sinks:
    http://www.froso.dk/test/produkter/vaske.html

    Table Colors:
    http://www.froso.dk/test/produkter/b...r_laminat.html

    Now, the webpage with Kitchen Sinks renders quite well when being printed, with the text at the top of the page, and thumbnail images nicely rendered side-by-side downwards and all.

    However, the page with Table Color thumbnail images skips almost an entire page before being rendered in the printed document.

    Perhaps anyone has an idea as to why that occurs?

    I'm having difficulty finding the reasons behind this as I've used the exact same techniques and layout on both pages.


    Cheers,
    Bassa

Tags for this Thread

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
  •