Forum Moderators: coopster
[php.net...]
Here's the relevant portion of my document for positioning the Avery labels.
Let me explain:
I use a standard image for all my product labels. This image is 200x400px.
Then I've created Name Labels. Those are positioned on top of my product labels, resulting in a completed product label for any product
(assuming I've created the Name Label).
Also, when using this layout, we print from the Print Preview window, with the following settings:
Margins
Left: .2
Right: 0
Top and Bottom default of .5 are used.
Page Scale is set to 80%.
Orientation is Portrait
Now, I got real lazy and only defined a single page, instead of opting to print more than 10 labels at a time.
If you need more than 10 at a time, figure it out :D
The first group of definitions is the background image, defined as .imgA1 thru .imgA10.
These will probably be the most relevant, as they define the actual position for my 200x400px images.
The z-index can be eliminated if you have no need to overlay the image with text.
<style type="text/css" media="all">
@page {margin: 2cm;}
/* ------- PRODUCT LABELS ------ */
.imgA1 { position:absolute; top: 7px; left: 0px; z-index: 1; }
.imgA2 { position:absolute; top: 7px; left: 500px; z-index: 1; }
.imgA3 { position:absolute; top: 250px; left: 0px; z-index: 1; }
.imgA4 { position:absolute; top: 250px; left: 500px; z-index: 1; }
.imgA5 { position:absolute; top: 495px; left: 0px; z-index: 1; }
.imgA6 { position:absolute; top: 495px; left: 500px; z-index: 1; }
.imgA7 { position:absolute; top: 730px; left: 0px; z-index: 1; }
.imgA8 { position:absolute; top: 730px; left: 500px; z-index: 1; }
.imgA9 { position:absolute; top: 970px; left: 0px; z-index: 1; }
.imgA10 { position:absolute; top: 970px; left: 500px; z-index: 1; }
/* -------- NAME LABELS -------- */
.imgB1 { position:absolute; top: 17px; left: 130px; z-index: 3; }
.imgB2 { position:absolute; top: 17px; left: 635px; z-index: 3; }
.imgB3 { position:absolute; top: 260px; left: 130px; z-index: 3; }
.imgB4 { position:absolute; top: 260px; left: 635px; z-index: 3; }
.imgB5 { position:absolute; top: 510px; left: 130px; z-index: 3; }
.imgB6 { position:absolute; top: 510px; left: 635px; z-index: 3; }
.imgB7 { position:absolute; top: 742px; left: 130px; z-index: 3; }
.imgB8 { position:absolute; top: 742px; left: 635px; z-index: 3; }
.imgB9 { position:absolute; top: 980px; left: 130px; z-index: 3; }
.imgB10 { position:absolute; top: 980px; left: 635px; z-index: 3; }
</style>
I've been contemplating the same thing as jezzer300; that is, printing my shipping labels too.
(Too many more important issues to work out first.) But thinking about it I can see where some following differences may be required.
For each label, a unique position will need to be defined for each line. The CSS might then look like:
(Form position 1)
.F1line1 { position:absolute; top: 7px; left: 0px;}
.F1line2 { position:absolute; top: 15px; left: 0px;}
.F1line3 { position:absolute; top: 23px; left: 0px;}
.F1line4 { position:absolute; top: 31px; left: 0px;}
(Form position 2)
.F2line1 { position:absolute; top: 7px; left: 500px;}
.F2line2 { position:absolute; top: 15px; left: 500px;}
.F2line3 { position:absolute; top: 23px; left: 500px;}
.F2line4 { position:absolute; top: 31px; left: 500px;}
For a full sheet of 10 labels the 4 address fields will be defined for each label position. And, I just pulled those Top positions out of thin air to show the progession of each line of text. Don't expect them to be accurate. The Left positions are still valid.
I hope this helps.