Okay, I seem to have solved
some of my problems! But not one last one. :/ The book I'm working on is Thoreau's "Walden", by the way -- lots of weird table 'n' stuff in there, I'll tell ya.
I've included the following screenshots here to illustrate the problem(s) I've been having with regard to these stupid ornaments...
"ornament-black.jpg" - the ornament I'm using (I've got a brown version of this for under the chapter headings, but it's the same image, size, etc.);
"screenshot - header.jpg" - screenshot of the chapter headings, where the ornament displays just fine;
"screenshot - paragraph.jpg" - screenshot of the ornament as a section break, where I
finally managed to get it to display correctly (before I couldn't seem to get the top/bottom margins equal, but now I have); and
"screenshot - poem.jpg" - screenshot showing the problem that I'm still struggling with.
I've tested this all out in iBooks (on the iPad) and in ADE and Sony Reader Library (and Sigil) on my PC, and the chapter headings and the section breaks all look perfect!
But I just can't seem to get that smaller/smallest version of the ornament to have equal top/bottom margins. I'm sure that I could if I used the same code to have it
centered like I did with the section break, but because the poem(s) is/are smaller in size, I don't want it centered in the page -- that would look weird. I found that by having the image be 111px (or so) and about 6em over seems to look/work just fine for all the poems in the book, so that's what I've been trying to do...
...but I just can't get those stupid top/bottom margins to be equal.
Here's the code that I finally figured out to use to get the section breaks to actually work/look okay (the code for the chapter headings is similar). In my HTML I have...
Code:
<p class="ornimdpar"><img alt="[section break]" class="ornimd" src="../Images/ornament-black.jpg" /></p>
...and my CSS for that is...
Code:
.ornimdpar {
width: 38%;
margin-left:31%;
text-align: center;
}
.ornimd {
width:100%;
margin-top:0.38em;
margin-bottom:0.38em;
display:inline-block;
}
As for the stupid poem problem, well, geez, I've tried SO many different things (none of which seem to do the trick), but my latest attempt is/was to have this in my HTML...
Code:
<p class="poembreak"><img alt="[verse break]" src="../Images/ornament-black.jpg" /></p>
...and this for the CSS...
Code:
p.poembreak {
font-size: 76%;
margin-left:111px;
width:111px;
margin-top: 0;
margin-bottom: 0;
line-height: 138%;
text-align: left;
}
I know I don't really need a font size specified when it's just an image -- but hey, I've been trying EVERYTHING! I just can't understand why I can't seem to get the top/bottom margins the same for the break in the
poems, specifically (the larger ornamental breaks in the main text turn out just fine). :/