Quote:
Originally Posted by Turtle91
Hi Lucie - welcome to MR!
The easiest way to make sure it is on it's own page is to put it in its own html file. Each chapter should be in a separate file and you can just place the quote file before the chapter file.
Are you using ePub2 or ePub3?? There are different techniques for the different versions.
For ePub2, I borrow some <table> properties without having to use a table. It works great on my devices but I can't guarantee all devices support <table>s, although, it would be a pretty poor device/app that didn't... What device/app are you targeting for your book?
In my case (ePub2) I surround whatever I want to be vertically centered with a double <div>. You can style the interior paragraphs however you like... ie. horizontally centered. You can see a better explanation on W3Schools website. They are a pretty decent resource for coding specifics.
Code:
CSS:
/* Vertically centered on page */
div.v-ctr {height:100%; width:100%; display:table; position:fixed;
padding:0; margin:0; text-indent:0}
div.v-ctr div {display:table-cell; vertical-align:middle;
padding:0; margin:0}
HTML:
<body>
<div class="v-ctr">
<div>
<p>yadda yadda yadda</p>
</div>
</div>
</body>
You can actually use the same technique for ePub3, but there are some more elegant solutions using display:flex... be aware that many, especially older, devices won't support ePub3 coding.
Cheers! |
Thank you so much for this... I've got new files set up for each quote so they appear on their own page, but I'm still trying to get my head around the coding thing.
This is what I have currently in Sigil.
Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>The_Me_I_Didn't_See_-_FoundHer_Series_V1_copy-2</title>
<link href="css/idGeneratedStyles.css" rel="stylesheet" type="text/css" />
</head>
<body id="The_Me_I_Didn-t_See_-_FoundHer_Series_V1_copy-2" lang="en-GB" xml:lang="en-GB">
<div class="_idGenObjectStyleOverride-1">
<p class="Dedication">For all the women who looked in the mirror one day </p>
<p class="ParaOverride-2"><span class="CharOverride-4">and didn’t recognize the woman looking back... </span></p>
<p class="ParaOverride-2"><span class="CharOverride-4">We see you.</span></p>
</div>
</body>
</html>
Im not sure how/where to add the code to keep the previous styles.
Many thanks in advance...This newbie really appreciates the help!!