Emulate paging in an HTML document.

[Rithish]

I want to emulate paging in an HTML document. something like,

-------------------------
| |
| <DIV> |
| |
| <TABLE></TABLE> |
| |
| <TABLE></TABLE> |
| |
| </DIV> |
| |
| <DIV PAGEBREAK> |
| |
| <DIV> |
| |
| <TABLE></TABLE> |
| |
| <TABLE></TABLE> |
| |
| </DIV> |
| |
| |
| |

The DIVs( <DIV STYLE="width:'100%';position:relative;"> ) are
positioned relative to the body, and the TABLEs ( <TABLE
STYLE="width:'80%';position:absolute;left:'0PX';to p:'0PX';"> ) are
positioned absolute to the DIVs.

Thus, when I print preview the document, I get two tables in each
page; however, in the display, the tables that are supposed to be in
the second page page overlap the ones that are in the first page. I
guess the reason is 'cos the DIVs' height will not consist of the sum
of the height of the child <TABLE> elements that are in it. ( I put a
border around the DIV and confirmed this. It takes only one
glyph/px/whatever.. )

Is it possible to acheive what I want to?? I dont know...

I would greatly appreciate any help.
Regards,
Rithish.

[John Bokma]

Rithish wrote:

Is it possible to acheive what I want to?? I dont know...

Isn't there a CSS thing to force page breaks?

--
John MexIT: http://johnbokma.com/mexit/
personal page: http://johnbokma.com/
Experienced Perl programmer available: http://castleamber.com/

[Neal]

On 11 May 2004 07:32:09 -0700, Rithish <ri*****@dacafe.com> wrote:

I want to emulate paging in an HTML document.
To me, this is sort of like emulating sore, tired legs and feet in an
automobile, but I'll play ball.
The DIVs( <DIV STYLE="width:'100%';position:relative;"> ) are
positioned relative to the body, and the TABLEs ( <TABLE
STYLE="width:'80%';position:absolute;left:'0PX';to p:'0PX';"> ) are
positioned absolute to the DIVs.

Thus, when I print preview the document, I get two tables in each
page; however, in the display, the tables that are supposed to be in
the second page page overlap the ones that are in the first page. I
guess the reason is 'cos the DIVs' height will not consist of the sum
of the height of the child <TABLE> elements that are in it. ( I put a
border around the DIV and confirmed this. It takes only one
glyph/px/whatever.. )

What your issue is, I'm not entirely sure. Have you read
http://www.w3.org/TR/CSS2/page.html#page-breaks ? If so, is your issue
that the page break is not working? I don't know much about this aspect of
CSS, perhaps there are support issues.

Is your div containing the tables as you desire, or not? I'm really not
clear on that.

Please create a live example and post a URL so what you're asking can be
more lucent.

[Alan J. Flavell]

On Tue, 11 May 2004, John Bokma wrote:

Isn't there a CSS thing to force
CSS never "forces" anything. It only makes proposals, which the
client agent can action or not as it sees fit. That's an important
principle, not just a form of words.
page breaks?

Not those either.

[Brian]

John Bokma wrote:

Isn't there a CSS thing to force page breaks?

