MobileRead Forums - View Single Post - Graphical layout vs. semantically "correct" XHTML code

Iznogood · 04-03-2011, 02:36 PM

That was what I was afraid of. I have also tried another approach:

1) CSS
html,body { height:95%;margin-top:0em;margin-bottom:0em;overflow:visible; }
.titlecell1 { padding-top:1em;padding-bottom:1em;min-height:60%; }

2) HTML
<div class="titlecell1" style="background-color:red;">

<h1 class="title1">TITLE</h1>

<h2 class="title2">AUTHOR</h2>

</div>
<h3 class="title3">PUBLISHER</h3>

And this works - almost. I get the title and the author inside the top div. This div has a min-height of 60%, so that it occupies at least 60% of the screen while allowing it to be resized when the font size increases and the content requires more than 60% of the screen size. For small font sizes the last <h3> will sit nicely and quietly below the 60% top div.

Thus it is possible to have the publisher at the bottom 40% of the screen. It will only be moved when the contents of the top div expands and requires more than the top 60% of the page.

The problem is that when the font size is so large (or the screen is so small) that all the contents cannot fit into one page, a page-break is inevitable. When that happens, the content of the last page is not visible. ADE shows TITLE and AUTHOR on one page, but on the next page I find the table of contents rather than the publisher. My guess is that the publisher disappears because I have set body to 100%, i.e. that the publisher is "below" the reading screen instead of placed on the next screen. Could there be a work-around for this?

04-03-2011, 02:36 PM	#8
Iznogood Guru Posts: 932 Karma: 15752887 Join Date: Mar 2011 Location: Norway Device: Ipad, kindle paperwhite	That was what I was afraid of. I have also tried another approach: 1) CSS html,body { height:95%;margin-top:0em;margin-bottom:0em;overflow:visible; } .titlecell1 { padding-top:1em;padding-bottom:1em;min-height:60%; } 2) HTML <div class="titlecell1" style="background-color:red;"> <h1 class="title1">TITLE</h1> <h2 class="title2">AUTHOR</h2> </div> <h3 class="title3">PUBLISHER</h3> And this works - almost. I get the title and the author inside the top div. This div has a min-height of 60%, so that it occupies at least 60% of the screen while allowing it to be resized when the font size increases and the content requires more than 60% of the screen size. For small font sizes the last <h3> will sit nicely and quietly below the 60% top div. Thus it is possible to have the publisher at the bottom 40% of the screen. It will only be moved when the contents of the top div expands and requires more than the top 60% of the page. The problem is that when the font size is so large (or the screen is so small) that all the contents cannot fit into one page, a page-break is inevitable. When that happens, the content of the last page is not visible. ADE shows TITLE and AUTHOR on one page, but on the next page I find the table of contents rather than the publisher. My guess is that the publisher disappears because I have set body to 100%, i.e. that the publisher is "below" the reading screen instead of placed on the next screen. Could there be a work-around for this?