View Single Post
Old 09-04-2011, 01:56 PM   #151
Keroberos
Zealot
Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.
 
Keroberos's Avatar
 
Posts: 127
Karma: 194002
Join Date: Aug 2009
Device: Kobo Mini (4GB), Nook Classic wi-fi, iPod Touch (Bluefire Reader)
Multi Part Chapter Headers Using HTML Tables

I was looking for a way to have multiple items in a single line header (book# section# chapter#) spread out over the full width of the page and figured out a way to do it using a html table.

It works well in everythin I could test it in (nook classic, Bluefire Reader on my iPod Touch, Calibre, the Firefox ePub Reader, ADE 1.7.2 and 1.8 preview, and Sony Reader Library). And it converts decently to mobi using Kindlegen.

Here's the html code.
Code:
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td class="leftgrey">BOOK #</td>

      <td class="centergrey">Section #</td>

      <td class="right">Chapter #</td>
    </tr>
  </table>
  <hr />
And here's the css.
Code:
 table  { 
margin-top : 2em; 
margin-bottom : 0;
 }
 td  { 
font-family : sans-serif; 
font-size : 1.5em; 
width : 33%; 
 } 
 .left  { 
text-align : left; 
 } 
 .leftgrey  {         /* --- Use for greying out unchanging items --- */
text-align : left; 
color : #cccccc; 
 } 
 .center  { 
text-align : center; 
 } 
 .centergrey  {      /* --- Use for greying out unchanging items --- */ 
text-align : center; 
color : #cccccc; 
 } 
 .right  { 
text-align : right; 
 } 
 hr  { 
margin-top : 0; 
border : 0; 
background-color : black; 
height : 3px; 
 }
Attached Thumbnails
Click image for larger version

Name:	HTML Table Chapter Headers.jpg
Views:	273
Size:	63.4 KB
ID:	76087  
Keroberos is offline   Reply With Quote