CSS help?

[graycyn]

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:

<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:

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!

[eping]

Write
margin-left: 114px;
instead of
position:relative; left: 114px;
(the last line in div.quote-underline section)

[graycyn]

That did it, thanks! I simply hadn't realized I *could* use both a margin-left: AND a margin at the same time.

This whole thing is so new to me... only just the other day I realized why so many of my books have a highlighted chapter heading, doh, link back to table of contents page of course, but until I got a touchscreen reader, it just didn't occur to me, as I previously used the Nook's "go to" function.

Anyway, now my book is ready to go on the reader for a final checkout. Thanks so much! It's one of my dad's childhood books that I also loved when I was a kid and one that probably will not be available commercially as ebook in the foreseeable future as there's likely no market for it. Still a blast from the past to read though and I'd rather do it on the reader, since the books were "much loved" when I and my siblings were young.

Sadly, the copyright was renewed in 1953 according to the Copyright Renewal Database, so I can't share my ebook on the forum, sigh!