Using CSS to Create a Bank Statement

N

nightstar

Hello,

We are modernizing how our statements are printed. I have a layout in
mind and have been trying to get it to work with no luck. I want to
use <div> tags, all css controlled, for multiple sections of our
statement. Here is what I want/have so far. Any input appreciated.


this section defines the whole statement, absolutely positioned
<div id="statement">
This section identifies the header section, it can be specific height
because the "mid" div tag contains a graphic and no text will hang
below the graphic in this section.
<div id="header">
These next three are absolutely positioned taking up x% of the top row.
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
</div> end header

<div id="midsection">
The stuff for the middle section should go here, contains customer
info, and all shold be under the header. This section can expand on
the Y axis depending on who the customer is. This should also contain
two divs creating 4 equal columns instead of using a table.
</div> end midsection

<div id="bottomsection">
Contains the money issues of the statement, and expands on the Y axis
depending on how many transactions are made.
</div> end bottom section

</div> end statement

any input would be fine or some css that will acomplish this. I am new
to CSS and positioning.

Thanks
 
M

mbstevens

Hello,

We are modernizing how our statements are printed. I have a layout in
mind and have been trying to get it to work with no luck. I want to
use <div> tags, all css controlled, for multiple sections of our
statement. Here is what I want/have so far. Any input appreciated.


this section defines the whole statement, absolutely positioned
<div id="statement">
This section identifies the header section, it can be specific height
because the "mid" div tag contains a graphic and no text will hang
below the graphic in this section.
<div id="header">
These next three are absolutely positioned taking up x% of the top row.
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
</div> end header

<div id="midsection">
The stuff for the middle section should go here, contains customer
info, and all shold be under the header. This section can expand on
the Y axis depending on who the customer is. This should also contain
two divs creating 4 equal columns instead of using a table.
Click to expand...

No, no. See first comment below.
</div> end midsection

<div id="bottomsection">
Contains the money issues of the statement, and expands on the Y axis
depending on how many transactions are made.
</div> end bottom section

</div> end statement

any input would be fine or some css that will acomplish this. I am new
to CSS and positioning.

Thanks
Click to expand...

Warnings often seen here against table markup apply only to non-tabular
data! The _main_ part of a bank statement is an A-1, bonafide, genuine,
nonparel example of tabular data.

So, after generating the customer name and such, you would change to
table markup. Generate the page with your server side language which is
accessing your database. Don't bother putting the table in it's own
div. It is a CSS positionable thing in itself.

I suggest sucking _all_ needed info for a statement from the database
into some variables. Then the program can decide about how many columns
to print in any particular row, how many rows to print, etc. If you try
to read info a bit at a time from the database, you're likely to get
bitten. I'd go with Perl for this task, but that's just me.
 
N

nightstar

Sorry this does not help.

The old version of our statement had numerous tables and some had
tables within tables. I need to get it down to minimal 2 tables
instead of 9. This is why i want the general layout I made.
 
N

nightstar

Here is a watered down version of the code, as i am just trying to get
the proper formatting:

PHP (HTML) File:

<?php include('frontend.php'); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
body, table { font: 10pt "Times New Roman",serif; }

tr.feetotal td
{
border-top: 1px solid black;
font-weight: bold;
}

..ralign { text-align: right; }
</style>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<link href="statements.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="statement">
<div id="header"><?php dispheader(); ?></div> This displays all three
sections correctly
<div id="statementtitle"><?php statementtype(); ?></div> This displays
correctly
<div id="outputsection">
<div id="midsection">

<div id="col1"> Col1<br>
Col1<br>
Col1<br>
Col1<br>
Col1 </div>
<div id="col2"> Col2<br>
Col2<br>
Col2<br>
Col2 </div>
</div>

<div id="bottomsection">BOTTOM SECTION</div>
</div>
</div>

</body>
</html>

CSS File:

#statement {
position:absolute;
left:0px;
width:668px;
}

#header {
left:0px;
height:113px;
width:100%;
}

#topleft {
position:absolute;
text-align:left;
left:0px;
width:33%;
}

#topcenter {
position:absolute;
left:33%;
width:34%;
}

#topright {
position:absolute;
text-align:right;
left:67%;
width:33%;
}

#outputsection {
position:absolute;
left:0px;
width:100%;
}

#statementtitle {
position:relative;
padding:5px;
text-decoration:underline;
font:bold 1.2em serif;
text-align:center;
width:100%;
}

#midsection {
position:relative;
width:100%;
}

#col1 {
position:absolute;
left:0;
width:50%;
}

