In Children’s Fixed Layout ePub for the iPad – Part 7, the styles.css was explained for your fixed layout ePub.

In the picture below I used page01.css but I created a generic page01.css for you to use as a template:

page 17 in the Wonderful World of Wunks Giant Lava Lamp Adventure
As I go through and explain what’s in your template, you can refer back to this picture as a reference:

page 01 css file for fixed layout ePub

Note: The picture above uses another text editor. I just wanted to show you that any text editor will work when coding for an ePub. Just make sure your text editor has line numbers.

The second style sheet could have the following in the text editor of your fixed layout ePub:

body {
width: 512px;
height: 768px;
margin: 0;
padding: 0;

Being slightly annal (or careful), I like to put the body css information again. Is it really needed?

No because the main styles.css has this information in it already and the .xhtml file will refer to it. Since I have the body css code in this one, iPad will use it as it’s the last style sheet being called in.

Tip: You could put everything into the styles.css file but if you place text or images (pngs) in different spots on 30 to 50 .xhtml pages, trying to keep track will make your head explode. That’s why I suggest doing a .css file for every two page spread because when something goes wonky (and it will), you can immediately go to the .css file and change it EZ-ily.

I also put the img class code for background in this file for my fixed layout ePub:

img.background {z-index: -1;}

On one of my two page spreads, I had a black background and a background png of grass (see top image). Between the two backgrounds, I had lights moving back and forth. So you could also have another background and you could name them:

img.backgroundblack {z-index: -2;}
img.backgroundgrass {z-index: 1; position: absolute: top: 440px; left: 0px; margin: 0; padding: 0;}

So when you referred to them in the .xhtml file, the iPad displays the black background in the back because it has a z-index (depth) of minus 2 and the grass background is in front because it has a z-index of plus 2.

The z-index is very important when you’re placing images on a .xhtml page in your fixed layout ePub.

img.character1 {
z-index: 2;
height: 75px;
width: 54px;
position: absolute;
top: 560px;
left: 300px;

What’s in bold and in blue can be changed to fit your fixed layout ePub.

You can give your characters names. For instance, I have as my classes .Willie, .Wanda, .Wally and .OlivarOwl for my character names. I didn’t use the generic character1 as I show above.

The xhtml code I would use for my Wally character:

<img class=”Wally” src=”images/Wally.png” alt=”image of Wally Wunk standing on the grass.” />

The class would be Wally which refers to the page01.css file. In that .css file, I told where to position Wally on the page and how tall he would be.

In a page03.css file, I could have him placed somewhere else. And that’s the reason I do a .css file for each 2 page spread. I don’t want to have to give my charactera different class names. All I want to do is position them differently.

p.line1 {
font-size: 24px;
color: white;
position: absolute;
text-indent: 0;
margin: 0;
padding: 0;
top: 25px;
left: 25px;

Again what’s bolded and in blue could be different for your fixed layout ePub. I used white for my text because it was on a black background. Your text might be positioned on the page differently.

The trick is to use the Safari browser and click on your .xhtml file to see how it looks then keep jockeying it around until it’s where you want it on the page.

And finally, this is the final code that’s in the generic .css file.

.-epub-media-overlay-active {color: red;}

On the above code please notice the period and then the dash. It’s EZ to overlook this but the words for a read aloud fixed layout ePub will not be highlighted if the code is not exact.

You can also use a different color than red to highlight your words.

Tip: When putting text on your .xhtml page, use the break <br /> code. You’ll need to check your text in Safari to know where to put the break code. It’s EZ-ier to do a long paragraph this way than trying to position each line of text. The example picture above had a break code after the word “down.”

In Part 9, we’ll be discussing the .smil file and which free software you can use to make a “read aloud” fixed layout ePub.
signature of Judith Tramayne

P.S. If you found this post on making a fixed layout ePub helpful, please leave a comment below and or share it with your Author friends.

Go to Children’s Fixed Layout ePub for iPad – Part 9


Related Posts: