Create an HTML Invoice: Difference between revisions
no edit summary
No edit summary |
No edit summary |
||
| Line 27: | Line 27: | ||
Normally a span or div tag with some kind of positioning will position itself relative to the upper left corner of the browser. That would be ok if you only ever used that particular browser and only one page. The difficulties begin when you page down and back, or print - the positioning becomes unstable and you can't count on anything being shown in exactly the same place every time. | Normally a span or div tag with some kind of positioning will position itself relative to the upper left corner of the browser. That would be ok if you only ever used that particular browser and only one page. The difficulties begin when you page down and back, or print - the positioning becomes unstable and you can't count on anything being shown in exactly the same place every time. | ||
Notice the use of both relative and absolute positioning in the above span tags. Relative positioning means that the coordinates are relative to something else. So, the premise is that for each page we need to establish an anchor other than the browser window itself. The id="rel" span serves as the main anchor for the page, the id="abs" tag will always appear in relation to the outer span tag. | Notice the use of both relative and absolute positioning in the above span tags. Relative positioning means that the coordinates are relative to something else. So, the premise is that for each page we need to establish an anchor other than the browser window itself. The id="rel" span serves as the main anchor for the page, the id="abs" tag will always appear in relation to the outer span tag. The "id"s shown in the above example are not necessary and are there only for purposes of identification. | ||
In the above case, the coordinates of id=”rel” are relative to the form and the coordinates of id=”abs” are relative to “rel”. | In the above case, the coordinates of id=”rel” are relative to the form and the coordinates of id=”abs” are relative to “rel”. | ||
If you want to have multiple pages, simply force a pagebreak as shown in the pseudo code below. Printing of the invoice pages should track the browser layout exactly! | If you want to have multiple pages, simply force a pagebreak as shown in the pseudo code below. Printing of the invoice pages should track the browser layout exactly! And, be browser independent. If it doesn't - the browser shows one way and printing shows everything in a different position, then something is incorrect. | ||
<pre> | <pre> | ||
| Line 62: | Line 62: | ||
</table> | </table> | ||
</span> | </span> | ||
</pre> | </pre> | ||