Skip to main content
Help

Original post by: Filip Goc

Text:

For those interested, taking Eric's suggestion at just having two columns of images, here's the initial CSS I'm going with. I'm posting the whole CSS.

== All Images Same Size pdf CSS ==

Obviously just for inspiration, your mileage may vary.

* all images same size
* re-aligned bullets with now smaller 'large' image
* optimized borders so that they never align next to each other - which looks ugly in pdf
* centered logo, and give it some breathing space
* aligned summary with introduction
* everything is big. small paper margins.

[image|131035]

[code]
/* IMAGES - LAYOUT 
==================== */

ul.stepImages {
    width: 812px !important;
}

li.stepImage {
    margin-right: -4px;
    margin-top: -4px;
}

.stepImage img, .step img.large {
    padding: 0px;
}

/* resize large images */

.step img.large {
    width: 388px;
    height: 291px;
}

.stepText.rightText {
    width: 360px;
    margin-top: -290px;
    margin-left: 410px;
}

/* resize medium and standard images : */

.stepImages.standard img, .stepImages.medium img {
    width: 388px;
}

/* standard images only one pixel in between, border alignment/overlap looks bad in pdf */

.stepImages.standard .stepImage.first img {
    border-width: 1px 0px 1px 1px;
}

.stepImages.standard .stepImage.last img {
    border-width: 0px 1px 1px 1px;
}

/* medium images only one pixel in between, border alignment/overlap looks bad in pdf */

.stepImages.medium .stepImage.first img {
    border-width: 1px 0px 1px 1px;
}

.stepImages.medium .stepImage.last img {
    border-width: 1px 1px 1px 1px;
}

/* OTHER STUFF 
================= */

.logo {
    margin-left: 0px;
}

.logo img {
    margin-top: 15px;
}

.title .summary {
    margin: 8px 30px 16px 30px;
}

.introText {
    margin: 40px 30px 0 30px;
}

p {
    font-size: 12pt;
}

.stepImages .noImage {
    display: none;
}

.author {
    display: none;
}

h3.stepTitle {
    background: #f5f5f5;
}

.introText {
    page-break-inside: avoid;
    page-break-after: avoid;
}
[/code]

Status:

open
TRUSTe