To insert a decoration on top of a title entry

roger64 · 11-14-2012, 07:57 PM

Hi

I wish to publish a diary. Each entry, with a date is a title. I would like to add on top of each title a decoration like in the screenshot below.

The problem - for me - is that the style has a pagebreak before and I do not know how to get both the pagebreak and the decoration...

If somebody has a code solution, I will be very happy

PS: I know how to insert the decoration after the text but not before.

DiapDealer · 11-14-2012, 09:41 PM

Remove the page-break-before attribute from the title's element/css class and apply it to the image instead.

JSWolf · 11-14-2012, 11:32 PM

You don't actually need a page break declaration in most cases. The only case I can think of is a page of endnotes where you want each note to be on it's own page.

roger64 · 11-14-2012, 11:55 PM

Quote:

Originally Posted by DiapDealer

Remove the page-break-before attribute from the title's element/css class and apply it to the image instead.

I'll try it. Thanks

JSWolf · 11-19-2012, 07:32 PM

Quote:

Originally Posted by roger64

I'll try it. Thanks

You don't need a page break if you have your chapters set correctly with each chapter as a separate XML file.

theducks · 11-20-2012, 08:22 PM

Also think about using a Background-Image: (Background-repeat: no-repeat; ) in your title block div :bulb2: Include a blankspace at the bottom if you don't want text over the actual image.

roger64 · 11-21-2012, 05:30 AM

Hi,

I am not sure I understand (to speak more frankly, I don't understand

)
Folllowing DiapDealer proposal, I had enough with:

Code:

 <body dir="ltr">
 
  <div style="text-align:center"><img alt="" class="frameGraphics2" src="../Images/bidule.png" style="width:16%" /></div>

and in the CSS:

Code:

.frameGraphics2 {
	page-break-before: always;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
}

But I'll be interested in any improvement.

JSWolf · 11-21-2012, 06:12 AM

Here is the code I have in one book that uses a graphic as the chapter number and there is a subtitle under it.

Code:

<body>
<h2 class="chapterNumber"><img src="../Images/image00078.jpeg" alt="image"/></h2>
<p class="chapterDateline">F<small>LORIDA</small> S<small>TRAITS</small>, I<small>NTERNATIONAL</small> W<small>ATERS</small></p>

Code:

body {
widows: 0;
orphans: 0;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
font-size: 92.5%
}
p {
display: block;
font-family: "MinionPro";
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
text-indent: 1.2em
}
.chapterNumber {
color: #9A9A9A;
display: block;
font-family: "FuturaStd";
font-size: 1.29412em;
font-weight: bold;
line-height: 1.2;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
margin-top: 1em;
text-align: center;
text-indent: 0
}
.chapterDateline {
display: block;
font-family: "FuturaStd";
font-size: 1em;
margin-bottom: 2%;
margin-left: 0;
margin-right: 0;
margin-top: 0;
text-align: center;
text-indent: 0
}
small {
font-size: .7em
}

.chapternumber is also used when there is text instead of a graphic. Also, you can see there I have no for a page-break. This is because I have each section/chapter in a separate XML file.

11-14-2012, 07:57 PM	#1
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	To insert a decoration on top of a title entry Hi I wish to publish a diary. Each entry, with a date is a title. I would like to add on top of each title a decoration like in the screenshot below. The problem - for me - is that the style has a pagebreak before and I do not know how to get both the pagebreak and the decoration... If somebody has a code solution, I will be very happy PS: I know how to insert the decoration after the text but not before. Attached Thumbnails

11-20-2012, 08:22 PM	#6
theducks Well trained by Cats Posts: 30,444 Karma: 58055868 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	Also think about using a Background-Image: (Background-repeat: no-repeat; ) in your title block div :bulb2: Include a blankspace at the bottom if you don't want text over the actual image. Last edited by theducks; 11-20-2012 at 08:23 PM. Reason: smiles Grr

11-21-2012, 05:30 AM	#7
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	Hi, I am not sure I understand (to speak more frankly, I don't understand ) Folllowing DiapDealer proposal, I had enough with: Code: <body dir="ltr"> <div style="text-align:center"><img alt="" class="frameGraphics2" src="../Images/bidule.png" style="width:16%" /></div> and in the CSS: Code: .frameGraphics2 { page-break-before: always; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; padding: 0; } But I'll be interested in any improvement.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Pubit!/Add Title Previewer shows ellipsis in title bar	schooner1892	General Discussions	0	09-15-2012 08:04 PM
Book Title at Top of Page?	harpangel36	Amazon Kindle	1	02-19-2012 09:49 AM
To What Genre does [Insert Title] Belong?	Nyssa	General Discussions	20	04-01-2011 10:08 AM
Read without author name/book title at top?	uncola	Amazon Kindle	6	11-09-2009 07:35 PM
Reference Burbank, Emily: Woman as Decoration	jamh	BBeB/LRF Books	0	04-18-2008 06:24 PM

11-14-2012, 09:41 PM	#2
DiapDealer Grand Sorcerer Posts: 28,040 Karma: 199464182 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	Remove the page-break-before attribute from the title's element/css class and apply it to the image instead.

11-14-2012, 11:32 PM	#3
JSWolf Resident Curmudgeon Posts: 76,423 Karma: 136564696 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	You don't actually need a page break declaration in most cases. The only case I can think of is a page of endnotes where you want each note to be on it's own page.

Advert

Advert