appropriate way to insert pics?

[rosshalde]

I took this from Pablo's "Quick and Dirty Guide".

<div class="ic">
<h3 title="Figure 1"><img alt="" src="../Images/figure_1.jpg" /></h3>
</div>
and CSS
.ic { page-break-inside: avoid; }

My questions are:
1) When I am inserting 100 pics in a book, is it actually necessary to use the <div class="ic">...or can I just define h3 in the CSS at text-align:center and ditch the whole <div>. I am only asking as it will cut down on the copy/paste time if I can leave out two extra lines/picture
2) I don't understand the ".ic" definition. I don't see how it tells the image to be centered. It seems to tell the image and caption to stay together if there is one.

[Jellby]

In the code you showed, yes, the <div class="ic"> in unnecessary (and page-break-avoid: is often ignored, anyway). And the <h3> is only needed if you want "Figure 1" to appear in the TOC. Basically, you can just use:

<XXX><img alt="" src="..." /></XXX>

where XXX = div, p, h1-6. If you need to center, remove indent, add margins, etc. use a class in the XXX and define it appropriately.

[rosshalde]

ok, so would each of these be acceptable as a representative of

<XXX><img alt="" src="..." /></XXX>

1) <p class="s1"><img alt="" src="..." /></s1> and define in the css

.s1{
text-align:center
}
2) <div class="image"><img alt="" src="..." /></div>
and define in the css
.image{
text-align:center
}

is there a preference for using a <p> style vs <div> style. Will there ever be a difference on how these are displayed? Even though it is an image, is "text-align:center" the best way to go? I saw someone else doing something like
margin-left:auto
margin-right:auto in the css. Is there anything better or worse about either option? Is there a preferred option?
I really appreciate your help in clearing this up. I am brand new at this and have been going through some tutorials over at W3, but it is helpful to be able to ask questions like these.

[Jellby]

The difference between <p> and <div> depends on the rest of the stylesheet and the default styles applied by the reader. Usually, <p> will have some default margins and/or indent, while <div> is a "virgin" element. By default, I would prefer <div>, and, to be specific use "div.image" in the CSS rather than just ".image".

"text-align" simply defines the alignment of the content, whatever it is.

"auto" margins can be used for different purposes (centering a table, usually), but they are not guaranteed to work (the spec allows ignoring them, and many readers do).

[rosshalde]

so this is the preferred way of doing it?
<div class="image"><img alt="" src="..." /></div>
and define in the css
div.image{
text-align:center;
}

also, in Sigil, it suggest the following as a way to get your picture to be in the TOC
<h1 title="CHAPTER 1"><img src="../Images/myimage.png" /></h1>
When it comes to <h>, can you have a "class" like with <div>? Is title a "class"? If not, what is "title" in html terms?
would i just define in the css
h1{
text-align:center;
}

[odedta]

I can't think of any reason why you want to put an image in a heading tag.

[Jellby]

"title" is not a class, it is an attribute. In normal HTML it could, for instance, be displayed as a tooltip when you hover the mouse on the element. In ebook readers it will probably have no effect at all, but Sigil uses it to create the TOC (it cannot put an image in the TOC, but it will put whatever you write in the "title" attribute

Originally Posted by odedta

I can't think of any reason why you want to put an image in a heading tag.

The simplest one: when you want to have the chapter title embedded in some illustration or decorative ornament.

[rosshalde]

so, a class is completely made up?
meaning I could say
<p class="donkey"
and have
.donkey{
xxx
}
in the css?
but there are only certain attributes (they are given, not able to be made up)?
And when you style something...you can style both a class and an attribute? or just a class?

[Toxaris]

You use classes to identify parts of your HTML to which attributes need to be applied. Then in your stylesheet you define the classes. There is where you determine which attributes will be applied. There are a lot of different attributes. Be aware that ePUB2 uses CSS 2.0.1, so that determined which attributes could be used. Even then not all attributes will work though, some of them make no sense in eBooks and some of them will be ignored by readers. It is a fixed list though. For the complete specs, see: http://www.w3.org/TR/CSS21/

[Jellby]

Originally Posted by rosshalde

so, a class is completely made up? but there are only certain attributes (they are given, not able to be made up)?

Exactly. And "class" is an attribute, with which you assign a class to an element.

And when you style something...you can style both a class and an attribute? or just a class?

Just a class, although with CSS you can use attributes in a selector, so that a particular styling affects elements with or without it. The syntax div.myclass in the CSS means any <div> tag with class="myclass". Other attributes are selected with a different syntax.

Originally Posted by Toxaris

You use classes to identify parts of your HTML to which attributes need to be applied.

I think you are mixing terminology, which may confuse rosshalde. Let's call "attributes" the stuff in HTML. The stuff in CSS, to which you refer shall be called "properties" (what's inside the braces, such as "text-align"), or "selectors" (outside the braces, like "div.myclass").