difficult CSS layout for invoice... help!

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
kirilisa
Forum Commoner
Posts: 28
Joined: Fri Dec 05, 2003 4:41 pm

difficult CSS layout for invoice... help!

Post by kirilisa »

I have an invoice that I have generated from PHP. The person who prints invoices needs to be able to have them printed so that they will line up all properly when folded within a windowed envelope. Obviously, printing from web browser just won't cut it -- I have a tabular layout because I've always had issues with div/css sites and compatibility.

For a while I considered trying to generate a PDF of the invoice but it seemed like it would be a horrendous effort given how complex the invoice is. So now I'm trying to make some sort of *compatible* div layout that can deal wth it but I don't even really know how to begin.

An example of the invoice in it's normal tabular format (how it's viewed online) is at http://kirilisa.com/invoice.php.htm -- obviously, this invoice looks horrid as it has no styles attached, but you get the layout idea. I was thinking of trying to split it up so that there was a small top left box for "please process journal Xfer", a small box below that with the finance person's address (the thing that must be in the damned envelope window), and a box to the right containing the customer address and info which spans the first two boxes, and then a big box underneath that all containing the actual line items and prices, and maybe a last box at the bottom with the footer info.

But I don't know how to make that work: even when I try floating things left and right they don't line up properly, and I'm afraid that the float CSS thing is not compatible in different browsers.

I'm looking for something that people can use in IE 5+, Firefox, *maybe* netscape 7 (I dont' care much about netscape as I know how much it sucks) for both PC and Mac as I am in an academic environemnt. Can any of you super CSS gurus give me a hand?

Thanks a lot,

Elise
User avatar
artexercise
Forum Commoner
Posts: 33
Joined: Thu Nov 20, 2003 9:38 am
Location: Raleigh, NC

Post by artexercise »

Code: Select all

<html>
	<head>
	<style>
		BODY {display:block; 
			width:6.5in; 
			height:8in; 
			margin:.5in;
			border: 2px solid #000;
			padding:.05in;
			}
		#greeting {display:block;
			}
		#insincere {display:block;
			}
		#urnamheer {display:block;
			font-family: script;
			margin-left: 1in;
			}
		#address {display:block;
			border:1px dashed #012;
			width: 2in;
			padding:.05in;
			position:relative;
			top:10px;
			left:4in;
			}
		@media print{
			BODY {border: 1px dotted #777;}
		}
	</style>
	</head>
	<body>
		<span id=&quote;address&quote;>
			4Legged Grouse<br>
			1234 Dog way<br>
			Mongrel City, DOG 98765
			</span>
		<span id=&quote;greeting&quote;>Deer Curs or Madhens,</span>
		<br>
		<div id=&quote;bodytext&quote;>Have not I fur and you feathers or I feathers and you fur?</div>
		<br>
		<span id=&quote;insincere&quote;>Sincerely,</span>
		<span id=&quote;urnamheer&quote;>Flying Poodle</span>
	</body>
</html>
Try Relative Positioning, or Absolute Positioning.
If you're whole page is a series of nested DIV tags you could probably get away with some absolute positioning within defined blocks but if you plan on doing something like the above, relative positioning will be your friend.

And if you need the screen to look one way and the printed material to look another use the @media block to change where things are and how they look.

JOE--
kirilisa
Forum Commoner
Posts: 28
Joined: Fri Dec 05, 2003 4:41 pm

Post by kirilisa »

My problem is that I need several of the boxes (like the span box you classes "address") stacked on top of an next to each other as such (as I said http://www.kirilisa.com/invoice.php.htm shows you what I have in mind)...

Code: Select all

_________________
|        |        |
|  box 1 | box 3  |
|________| spans  |
|        | boxes  |
|  box 2 | 1 & 2  |
|________|________|
|                 |
|  box 4 is full  |
|  page width and | 
|  goes on and on |
|_________________|
and box 2 must be in a position such that, on a printed page, it is located 22mm from the left, 65mm from the top, and be 114mm wide and 27mm high.

Thanks,

Elise
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

you can create a pfd file.. this way you can control exactly what the page will look like.
kirilisa
Forum Commoner
Posts: 28
Joined: Fri Dec 05, 2003 4:41 pm

Post by kirilisa »

As I mentioned in my post... I initially thought of that... but given that complexity of the invoice, it seemed a massive task, so I was hoping I could come up with a workable solution with divs...
User avatar
artexercise
Forum Commoner
Posts: 33
Joined: Thu Nov 20, 2003 9:38 am
Location: Raleigh, NC

Post by artexercise »

Start by getting rid of your floats and changing all of your items to position:absolute; or position:relative. Below each items position you'll need a top and left which you probably already have. CSS accepts top:22mm; as a valid measurement.

And depending on the printer that this is coming off of you mind need a little adjustments here and there. Going away from the float however will make your invoice page more stable.

You'll probably want to divide your HTML up into <DIV> tags like in my example and inside those DIV tags put your individual code. If you are familiar with XML/XSL/XSLT then you'd be a thousand miles ahead of the competition to write your whole thing in XML.

JOE--
User avatar
artexercise
Forum Commoner
Posts: 33
Joined: Thu Nov 20, 2003 9:38 am
Location: Raleigh, NC

Post by artexercise »

Code: Select all

<html>
	<head>
	<style>
		BODY {display:block;
			position:relative;
			top:0mm; left 0mm;
			}
		#box1, #box2, #box3, #box4 { border:1px dashed #000;}
		#box1 { position:absolute; 
			top:5mm;
			left:15mm;
			height: 22mm;
			width:  34mm;
			}
		/* top is determined by box1 height + box1 top position + 5 */
		#box2 { position:absolute; 
			top:32mm;
			left:15mm;
			height: 22mm;
			width:  34mm;
			}
		/* left is determined by box1 width + box1 left position + 5 */
		#box3 { position:absolute; 
			top:5mm;
			left:54mm;
			height: 49mm;
			width:  34mm;
			}
		/* top is determined by box1 height + box1 top position + box2 height + 5 + 5 */
		#box4 { position:absolute; 
			top:59mm;
			left:15mm;
			height: 44mm;
			width:  73mm;
			}
	</style>
	</head>

	<body>
		<div id=&quote;box1&quote;> 1 </div>
		<div id=&quote;box2&quote;> 2 </div>
		<div id=&quote;box3&quote;> 3 </div>
		<div id=&quote;box4&quote;> 4 </div>
	</body>
