Title page does not "translate" as TOC item

[Caleñ0]

First post...sorry for not introducing myself previously.

Thank you kindly in advance for any and all help. So here's my question, and I hope it's clear:
I have generated a TOC in Sigil. The TOC includes my title page as it's first item. Now, the title page I designed, happens to not be text. It's an image. Something I wanted to try out. This means, of course, that I have not assigned any tags to it. It's not an h1, or h2. It is simply an <img>...
At any rate, this item, which is the first item in my TOC, needs to be converted to MOBI, (or any Kindle format, let's say). The problem is that, after conversion (with Calibre), the generated TOC does not include this item. This means that my book ends up beginning at its copyright page.

There is no sign of the title page. I can tweak conversions so that the title page is parsed to the MOBI format, but it is NEVER present as a TOC item. It's just not there. Sometimes I can "scroll" back to it when previewing with Adobe Digital Editions, or the Kindle previewer. The point is, this item is not present in the output file (MOBI eBook)

By the way...I don't know if this is a post that should go on the Caliber area, but I might post there as well.
...which brings me to another point: should I not be using both programs to tweak/convert eBooks? Any better ideas are very welcome.

Thank you once again to anyone that can help me understand a bit more of the process.

[Jellby]

You can use <h1> with your image if that's what you want:

<h1 title="Title Page"><img src="..." alt="..."/></h1>

[Caleñ0]

Originally Posted by Jellby

You can use <h1> with your image if that's what you want:

<h1 title="Title Page"><img src="..." alt="..."/></h1>

Awesome, I'll try this. I understood the Header tag to be a formatting tool. Can it be used without that purpose? That is...supposing that my H1's were left, or right aligned, or had some other formatting applied to them in the CSS style sheet...can it still be used to tag an image without it applying any unwanted formatting?

Many thanks, by the way. I've yet to try it, but I would like to understand how to use tags properly...especially when I understood them to be markers for formatting text.

[theducks]

Originally Posted by Caleñ0

Awesome, I'll try this. I understood the Header tag to be a formatting tool. Can it be used without that purpose? That is...supposing that my H1's were left, or right aligned, or had some other formatting applied to them in the CSS style sheet...can it still be used to tag an image without it applying any unwanted formatting?

Many thanks, by the way. I've yet to try it, but I would like to understand how to use tags properly...especially when I understood them to be markers for formatting text.

if you need selective Header tag styling, the use a selector rather than apply to the Tag itself


No:
h3 {text-align: center;}

Yes:
.chapno {text-align: center;}
<h3 class="chapno" title="Other">A centered Heading</h3>
<h3 title="Normal">A normal Heading</h3>

[Toxaris]

Originally Posted by Caleñ0

I understood the Header tag to be a formatting tool.

No, most (X)HTML is about structure. You structure the document with the correct tags and do the formatting in your stylesheet. Sometimes I think it is very unfortunate that browser have a built-in stylesheet for tags which creates this confusion.

A good example is <strong> and <em>. It is structurally good to use. However, it is not the same as <b> and <i>. Those are about layout. The internal stylesheet of the browsers display <strong> as <b> and <em> as <i>, but that is not obligatory. Therefore they are not the same, they only might look the same.

It is all about structuring the document.

By the way, you could in this case also create a dummy <h1> and set it to display: none. However, that might disrupt your image in the screen (it should not). I like the option from Jellby better.

[Caleñ0]

Thank you everyone for this.

So, if I understand this correctly, in an XHTML doc, the H1 is (or can be), nothing but hierarchy?

Sometimes I think it is very unfortunate that browser have a built-in stylesheet for tags which creates this confusion

...that's exactly right. Even in Sigil, once I apply an h1-4, there are preset formatting to these. Bold/larger size, etc. This is why I was a bit confused about Jellby's solution.

However, I tried this solution and my image, which used to be centered, now has aligned itself to the left. I assume this is because I had created a style for the img tag in the stylesheet:

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;

but since I am not using the img tag, but an H1, it no longer stays centered. Do I need to create a center "rule" for it to obey, or is there any other way to keep this image centered, and still use the h1 tag?

[Jellby]

Originally Posted by Caleñ0

However, I tried this solution and my image, which used to be centered, now has aligned itself to the left. I assume this is because I had created a style for the img tag in the stylesheet:

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;

but since I am not using the img tag, but an H1, it no longer stays centered. Do I need to create a center "rule" for it to obey, or is there any other way to keep this image centered, and still use the h1 tag?

Let's see... first, while you can use auto-margins to center the image, it will not work in ADE and it's unneeded, since an <img> must be in some container anyway. So, instead of <img class="center" ... />, I'd use:

<div class="center"><img ... /></div>

with simply:

div.center { text-align: center }

That's for a normal image, for the title page I'd use:

<h1 class="title" title="Title Page"><img ... /></h1>

with:

h1.title { margin: 0; padding: 0; text-align: center }

(to override the possibly different settings you might have for other <h1> tags)

In any case, this is only to have Sigil automatically add the title page to the TOC. But if you can (and are willing to) manually edit the NCX file, you can always add a link to anywhere without adding an <h1> or any other trick.

[Caleñ0]

A-HA!!!
This actually brings up two questions, one was my original source of frustration. First:
Is there a particular issue with using display: block in this case? After some research, it seemed to be the way to go in regards to centering images. When the page does show up in the resulting .mobi file (buit again, not in its TOC) the image is centered perfectly. Do you have any preference to using text-align in this case?

And my second question, thank you for reminding me, was my original headache:

In any case, this is only to have Sigil automatically add the title page to the TOC. But if you can (and are willing to) manually edit the NCX file, you can always add a link to anywhere without adding an <h1> or any other trick.

THAT was originally my concern. You see, I did have to manually edit the toc.ncx file to add a few sections or pages to it. And they show up fine in Sigil, they are functional navpoints, BUT...they are not read or recognized by Calibre. That, of course, means that even though Sigil shows them as TOC items, these are not parsed to the new format (.mobi).
This is why I'm interested in this h1 solution...I am hoping that the Chapter Detection functionality in Calibre will read the h1 and give it its "rightful place" in the resulting eBook, because h1 is used everywhere else in the book as, both the Chapter title's formatting and obviously the chapter marker to create the TOC. All these other pages using the h1 show up on both Sigil's TOC and the end product's TOC.

[Caleñ0]

Update:
Still no luck. The Calibre conversion does not recognize the title page as a TOC item in the resulting eBook. I am using the h1 tag for it, but it disappears from the final TOC.

[Oldpilot]

I have been using the Semantics tool to identify the title page as the ... title page. Should I be using title="Title Page" instead?

[Toxaris]

Originally Posted by Oldpilot

I have been using the Semantics tool to identify the title page as the ... title page. Should I be using title="Title Page" instead?

No, it should work with the semantics.

[Toxaris]

Originally Posted by Caleñ0

Update:
Still no luck. The Calibre conversion does not recognize the title page as a TOC item in the resulting eBook. I am using the h1 tag for it, but it disappears from the final TOC.

You could try the inline TOC which can be created with the latest beta's.

[Toxaris]

Originally Posted by Caleñ0

A-HA!!!
This actually brings up two questions, one was my original source of frustration. First:
Is there a particular issue with using display: block in this case? After some research, it seemed to be the way to go in regards to centering images. When the page does show up in the resulting .mobi file (buit again, not in its TOC) the image is centered perfectly. Do you have any preference to using text-align in this case?

Centering can be quite a headache on the various devices. AFAK the text-align is the only method that more or less works. If you want to know more about the actual workings and issues, take a look at this link from Liz Castro.
The blog from Liz is recommended anyway, but keep in mind that it mainly directed to iBooks. There is good stuff there.

[Jellby]

Originally Posted by Caleñ0

Is there a particular issue with using display: block in this case?

As I said, to center a block reliably you must use a fixed relative width and relative margins (e.g. width: 50%; margin-right: 25;). Otherwise you need to use auto-margins, whose support is not required by the spec (and Adobe-based readers ignore them).

As I said, you need to include the <img> tag inside a block element (<div> or <p>), so it's easier to just give "text-align: center" to the container. Note that "text-align" controls the alignment of the contents of an element, while with "display" and "margin" you try to control the position of the element itself.

This is why I'm interested in this h1 solution...I am hoping that the Chapter Detection functionality in Calibre will read the h1 and give it its "rightful place" in the resulting eBook, because h1 is used everywhere else in the book as, both the Chapter title's formatting and obviously the chapter marker to create the TOC. All these other pages using the h1 show up on both Sigil's TOC and the end product's TOC.

Maybe you should ask in the Calibre forum instead, or try disabling structure detection (the structure is already explicit in the TOC, no need to "detect" it), or try with another converter.

[Caleñ0]

To Jellby:

As I said, you need to include the <img> tag inside a block element (<div> or <p>), so it's easier to just give "text-align: center" to the container.

I'm so sorry, man. I might have overlooked or misunderstood what you meant in your original post. I took this:

That's for a normal image, for the title page I'd use:

Code:
<h1 class="title" title="Title Page"><img ... /></h1>
with:

Code:
h1.title { margin: 0; padding: 0; text-align: center }
(to override the possibly different settings you might have for other <h1> tags)

...to mean that I no longer needed the img tag, except to reference the image folder or location. I assumed you meant I could use h1 INSTEAD of the img tag, which I had before, with attributes, etc. I'm not sure if that is indeed what you recommended.
In any case, you are right in regards to asking in the Calibre forum. I actually posted the same question there, but I think because of the forum policy (not posting the same question in different places), it might not have any traction. I will try to maybe rephrase it and ask again, but either way..I DID think it to be a Calibre issue, but I also wanted to make absolutely sure that my Sigil XHTML/CSS were not keeping Calibre from detecting chapters and thus, incorrectly compiling the elements for the final .mobi structure.
In the end, the result is the same, Calibre just does not recognize this first page as a TOC item, even as it includes it in the structure.

Color me lost.

Toxaris:
Thank you VERY much for recommending L Castro's blog. I'm currenlty using her CSS3/HTML5 quickstart guide in looking for answers to a gazillion questions I have about this.
If it's not obvious, I am a man of the print era...so I'm slogging along this, but with high hopes.