#col2 {
position:absolute;
left:50%;
width:50%;
}

#bottomsection {
width:100%;
}


In the HTML when I display bottom section it does not show up at the
very bottom. I need help organizing this to make it display correctly
based upon my first message in the thread. Most likely the statement
needs to look like this

Header (fixed height based on height of graphic, but would be nice to
have a variable height)

Mid Section (variable height)

Bottom Section (variable height)

I possibly may be putting a separator bar between the sections in due
time, depending on management.

Thanks
 
M

mbstevens

Here is a watered down version of the code, as i am just trying to get
the proper formatting:

PHP (HTML) File:

<?php include('frontend.php'); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
body, table { font: 10pt "Times New Roman",serif; }

tr.feetotal td
{
border-top: 1px solid black;
font-weight: bold;
}

.ralign { text-align: right; }
</style>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<link href="statements.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="statement">
<div id="header"><?php dispheader(); ?></div> This displays all three
sections correctly
<div id="statementtitle"><?php statementtype(); ?></div> This displays
correctly
<div id="outputsection">
<div id="midsection">

<div id="col1"> Col1<br>
Col1<br>
Col1<br>
Col1<br>
Col1 </div>
<div id="col2"> Col2<br>
Col2<br>
Col2<br>
Col2 </div>
</div>

<div id="bottomsection">BOTTOM SECTION</div>
</div>
</div>

</body>
</html>

CSS File:

#statement {
position:absolute;
left:0px;
width:668px;
}

#header {
left:0px;
height:113px;
width:100%;
}

#topleft {
position:absolute;
text-align:left;
left:0px;
width:33%;
}

#topcenter {
position:absolute;
left:33%;
width:34%;
}

#topright {
position:absolute;
text-align:right;
left:67%;
width:33%;
}

#outputsection {
position:absolute;
left:0px;
width:100%;
}

#statementtitle {
position:relative;
padding:5px;
text-decoration:underline;
font:bold 1.2em serif;
text-align:center;
width:100%;
}

#midsection {
position:relative;
width:100%;
}

#col1 {
position:absolute;
left:0;
width:50%;
}

#col2 {
position:absolute;
left:50%;
width:50%;
}

#bottomsection {
width:100%;
}


In the HTML when I display bottom section it does not show up at the
very bottom. I need help organizing this to make it display correctly
based upon my first message in the thread. Most likely the statement
needs to look like this

Header (fixed height based on height of graphic, but would be nice to
have a variable height)

Mid Section (variable height)

Bottom Section (variable height)

I possibly may be putting a separator bar between the sections in due
time, depending on management.

Thanks
Click to expand...
Here's an article on printing:
http://www.alistapart.com/articles/printyourway/
....and you could try modifying a good template,
http://www.bluerobot.com/web/layouts/
http://www.realworldstyle.com/ (my favorite)
....and just push the code around a bit at a time,
testing often, until it does what you want.
If you need a good reference while doing it, try:
http://w3.org
And check your markup for validity every couple of
changes you make at:
http://validator.w3.org
 
N

nightstar

If you look at the code I included I can not get the midsection and
bottomsection to work properly. the bottom section ends up lineing
where midsection starts. If you can help me correct this I would
appreciate it. I have looked over numerous sites with no prevail.
Also for the header I have 3 absolutely placed <divs> each taking up
33% of the width to make three equal columns. This made things much
nicer.

Any help or corrections appreciated.

Thanks
 
M

mbstevens

If you look at the code I included I can not get the midsection and
bottomsection to work properly. the bottom section ends up lineing
where midsection starts. If you can help me correct this I would
appreciate it. I have looked over numerous sites with no prevail.
Also for the header I have 3 absolutely placed <divs> each taking up
33% of the width to make three equal columns. This made things much
nicer.
Click to expand...

Analyze this:
http://realworldstyle.com/nn4_3col_header.html

There are several other templates on that site that have both a header
and a footer -- with the footer in all of those templates positioned
correctly at the bottom of the page.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Add recipes using JavaScript in table 20
How can I hide a div using an event listener on multiple checkboxes? 6
Survey details won't go through using php, ajax, Mysql 0
I Need Help with making a function that draws in a canvas using location data. 1
Only one table shows up with the information 2
Help with code 0
Help with Visual Lightbox: Scripts 2
Check forms With JavaScript 1

Members online

No members online now.
Total: 16 (members: 0, guests: 16)
Robots: 352

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,014
Latest member
BiancaFix3

Latest Threads

Top