</html>
plug in your own numbers for position and size
put the appropriate tables and values into the divs.
add more divs as necessary.

JOE--
kirilisa
Forum Commoner
Posts: 28
Joined: Fri Dec 05, 2003 4:41 pm

Post by kirilisa »

Cool, that helps!

Thanks.
kirilisa
Forum Commoner
Posts: 28
Joined: Fri Dec 05, 2003 4:41 pm

Post by kirilisa »

Actually, now I have one more problem... printing multiple pages!

How do I make it so that if there is a lot of stuff in box4, it will all print instead of just cutting off after page 1?

Thanks.
User avatar
artexercise
Forum Commoner
Posts: 33
Joined: Thu Nov 20, 2003 9:38 am
Location: Raleigh, NC

Post by artexercise »

Checking the Print Preview of the example page you've given, printing multiple pages doesn't seem to be an problem. However, if what you are asking is more along the lines of not separating information or on starting the printing of the contents in box 4 on a separate page, then I would suggest playing around with the information on the CSS page:

http://www.w3.org/TR/CSS21/page.html

And you'll probably be able to find some examples if you google search the items 'page-break-before', 'page-break-after', and 'page-break-inside'.

I am going to guess that you will be using lots of scrap paper to test this invoice out before pushing it to production.

JOE--
kirilisa
Forum Commoner
Posts: 28
Joined: Fri Dec 05, 2003 4:41 pm

Post by kirilisa »

Well, the example I had before was just tabular. I have now changed it (see http://kirilisa.com/invoice.php.htm) -- I put all my invoicing stuff in the div set that you gave me (box 1-4) and now if you do a print preview, you see how it runs off the page and will only ever print one page.

Thanks!
User avatar
artexercise
Forum Commoner
Posts: 33
Joined: Thu Nov 20, 2003 9:38 am
Location: Raleigh, NC

Post by artexercise »

It looks very good. And I have to apologize,I was reading the CSS page on paged media and it seems Absolute position is not a perfected art when it comes to printed media. But since it works so well within the boundries of the page, And your boxes 1, 2, and 3 are probably in just the place they need to be...

First, Change the position element of box 4 to relative and the top element to 0mm. This will allow the element to be paged appropriately.

Secondly add in <div id="box5"> &nbsp; </div>. I put it right above div box 1 in my local example.

Finally, to the style statement add:

Code: Select all

#box5 { position:relative; 
		top:0mm;
		height:70mm;
		}
What this does is place a big empty block that the printer media DOES read correctly and places it directly under the absolutely placed boxes so that they can be positioned correctly and the long undetermined height of box 4 starts in the correct place.

JOE--
kirilisa
Forum Commoner
Posts: 28
Joined: Fri Dec 05, 2003 4:41 pm

Post by kirilisa »

Hooray! It works! At least, it works on PC IE 6 and PC Mozilla Firefox. Now I'm off to find someone with a Mac. Thanks, you're the best!!
Post Reply