In Children’s Fixed Layout ePub for iPad – Part 6, you were shown how to make your .xhtml file for your fixed layout ePub.

3d character holding tablet with little 3d character running with head on fire and the words - Hang in there by the larger 3d figure and the little 3d saying - yeah right why does it feel like my head is on fire

Part 6 showed you what to put on individual pages (images and text) but what it did not show you was the positioning for each element in your .xhtml file.

In a fixed layout ePub, every element (i.e., images, text and background) has an absolute position and the CSS (Cascading Style Sheet) is what does the positioning.

The first style sheet is made in a text editor and given the name styles.css. In it you only have the basic information covering all the pages in your fixed layout ePub.

There is no heading information in style sheets because in the .xhtml file, you are calling this information into it so none is needed.

In Part 6, I explained these two lines and why I like to have two separate style sheets in my book:

<link href=”css/styles.css” type=”text/css” rel=”stylesheet”/>
<link href=”css/page01.css” type=”text/css” rel=”stylesheet”/>

The first Styles.css will have the following in the text editor of your fixed layout ePub:

If you copy and paste what is in red only into your text editor, you will have the necessary code for styles.css.

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

The code above is telling the .xhtml file that the body in the .xhtml file will be 512 pixels wide by 768 pixels high (one half the size of a two page spread in the iPad) with no padding or margins. Notice the curly braces { } are used in the .css file instead of the caret < > symbols used in the .xhtml file.

img.background {
     width: 512px;
     height: 768px;
     position: absolute;
     padding: 0;
     margin: 0;
     top: 0;
     left: 0;

This .css code in your styles.css file of your fixed layout ePub is for the image background. And the period after img means it’s a class. So in your .xhtml file it would be written like:

<img class=”background” src=”image/background01.jpg” alt=”Black sky with green grass”>

So if your css for this image class is putting a z-index of -1 (depth of the page). Meaning any number larger than minus 1 will sit in front of your background picture. Again it’s giving the size of the image for this class (type of image) as the same as the body of the page. Usually background images always fill up the full page because other images (pngs) usually are positioned on top of the background.

The position is absolute which means because of the size (width and height), you need to make sure it has no padding or margins and where it starts at the top (0) and the left (0).

And finally in the styles.css is the following:

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

This you’ll put in the file if you intend to have a read aloud book for children. With this code you’re telling iPad to make the media overlay be active and when iPad highlights a word, the color of the highlight will be red.

You can change the color to whatever you want – yellow, blue, orange, purple., etc. I just happened to like red for highlighting in my children’s book.

For the individual page.css styles, more hand coding is needed to position your text and any pictures in your fixed layout ePub and we’ll discuss it in Part 8.

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 8


Related Posts: