02-26-2010, 03:27 PM | #1 |
Member
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; } Does anyone have any experience/tips for correcting this? |
02-26-2010, 09:01 PM | #3 |
Member
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.
|
02-26-2010, 09:15 PM | #4 |
Wizard
Posts: 1,196
Karma: 1281258
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.
|
02-27-2010, 04:07 AM | #5 |
frumious Bandersnatch
Posts: 7,516
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
In particular, it seems ADE does not support "auto" margins.
|
03-03-2010, 11:06 AM | #6 |
Resident Curmudgeon
Posts: 73,983
Karma: 128903378
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
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.
|
03-03-2010, 11:14 AM | #7 |
Wizard
Posts: 1,213
Karma: 12890
Join Date: Feb 2009
Location: Amherst, Massachusetts, USA
Device: Sony PRS-505
|
|
03-03-2010, 01:36 PM | #8 |
Resident Curmudgeon
Posts: 73,983
Karma: 128903378
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
|
03-03-2010, 02:56 PM | #9 |
Member
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.
|
03-03-2010, 06:32 PM | #10 |
Wizard
Posts: 1,158
Karma: 32196
Join Date: Jan 2007
Location: Anchorage, AK
Device: Sony Reader PRS-505, PRS-650, PRS-T3, Pocketbook HD2
|
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.
|
03-03-2010, 07:20 PM | #11 |
Member
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.
|
03-03-2010, 07:29 PM | #12 |
creator of calibre
Posts: 43,858
Karma: 22666666
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"> </span> </div> |
03-03-2010, 07:34 PM | #13 |
Wizard
Posts: 1,158
Karma: 32196
Join Date: Jan 2007
Location: Anchorage, AK
Device: Sony Reader PRS-505, PRS-650, PRS-T3, Pocketbook HD2
|
|
03-03-2010, 08:05 PM | #14 |
Resident Curmudgeon
Posts: 73,983
Karma: 128903378
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Here's the CSS code needed to do what the OP wants to do.
Code:
hr { margin-left: 40%; width: 20% } Code:
<hr /> |
03-03-2010, 08:18 PM | #15 | |
Wizard
Posts: 1,213
Karma: 12890
Join Date: Feb 2009
Location: Amherst, Massachusetts, USA
Device: Sony PRS-505
|
Quote:
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 08:33 PM. |
|
Tags |
ade, css, hr tag |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Tag on Add | Gazerwolf | Calibre | 4 | 09-02-2010 11:54 AM |
Tag Management | lucidcrux | Calibre | 7 | 08-19-2010 09:55 AM |
simple TAG problem | alexxxm | Calibre | 7 | 02-04-2010 11:13 AM |
'Keep' tag? | AnemicOak | Amazon Kindle | 13 | 03-17-2009 04:19 PM |