Quote:
Originally Posted by FDPuthuff
If I am dealing with some front matter and I wish to 'bottom-justify' a few lines of text, is there html, which will do that, or do I add blank lines until I think I may possibly, maybe be at the bottom of the page?
.
.
.
.
Like this stuff here
Assume it's at the bottom of a page
.
And this Here 
|
It's possible to do what you want. You need to employ a table with three rows, one for the header, one for the body and one for the footer. Of course, only can be used for one page (i.e. a title page).
The following css properties works perfectly under ADE:
Code:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
div.container {
height: 95%;
width: 100%;
}
.full {
height: 100%;
width: 100%;
}
.header {
height: 10%;
vertical-align: bottom;
font-size: 14pt;
background: khaki; /* suppress this */
}
.bdy {
height: 80%;
vertical-align: middle;
font-size: 22pt;
font-weight: bold;
background: lightblue; /* suppress this */
}
.footer {
height: 10%;
vertical-align: bottom;
font-size: 12pt;
background: lightgreen; /* suppress this */
}
.center {
text-align: center;
text-indent: 0;
margin: 0;
}
and the following html text:
Code:
<body>
<div class="container">
<table class="full" cellpadding="0" cellspacing="0">
<tbody class="full">
<tr>
<td class="header">
<p class="center">THIS IS THE HEADER</p>
</td>
</tr>
<tr>
<td class="bdy">
<p class="center">THIS CAN BE<br/><big><big>A TITLE</big></big></p>
</td>
</tr>
<tr>
<td class="footer">
<p class="center">THIS IS THE FOOTER</p>
</td>
</tr>
</tbody>
</table>
</div>
</body>
You can see how the code looks in ADE with different font sizes:
I used three colors as background so you can see the layout but you have to erase that property, so the page will look clean. Also take into account that I used "pt" as measurement of font-size. Of that way the layout won't be broken when the user change the font size (all that in ADE). You can open the epub I attach to see how it works in ADE.
Regards
Rubén