Hi all,
I'm designing a child book in epub.
The book will be split into 2 parts first part classical ebook with little images, the second part will have only one big image per "page" so as the parent can tell the story to his child only based on the image.
I have a problem with part 2. I know that epub is intended to be reflowable, but it is important for me to have on the same screen (on ADE, on iPad, Iphone etc..) the image plus the title.
I tried to make one part per image
pict1.xhtml
pict2.xhtml etc..
with html like this:
<body>
<div class="wrapper">
<p><a id="pic1"/></p>
<p class="centerImage"><img src="images/big1.jpg" alt="Le Petit Chaperon Rouge" title="Le Petit Chaperon Rouge"/> Le Petit Chaperon Rouge part dans les bois</p>
</div>
</body>
with css:
.wrapper {
clear:both;
padding-bottom: 5%;
position:relative;
padding-top: 1em;
}
.centerImage {
text-align: center;
height: 100%;
z-index:-1;
position:absolute;
top:0px;
right:0px;
}
The problem is that depending on text size, I have image on one screen and title on the other screen and even a blank extra page before the next image.
Did you have experienced that and could you help solving my problem?