[bearing in mind A.Flavell's comments about "force" and css]

AFAIK, css pagination support is extremely poor. I think only Opera has
made even an attempt to support it, and it has not succeeded. You might
learn more by Googling for Mozilla css @page and Opera css @page. (Don't
bother with MSIE!)

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[John Bokma]

Brian wrote:

John Bokma wrote:

Isn't there a CSS thing to force page breaks?

[bearing in mind A.Flavell's comments about "force" and css]

Indeed, should have written "suggest" or "kindly request" not force.

--
John MexIT: http://johnbokma.com/mexit/
personal page: http://johnbokma.com/
Experienced Perl programmer available: http://castleamber.com/

[Eric Bustad]

Brian wrote:

John Bokma wrote:

Isn't there a CSS thing to force page breaks?

[bearing in mind A.Flavell's comments about "force" and css]

AFAIK, css pagination support is extremely poor. I think only Opera has
made even an attempt to support it, and it has not succeeded. You might
learn more by Googling for Mozilla css @page and Opera css @page. (Don't
bother with MSIE!)

<div style="page-break-before: always;"> seems to work in Mozilla.

= Eric

[Alan J. Flavell]

On Tue, 11 May 2004, Alan J. Flavell wrote:

CSS never "forces" anything. It only makes proposals, which the
client agent can action or not as it sees fit. That's an important
principle, not just a form of words.

page breaks?

Not those either.

My apologies: I hadn't meant to be so brusque at the end. But as
others have already noted, browser support for this is still quite
poor, and I can't offer you anything more positive, I'm afraid.

[Rithish]

> What your issue is, I'm not entirely sure.

Pardon me for not stating my issue clearly... I am yet a novice.. :D
My issue is not breaking of pages... CSS style 'Page-break' works
fine. The issue is the display of these elements as contiguous.

Is your div containing the tables as you desire, or not? I'm really not
clear on that.

Please create a live example and post a URL so what you're asking can be
more lucent.

I am sorry that I will be unable to post a URL... However, I will try
to explain with an example...

I will take a scenario wherein I want to have two tables in two pages
of the document. The first table/s will be 48px from the top of the
page, and the second would be 96px from the top of the page. Hence, if
I do a print of the document, I will effectively get two pages, with
two tables each in them, like this,

Page 1
--------------------
| |
| <Table at 48px> |
| |
| |
| <Table at 96px> |
| |
--------------------

Page 2
--------------------
| |
| <Table at 48px> |
| |
| |
| <Table at 96px> |
| |
--------------------

However, when the html document is viewed(display), the tables overlap
each other.. I mean, the tables of the second page, write over the
tables in the first page. I know this is 'cos of the CSS absolute
positioning of elements.
I believed the DIV to bloat up to accomodate the TABLEs specified in
it. Hence, when the next DIV is relatively positioned to the previous,
four tables could be viewed, one below the other... This is my
requirement...

The code snippet for this is as below,

<DIV STYLE="width:'100%';position:relative;BORDER-TOP:'1PX SOLID
BLUE';BORDER-LEFT:'1PX SOLID BLUE';BORDER-RIGHT:'1PX SOLID
BLUE';BORDER-BOTTOM:'1PX SOLID BLUE';">

<TABLE HEIGHT="48PX" STYLE="width:'80%';BORDER-TOP:'1PX SOLID
BLACK';BORDER-LEFT:'1PX SOLID BLACK';BORDER-RIGHT:'1PX SOLID
BLACK';BORDER-BOTTOM:'1PX SOLID
BLACK';position:absolute;left:'0PX';top:'0PX';">
<TR>
<TD ALIGN=CENTER VALIGN=MIDDLE>Test1</TD>
</TR>
</TABLE>

<TABLE HEIGHT="48PX" STYLE="width:'60%';BORDER-TOP:'1PX SOLID
BLACK';BORDER-LEFT:'1PX SOLID BLACK';BORDER-RIGHT:'1PX SOLID
BLACK';BORDER-BOTTOM:'1PX SOLID
BLACK';position:absolute;left:'0PX';top:'96PX';">
<TR>
<TD ALIGN=CENTER VALIGN=MIDDLE>Test2</TD>
</TR>
</TABLE>

</DIV>
<DIV STYLE="PAGE-BREAK-AFTER:always;position:relative;"></DIV>
<DIV STYLE="width:'100%';position:relative; BORDER-TOP:1PX SOLID RED;
BORDER-LEFT:1PX SOLID RED; BORDER-RIGHT:1PX SOLID RED;
BORDER-BOTTOM:1PX SOLID RED;">

<TABLE HEIGHT="48PX" STYLE="width:'80%';BORDER-TOP:'1PX SOLID
BLACK';BORDER-LEFT:'1PX SOLID BLACK';BORDER-RIGHT:'1PX SOLID
BLACK';BORDER-BOTTOM:'1PX SOLID
BLACK';position:absolute;left:'0PX';top:'0PX';">
<TR>
<TD ALIGN=CENTER VALIGN=MIDDLE>Test3</TD>
</TR>
</TABLE>

<TABLE HEIGHT="48PX" STYLE="width:'60%';BORDER-TOP:'1PX SOLID
BLACK';BORDER-LEFT:'1PX SOLID BLACK';BORDER-RIGHT:'1PX SOLID
BLACK';BORDER-BOTTOM:'1PX SOLID
BLACK';position:absolute;left:'0PX';top:'96PX';">
<TR>
<TD ALIGN=CENTER VALIGN=MIDDLE>Test4</TD>
</TR>
</TABLE>

</DIV>

You will note that the tables are encompassed and absolutely
positioned inside and wrt a DIV. Thus each DIV would emulate a page...

This is the best my vocabulary can do... I hope I have stated my
point.. I greatly appreciate your help folks...

Regards,
Rithish.

[Wolfgang Wildeblood]

ri*****@dacafe.com (Rithish) wrote:

My issue is not breaking of pages... CSS style 'Page-break' works
fine. The issue is the display of these elements as contiguous. I will take a scenario wherein I want to have two tables in two pages
of the document. The first table/s will be 48px from the top of the
page, and the second would be 96px from the top of the page. Hence, if
I do a print of the document, I will effectively get two pages, with
two tables each in them, like this,

Page 1
--------------------
| |
| <Table at 48px> |
| |
| |
| <Table at 96px> |
| |
--------------------

Page 2
--------------------
| |
| <Table at 48px> |
| |
| |
| <Table at 96px> |
| |
--------------------

However, when the html document is viewed(display), the tables overlap
each other.. I mean, the tables of the second page, write over the
tables in the first page. I know this is 'cos of the CSS absolute
positioning of elements.
You're obviously trying to achieve something a bit trickier than this
though, or you wouldn't need positioning at all.

I believed the DIV to bloat up to accomodate the TABLEs specified in
it. Hence, when the next DIV is relatively positioned to the previous,
four tables could be viewed, one below the other... This is my
requirement.

To get what you're describing, just leave all the positioning out,
except the page-break between table 2 and table 3. So what are you
really after?

[Rithish]

wo****************@yahoo.com.au (Wolfgang Wildeblood) wrote in message news:<a9**************************@posting.google. com>...

You're obviously trying to achieve something a bit trickier than this
though, or you wouldn't need positioning at all.

You are right, Wolf... :D What I want to achieve is a bit more
trickier... However, I did not want to burden you all, with more of my
problems..

After some more browsing, I managed to hit upon an article which might
suit my purpose.. So I got to work on it, and lo !!! eureka !!!! ;D

The HTML document is structured as such.

<BODY>

<DIV> <!-- this denotes the beginning of the page -->

<DIV> <!-- this denotes the beginning of a table -->
<TABLE></TABLE>
</DIV> <!-- this denotes the end of the table -->

<DIV> <!-- this denotes the beginning of a table -->
<TABLE></TABLE>
</DIV> <!-- this denotes the end of the table -->

<!-- and as many more tables in a page -->

</DIV> <!-- this denotes the end of the page -->

<!-- and as many more pages in a document with a page break
inbetween -->

</BODY>

There are a few specific rules that I had noticed.
1. If a DIV contains elements inside it, which are relatively
positioned, then the DIV itself bloats up to accomodate these inner
elements.

2. If the inner elements of a DIV are absolutely positioned, then the
DIV does not expand to fill in the elements, but takes a width of 1
glyph.

3. If no positional attributes are specified for the inner elements of
a DIV, then the elements take their natural flow.

In order to simulate a paging display, I have structured the html as
such.
The table DIV is positioned relative to the page DIV, and the TABLE is
positioned absolute to the table DIV. ( refer diagram above )
The positioning of the table is obtained by specification of the STYLE
'margin-left' and 'margin-top' attributes of the table DIV.
Hence, rule 1 is satisfied, and the page DIV expands to accomodate its
inner table DIVs. The tables are positioned by specifying the
'margin-left' and 'margin-top' rather than the 'top' and 'left' style
attributes of the table DIV.
An example is as below.

<HTML>
<HEAD>
<TITLE></TITLE>
<BODY topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0 >
<DIV STYLE="height:'1038.5115px';width:'769.695px';BORD ER-TOP:'1PX
SOLID BLUE';BORDER-LEFT:'1PX SOLID BLUE';BORDER-RIGHT:'1PX SOLID
BLUE';BORDER-BOTTOM:'1PX SOLID BLUE';">

<DIV STYLE="Position:'relative';margin-left:'76.9695px';margin-top:'48px';">

<TABLE ALIGN="CENTER" HEIGHT="48px" WIDTH="615.756px" STYLE="
POSITION:'absolute'; BORDER-TOP:'1PX SOLID BLACK'; BORDER-LEFT:'1PX
SOLID BLACK'; BORDER-RIGHT:'1PX SOLID BLACK'; BORDER-BOTTOM:'1PX SOLID
BLACK';">
<TR>
<TD ALIGN=CENTER VALIGN=MIDDLE>Test</TD>
</TR>
</TABLE>

</DIV>

</DIV>
<DIV STYLE="PAGE-BREAK-AFTER:always" ></DIV>
<DIV STYLE="height:'1038.5115px';width:'769.695px';BORD ER-TOP:'1PX
SOLID BLUE';BORDER-LEFT:'1PX SOLID BLUE';BORDER-RIGHT:'1PX SOLID
BLUE';BORDER-BOTTOM:'1PX SOLID BLUE';">

<DIV STYLE="Position:'relative';margin-left:'76.9695px';margin-top:'48px';">

<TABLE ALIGN="CENTER" HEIGHT="48px" WIDTH="615.756px" STYLE="
POSITION:'absolute'; BORDER-TOP:'1PX SOLID BLACK'; BORDER-LEFT:'1PX
SOLID BLACK'; BORDER-RIGHT:'1PX SOLID BLACK'; BORDER-BOTTOM:'1PX SOLID
BLACK';">
<TR>
<TD ALIGN=CENTER VALIGN=MIDDLE>Test</TD>
</TR>
</TABLE>

</DIV>

</DIV>
</BODY>
</HTML>
A big thanks to all of you people out there, who have heeded my
request, or atleast gave it some thought.

Regards,
Rithish.