How to...make a caption part of an image.

[DomesticExtremis]

Originally Posted by rosshalde

will the <p> inside the <div class="stanza"> be treated as the normal<p> or will they be treated as following the <div>. It appears that they follow the <p>. What am I missing here to make the <p> inside the <div class="stanza"> behave differently?

No - if you want that to happen, you need to revert to your original code and fix the error I pointed out in my previous post.

[rosshalde]

with the fixed code that you gave.
stanza {
margin-top: 1em;
margin-right: 0;
margin-bottom: 1em;
margin-left: 2em;
text-align: left;
text-indent: -2em;
}
will that give me the overflow line slightly indented as in poetry?
I thought that the trick was having that padding in there as well.

I just closed the one brace as suggested above and that also helped.

What I need to learn is when difference codes in the CSS override one another.

I appreciate so much help on here. I have been plugging away trying to learn how to do this, and some things are starting to make logical sense.

[Toxaris]

Originally Posted by rosshalde

What I need to learn is when difference codes in the CSS override one another.

In general that would be cascading, it works down into the child tags. So, if you for example:

<div  class="dummy">Dummy text</div>
<div class="dummy"><p>dummy text 2</p></div>

Let's say you have a simple stylesheet like this:

div.dummy {font-style: italic;}
p {font-style-normal;}

In this case 'Dummy text' would be italic, but 'dummy text 2' not. The attribute is overwritten. In order to overwrite a certain attribute, it must be addressed. In this example I specifically have given the p-tag the attribute that it must not be italic. Normally a p-tag is never italic unless specified otherwise, so it seems redundant. However, since it would need to overwrite the font-style of the div-tag, I need to specify it.

I hope this makes it clear. This is a simple example, but it can become complex quite fast. That is why an Inspector is useful, to see where the value of the attributes are coming from. Both Sigil and Calibre editor have these by default.

[crutledge]

You can use either Photoshop (expensive) or GIMP (free).

1. Load image (image01.png)
2. Cleanup (image02.png)
3. Add whitespace at bottom of image (image03.png)
4. insert and locate Caption in whitespace. (image04.png)
5. Crop image to final display (image05.png)
6. Add decorations as desired (image06.png)
7. Save as png

The hardest part is getting used to the tool terminology.