View Full Version : 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
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
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:

<body dir="ltr">

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


and in the CSS:

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

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

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.