Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 06-15-2011, 05:38 PM   #1
graycyn
Guru
graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.
 
Posts: 831
Karma: 1595268
Join Date: Aug 2010
Location: NE Oregon
Device: Sony T1, Samsung Galaxy Note, Kobo Aura HD, Nook HD+, Nexus 7 (2013)
CSS help?

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!
Attached Thumbnails
Click image for larger version

Name:	10and10_bible_quote_example.jpg
Views:	64
Size:	46.1 KB
ID:	72830   Click image for larger version

Name:	10and10_biblequote_in_ADE.png
Views:	63
Size:	22.2 KB
ID:	72831  
graycyn is offline   Reply With Quote
Old 06-16-2011, 01:17 AM   #2
eping
ePub Maker
eping began at the beginning.
 
eping's Avatar
 
Posts: 120
Karma: 16
Join Date: Dec 2009
Location: Mordor
Device: iPad,Kindle 3, Nook 2
Write
margin-left: 114px;
instead of
position:relative; left: 114px;
(the last line in div.quote-underline section)
eping is offline   Reply With Quote
Old 06-16-2011, 04:56 AM   #3
graycyn
Guru
graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.
 
Posts: 831
Karma: 1595268
Join Date: Aug 2010
Location: NE Oregon
Device: Sony T1, Samsung Galaxy Note, Kobo Aura HD, Nook HD+, Nexus 7 (2013)
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!

Last edited by graycyn; 06-16-2011 at 05:19 AM. Reason: Added link to the Copyright Renewal Database
graycyn is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Override ePub CSS with userStyle.css? barium Sony Reader Dev Corner 11 07-16-2011 03:25 PM
epub CSS versus "Regular" CSS konrad ePub 4 02-18-2011 09:29 AM
css pseudo elements and adjacent combinators in extra css? ldolse Calibre 2 12-21-2010 05:09 PM
help with css bobcdy ePub 2 02-13-2010 11:59 AM
Help with CSS, anyone? rogue_ronin Workshop 36 08-14-2009 09:28 PM


All times are GMT -4. The time now is 10:17 PM.


MobileRead.com is a privately owned, operated and funded community.