Sigil div tag issue HELP

[ebookscovers]

HI there I have just completed an ebook which is fine. . . until I put in about 6 url links on a few social media images at the back. sure its resolved simply though.

The error is on line 138 where the says: Error while parsing file: element "div" not allowed here; expected element (screen shot attached)

also attached is screen for line 138 in sigil. what do I change. the same error is repeated so once I solve this I can correct the rest. what do I delete or replace??

thanks for you help .

David

[DiapDealer]

You can't nest div or p tags inside of a tags to my knowledge.

[Tex2002ans]

You want your <div>s and <p>s on the outside + your <img>s and <a>s on the inside:

<div class="social"><img alt="" src="../Images/instagram.jpg"/></div>
<p><a href="https://www.instagram.com/example">https://www.instagram.com/example</a></p>

<div class="social"><img alt="" src="../Images/twitter.jpg"/></div>
<p><a href="https://www.twitter.com/example">@example</a></p>

[ebookscovers]

thanks for that and I do understand what you are saying and I've tried it but obviously missing something my end.

can you let me know exactly how this should read and I can repair the others? this is how each one is laid out as follows:

<a href="https://twitter.com/UnknownOrigins9"><div id="box5"><p class="figure"><img src="../Images/twit.jpg" width="560" height="67" alt="twit.jpg"/></p>
</div></a>

IS THIS BELOW CORRECT because I lose the URL and doesn't work:
<div class="figure"><img src="../Images/twit.jpg" width="560" height="67" alt="twit.jpg"/></div>
<p><a href="https://twitter.com/UnknownOrigins9"><div id="box5"</a></p>

[DiapDealer]

If you're trying to make the image an actual link, then that's fairly hit-or-miss when it comes to working properly across a range of devices/apps. That's probably why you "lose the URL and doesn't work". Especially if you're testing on something that uses Adobe's RMSDK for rendering.

Many devices provide some sort of pan and zoom functionality with images that wouldn't work if tapping on an image were to follow a link instead.

You're better off using text for the link and adding the image separately.

Originally Posted by ebookscovers

IS THIS BELOW CORRECT because I lose the URL and doesn't work:
<div class="figure"><img src="../Images/twit.jpg" width="560" height="67" alt="twit.jpg"/></div>
<p><a href="https://twitter.com/UnknownOrigins9"><div id="box5"</a></p>

You lose the link because there's nothing between the opening 'a' tag and the closing 'a' tag to BE the link. There also still seems to be some syntax errors in general with that snippet.

Sigil doesn't appear to be related to the issue here. You seem to need to do a little brushing up on html in general.

[Tex2002ans]

Originally Posted by ebookscovers

can you let me know exactly how this should read:

You can't do the part in red:

<a href="https://twitter.com/UnknownOrigins9"><div id="box5"><p class="figure"><img src="../Images/twit.jpg" width="560" height="67" alt="twit.jpg"/></p>
</div></a>

You have to stick <div> on the outside, then <p>, then <a>:

<div id="box5">
  <p class="figure"><a href="https://twitter.com/UnknownOrigins9"><img src="../Images/twit.jpg" width="560" height="67" alt=""/></a></p>
</div>

Let me simplify + indent so it may make more sense:

<div class="box5">
  <p class="figure">
    <a href="LinkGoesHere">
      <img src="../Images/twit.jpg" alt=""/>
    </a>
  </p>
</div>

Do you see how each thing goes inside the other... like a Russian nesting doll?



What you're currently doing is opening and closing the <div>s + <p>s + <a>s all out of order!

Side Note: In ebooks, it's also not a good idea to put the link around an image. It won't work on many ereaders. Better to have actual text to click on:

[Blah blah blah, stick your image code here.]

<p class="social"><a href="http://TwitterURLGoesHere">Visible Text Goes Here</a></p>

Originally Posted by ebookscovers

