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 02-26-2010, 04:27 PM   #1
KNotTed
Member
KNotTed is on a distinguished road
 
Posts: 19
Karma: 62
Join Date: Feb 2010
Device: PRS-505, PRS-600
Problem with the HR tag

I'm using the HR tag to create a divider between chapter sections (since the break won't always be in the middle of the page, and it would be nice to know that there is a break). However, I don't want the line to go across the whole page. For my HR tag I'm using the following CSS:
Code:
hr { 
  width: 20%; 
  border: 1px solid black; 
  background-color: black; 
  margin: 0 auto; 
}
This works fine when I preview the HTML on firefox and IE 8. However, when I open the epub in ADE and on my PRS-505 the HR is left-aligned. FWIW, I've also tried using text-align: center in the CSS for HR tags.

Does anyone have any experience/tips for correcting this?
KNotTed is offline   Reply With Quote
Old 02-26-2010, 09:15 PM   #2
charleski
Wizard
charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.
 
Posts: 1,188
Karma: 727236
Join Date: Sep 2009
Device: PRS-505
Here you go:
Code:
hr { 
  width: 20%; 
  border: 1px solid black; 
  background-color: black; 
  margin-left: 40%;
}
charleski is offline   Reply With Quote
 
Advertisement
Old 02-26-2010, 10:01 PM   #3
KNotTed
Member
KNotTed is on a distinguished road
 
Posts: 19
Karma: 62
Join Date: Feb 2010
Device: PRS-505, PRS-600
That's a good solution for the particular question. I suppose I should have been more (or less) specific. Supposing the width is not 20%, but 120pt. I'd still like to be able to center that, regardless of the display device.
KNotTed is offline   Reply With Quote
Old 02-26-2010, 10:15 PM   #4
charleski
Wizard
charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.
 
Posts: 1,188
Karma: 727236
Join Date: Sep 2009
Device: PRS-505
Using % will automatically adjust for display width. ADE's handling of hr tags is a bit buggy and doesn't respect the normal styling options. If you absolutely need a centred rule of a specific size your best option is to embed an image.
charleski is offline   Reply With Quote
Old 02-27-2010, 05:07 AM   #5
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,316
Karma: 4963983
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
In particular, it seems ADE does not support "auto" margins.
Jellby is offline   Reply With Quote
Old 03-03-2010, 12:06 PM   #6
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,559
Karma: 19637653
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
Quote:
Originally Posted by KNotTed View Post
I'm using the HR tag to create a divider between chapter sections (since the break won't always be in the middle of the page, and it would be nice to know that there is a break).
Why have an HR for a chapter separator? That's bad form. The proper form is to have each chapter start on a new page.
JSWolf is online now   Reply With Quote
Old 03-03-2010, 12:14 PM   #7
frabjous
Wizard
frabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
frabjous's Avatar
 
Posts: 1,213
Karma: 12890
Join Date: Feb 2009
Location: Amherst, Massachusetts, USA
Device: Sony PRS-505
Quote:
Originally Posted by JSWolf View Post
Why have an HR for a chapter separator? That's bad form. The proper form is to have each chapter start on a new page.
That may be true/appropriate for most books, but I don't believe that one style fits all.
frabjous is offline   Reply With Quote
Old 03-03-2010, 02:36 PM   #8
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,559
Karma: 19637653
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
Quote:
Originally Posted by frabjous View Post
That may be true/appropriate for most books, but I don't believe that one style fits all.
But, if you keep chapters together, you risk not being mobile ADE compatible.
JSWolf is online now   Reply With Quote
Old 03-03-2010, 03:56 PM   #9
KNotTed
Member
KNotTed is on a distinguished road
 
Posts: 19
Karma: 62
Join Date: Feb 2010
Device: PRS-505, PRS-600
It's not a chapter separator. It's for separating sections in chapters, like * * * in some books.
KNotTed is offline   Reply With Quote
Old 03-03-2010, 07:32 PM   #10
Amalthia
Guru
Amalthia once ate a cherry pie in a record 7 seconds.Amalthia once ate a cherry pie in a record 7 seconds.Amalthia once ate a cherry pie in a record 7 seconds.Amalthia once ate a cherry pie in a record 7 seconds.Amalthia once ate a cherry pie in a record 7 seconds.Amalthia once ate a cherry pie in a record 7 seconds.Amalthia once ate a cherry pie in a record 7 seconds.Amalthia once ate a cherry pie in a record 7 seconds.Amalthia once ate a cherry pie in a record 7 seconds.Amalthia once ate a cherry pie in a record 7 seconds.Amalthia once ate a cherry pie in a record 7 seconds.
 
