Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 03-28-2011, 01:44 PM   #1
SamL
I mess around with Epubs
SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.
 
Posts: 82
Karma: 1566
Join Date: Mar 2011
Location: Cambridge, MA
Device: mac, ipad, nook, kindle
Centering Images using object styles

So I am using images for my chapter headings for my book. To make sure they will display alright across different platforms, I've made the width 500px. Because of this, the image does not take up the whole width on some platforms like the iPad.

I need to center all of these images. What I was doing before was going in to all the XHTML files and putting in <div align="center"> tags. This displayed the images exactly how I want them.

I noticed that once I tried to validate my epub, there were errors in the use of my align tags.

Upon further reading, it looks like I need to apply object styles to my images in inDesign, that does this alignment. I am able to apply the object style, but when I look at my CSS file, it recognizes the style, but has no attributes to it (I read this is a common problem.)

so in my CSS file, it looks like this:

div.center-image {
}

And in the XHTML file, is applies the style to the images correctly.

Can anyone recommend what I should put in for code for this CSS, I've tried a few different things, but I haven't really used object styles until now. Any help would be greatly appreciated.

Thanks
SamL is offline   Reply With Quote
Old 03-28-2011, 04:57 PM   #2
Adjust
Addict
Adjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel is
 
Adjust's Avatar
 
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
Code:
div.center-image	{
	margin-top: 0%;
	text-indent: 0%;
	text-align: center;
	margin-bottom:0%;
		}
img {
	max-width: 100%
}
Adjust is offline   Reply With Quote
Advert
Old 03-28-2011, 07:10 PM   #3
SamL
I mess around with Epubs
SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.
 
Posts: 82
Karma: 1566
Join Date: Mar 2011
Location: Cambridge, MA
Device: mac, ipad, nook, kindle
Hmmmm, still not working. It is still aligning left.

This is what my code looks like.

CSS:
Quote:
div.center-image {
margin-top: 0%;
text-indent: 0%;
text-align: center;
margin-bottom:0%;
}
img {
max-width: 100%
}
From the XHTML file:
Quote:
<p><span class="center-image"><img class="center-image" src="images/Stern_title_fmt.jpeg" alt="Stern_title.jpg" /></span></p>
Both the span and img class were generated from my object style in InDesign. I also tested this with the code:

Quote:
<p><div align="center"><img class="center-image" src="images/Stern_title_fmt.jpeg" alt="Stern_title.jpg" /></div></p>
and it displays exactly how I want it, but it won't validate. I am testing this in Digital Editions.
SamL is offline   Reply With Quote
Old 03-29-2011, 05:08 AM   #4
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
If you define the style for div.center-image, it's pointless to use <span class="center-image">, or to add a "center-image" class to anything other than a <div>. Moreover, a <span> does not use a text-align property. And you can't have block-level elements (like <div>) inside a <p>.

Try this:

Code:
<div align="center-image">
<img src="images/Stern_title_fmt.jpeg" alt="Stern_title.jpg" />
</div>
(And don't use arbitrary text for the "alt" attribute. It is intended to be used when the image cannot be displayed, for example when a text-to-speech system is being used. If the image is purely decorative, you can have alt="", otherwise use at least something descriptive of what appears in the image.)

Last edited by Jellby; 03-29-2011 at 05:11 AM.
Jellby is offline   Reply With Quote
Old 03-29-2011, 11:22 AM   #5
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 29,659
Karma: 54369090
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
Quote:
Originally Posted by Jellby View Post
Try this:

Code:
<div align="center-image">
<img src="images/Stern_title_fmt.jpeg" alt="Stern_title.jpg" />
</div>
(And don't use arbitrary text for the "alt" attribute. It is intended to be used when the image cannot be displayed, for example when a text-to-speech system is being used. If the image is purely decorative, you can have alt="", otherwise use at least something descriptive of what appears in the image.)

TTS will have trouble pronouncing 'jpg' (Jay' Peg).

I prefer to use: Image or Picture or Map as a suffix rather than a file extension (that some users may not even know is a image file type)
theducks is offline   Reply With Quote
Advert
Old 04-05-2011, 01:07 PM   #6
SamL
I mess around with Epubs
SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.
 
Posts: 82
Karma: 1566
Join Date: Mar 2011
Location: Cambridge, MA
Device: mac, ipad, nook, kindle
Quote:
Originally Posted by Jellby View Post
If you define the style for div.center-image, it's pointless to use <span class="center-image">, or to add a "center-image" class to anything other than a <div>. Moreover, a <span> does not use a text-align property. And you can't have block-level elements (like <div>) inside a <p>.

Try this:

Code:
<div align="center-image">
<img src="images/Stern_title_fmt.jpeg" alt="Stern_title.jpg" />
</div>
(And don't use arbitrary text for the "alt" attribute. It is intended to be used when the image cannot be displayed, for example when a text-to-speech system is being used. If the image is purely decorative, you can have alt="", otherwise use at least something descriptive of what appears in the image.)
I was using the <div align="center"> before, but when I go to validate the epub, I get the error:

ERROR: Stern Folder.epub/OEBPS/Stern.xhtml(14): attribute "align" not allowed here; expected attribute "class", "dir", "id", "style", "title" or "xml:lang"

So thats why I am trying to find another way to center the image.

Thanks for the help so far everyone!
SamL is offline   Reply With Quote
Old 04-05-2011, 01:27 PM   #7
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by SamL View Post
I was using the <div align="center"> before, but when I go to validate the epub, I get the error:
Sorry, my fault. It's not align, but class, try <div class="center-image">
Jellby is offline   Reply With Quote
Old 04-05-2011, 01:28 PM   #8
SamL
I mess around with Epubs
SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.
 
Posts: 82
Karma: 1566
Join Date: Mar 2011
Location: Cambridge, MA
Device: mac, ipad, nook, kindle
Ok I got it to work. I needed to use a <p> class instead of a div. I used:

Quote:
<p class="center-image"><img src="images/Stern_title_fmt.jpeg" alt="Stern" /></p>
Thank for letting me know about the alt tags too, I didn't think too much about how they are used in this format.
SamL is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Centering blockquotes ghostyjack ePub 6 07-17-2014 06:07 AM
Centering PDF nguirado Amazon Kindle 5 10-04-2010 08:45 PM
How to center/fit page width SVG images with <OBJECT> amoroso ePub 0 07-31-2010 11:48 AM
How to do centering sjohnson717 Calibre 15 02-28-2010 09:20 AM
centering images with css override? Amalthia Calibre 2 03-30-2009 01:53 PM


All times are GMT -4. The time now is 06:06 AM.


MobileRead.com is a privately owned, operated and funded community.