IS THIS BELOW CORRECT because I lose the URL and doesn't work:
<div class="figure"><img src="../Images/twit.jpg" width="560" height="67" alt="twit.jpg"/></div>
<p><a href="https://twitter.com/UnknownOrigins9"><div id="box5"</a></p>

No. Your <p> is still wrong.

You see the broken <div>? Plus the <div> cannot go inside of a <p>.

[DNSB]

My preference where it is desired to attempt to make an image clickable is to insert the link twice. Once for the image and again using a text line below the image.

  <div class="box5">
    <p class="figure"><a href="https://www.google.ca"> <img src="../Images/twit.jpg" alt=""/> </a></p>

    <p class="center"><a href="https://www.google.ca">This is a clickable link</a></p>
  </div>

[JSWolf]

Originally Posted by DNSB

My preference where it is desired to attempt to make an image clickable is to insert the link twice. Once for the image and again using a text line below the image.

  <div class="box5">
    <p class="figure"><a href="https://www.google.ca"> <img src="../Images/twit.jpg" alt=""/> </a></p>

    <p class="center"><a href="https://www.google.ca">This is a clickable link</a></p>
  </div>

That is a very good idea.

[Turtle91]

Originally Posted by DNSB

My preference where it is desired to attempt to make an image clickable is to insert the link twice. Once for the image and again using a text line below the image.

  <div class="box5">
    <p class="figure"><a href="https://www.google.ca"> <img src="../Images/twit.jpg" alt=""/> </a></p>

    <p class="center"><a href="https://www.google.ca">This is a clickable link</a></p>
  </div>

What happens on those devices that have image zoom feature, as mentioned above? Does that break the zoom functionality, or does the link just not work??

[DNSB]

Originally Posted by Turtle91

What happens on those devices that have image zoom feature, as mentioned above? Does that break the zoom functionality, or does the link just not work??

In my limited testing, the image zooms which is why I add the text link. At least one of them will work.

[Tex2002ans]

Originally Posted by Turtle91

What happens on those devices that have image zoom feature, as mentioned above? Does that break the zoom functionality, or does the link just not work??

Both can happen:

Older versions of ADE won't make the linked image clickable at all. So if you include the link ONLY around the image, people won't be able to get to it.

This is why you should always have human-readable URLs nearby, so readers can type the information in:

<p>Find me in these places:</p>

[Website's logo code]    <--- Clickable image code optional.

<p><a href="http://example.com">www.example.com</a></p>
<p><a href="http://SocialMedia.com/example">SocialMedia.com/example</a></p>

On devices with zoom functionality, your "clickable image" may interfere + break zoom.

A user may click on it, trying to expand the image in order to pan/scan (or some other visual impairment reason). Instead, the browser will open or they'll unexpectedly jump to another location in the book.

So never use the link around an important image within the book, like a map.

For more information, see a few of the previous topics:

2019: "problems making an image a hyperlink in epub"

2014: "Link from an image to a YouTube video"

Also, a few reasons why clickable images work a little better on the computer is because you have:

• Mouse hover (you can see the mouse pointer change + see where a URL will point to)
• Right-click to override and open the image directly.

On ebooks, no such thing on most/(all?) devices.

And also remember: If you ever create a physical print version of the book... there's no such thing as clickable images... so you'll likely have to place that human-readable fallback anyway!

[Turtle91]

Interesting...

It seems like putting the link around the actual address is good, but putting it around the image could either do nothing, or potentially break the book/device functionality, and should be avoided.

Thanks!

[Hitch]

Originally Posted by Turtle91

Interesting...

It seems like putting the link around the actual address is good, but putting it around the image could either do nothing, or potentially break the book/device functionality, and should be avoided.

Thanks!

On Kindles, the reality is that the user doesn't know it's a link and the first action upon being clicked, is that the image zooms.

We deal with this near-daily, with customers INSISTING that the bloody images "must be" clickable links. It doesn't matter if we explain that the tap initial action is zooming; that the user has no way to know it's a clickable link, OR that most Kindles in the eInk category don't have viable browsers. (Don't get me started about links to videos, ditto.)

Hitch