Amalthia's Avatar
 
Posts: 951
Karma: 1960
Join Date: Jan 2007
Location: Anchorage, AK
Device: Sony Reader PRS-505, PRS-650
Quote:
Originally Posted by KNotTed View Post
It's not a chapter separator. It's for separating sections in chapters, like * * * in some books.
I'm tempted to use HR instead of *** because it looks like with the HR tag you can maybe add more space around it whereas the *** you have to add another blank paragraph before and after to create more space. However, I also originally had problems with the line going all the way across so I stuck with the *** because it worked at the time.
Amalthia is offline   Reply With Quote
Old 03-03-2010, 08:20 PM   #11
KNotTed
Member
KNotTed is on a distinguished road
 
Posts: 19
Karma: 62
Join Date: Feb 2010
Device: PRS-505, PRS-600
Well, *** can have extra space above and below by just defining a class that specifies top and bottom margin. No need to add extra paragraph tags.
KNotTed is offline   Reply With Quote
Old 03-03-2010, 08:29 PM   #12
kovidgoyal
creator of calibre
kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.
 
kovidgoyal's Avatar
 
Posts: 26,441
Karma: 5383257
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
Try this

Code:
<div style="width:100%;text-align:center">
<span style="width:75%; border-bottom:solid black 2px">&nbsp;</span>
</div>
Though this is rather html specific and is unlikely to translate well when converted.
kovidgoyal is online now   Reply With Quote
Old 03-03-2010, 08:34 PM   #13
Amalthia
Guru
Amalthia once ate a cherry pie in a record 7 seconds.Amalthia once ate a cherry pie in a record 7 seconds.Amalthia once ate a cherry pie in a record 7 seconds.Amalthia once ate a cherry pie in a record 7 seconds.Amalthia once ate a cherry pie in a record 7 seconds.Amalthia once ate a cherry pie in a record 7 seconds.Amalthia once ate a cherry pie in a record 7 seconds.Amalthia once ate a cherry pie in a record 7 seconds.Amalthia once ate a cherry pie in a record 7 seconds.Amalthia once ate a cherry pie in a record 7 seconds.Amalthia once ate a cherry pie in a record 7 seconds.
 
Amalthia's Avatar
 
Posts: 951
Karma: 1960
Join Date: Jan 2007
Location: Anchorage, AK
Device: Sony Reader PRS-505, PRS-650
Quote:
Originally Posted by KNotTed View Post
Well, *** can have extra space above and below by just defining a class that specifies top and bottom margin. No need to add extra paragraph tags.
Well it's rather easy to add <P>&nbsp;</P> I'm not sure what is required for a class tag?
Amalthia is offline   Reply With Quote
Old 03-03-2010, 09:05 PM   #14
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,559
Karma: 19637653
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
Here's the CSS code needed to do what the OP wants to do.

Code:
hr {
  margin-left: 40%;
  width: 20%
}
And to invoke it in the book, just do...

Code:
<hr />
Simple really.
JSWolf is online now   Reply With Quote
Old 03-03-2010, 09:18 PM   #15
frabjous
Wizard
frabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
frabjous's Avatar
 
Posts: 1,213
Karma: 12890
Join Date: Feb 2009
Location: Amherst, Massachusetts, USA
Device: Sony PRS-505
Quote:
Originally Posted by JSWolf View Post
Here's the CSS code needed to do what the OP wants to do.

...

Simple really.
Umm, no. To quote the the original poster...

Quote:
Originally Posted by KNotTed View Post
That's a good solution for the particular question. I suppose I should have been more (or less) specific. Supposing the width is not 20%, but 120pt. I'd still like to be able to center that, regardless of the display device.
I know the center tag is deprecated, and bad form, but you might have better luck with <center><hr /></center>. (EDIT: Nevermind. Tried it, and it doesn't work in ADE, though it does work in browsers. Darn ADE.)

Last edited by frabjous; 03-03-2010 at 09:33 PM.
frabjous is offline   Reply With Quote
Reply

Tags
ade, css, hr tag

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Tag on Add Gazerwolf Calibre 4 09-02-2010 12:54 PM
Tag Management lucidcrux Calibre 7 08-19-2010 10:55 AM
simple TAG problem alexxxm Calibre 7 02-04-2010 12:13 PM
'Keep' tag? AnemicOak Amazon Kindle 13 03-17-2009 05:19 PM


All times are GMT -4. The time now is 11:16 PM.


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