I'm converting an old childhood book to epub for personal use. Found the text online actually at OpenLibrary.org, so I didn't even have to scan it. So far, all is going well, and it's looking nice and it seems to be working in ADE. But there is one little "tricky bit", that's not the usual sort of book text that I am having trouble getting to look just right.
I'm not very good or knowledgeable with CSS, so it took forever today to get as far as I have on this "bit", so maybe someone can help, without laughing too much! It looks fine in Sigil, but it just doesn't translate the same when I load it in ADE.
I've attached an image from the original book of the look I'm trying for, followed by an image of how my current code *actually looks* in ADE. Usually, if something doesn't look right in ADE, it won't look right on my Nook (N1E) or my Sony 950 either. So I need it to work in ADE.
My HTML is:
Code:
<div class="wrapper">
<div class="quote-underline">
<p class="bible1">Chapter X</p>
</div>
<div class="quote-underline2">
<p class="bible2">10 And the beginning of his kingdom was Babel, and Erech, and Accad, and Calneh, in the land of Shinar.</p>
</div>
</div>
My CSS is:
Code:
div.wrapper {display: block; margin-left: 114px; }
/* Chapter 11 Ten and Ten Quote Underline */
div.quote-underline {display: block;
text-align: center;
border-left: #808080 2px solid;
border-bottom: #000000 2px solid;
border-right: #808080 2px solid;
margin: 1em 0 0 0;
padding: 0px 10px 3px 10px;
width: 114px;
position:relative; left: 114px;
}
/* Chapter 11 Ten and Ten Quote Underline2 */
div.quote-underline2 {display: block;
text-align: left;
border-left: #808080 2px solid;
border-bottom: #000000 2px solid;
border-right: #808080 2px solid;
margin: 1em 0 1em 0;
padding: 0px 10px 5px 10px;
width: 342px;
}
If anyone can tell me a better way to automatically horizontally center something with a <div> in ADE, I'm all ears to that as well!