Target_ID image Style question

[ralphiedee]

I have four targeted images with links to websites in a Sigil project

All the links work fine except I need some padding in between the images.

How do add that using this code?

here is the code I used

<div style="text-align: center;"><a id="prime" href="http://amazon.com"><img alt="AmPrime60_107" src="../Images/AmPrime60_107.jpg"/></a>

<a id="Goodread" href="http://yahoo.com"><img alt="GoodreadsIco_60_60" src="../Images/GoodreadsIco_60_60.png"/></a>

<a id="Fbicon" href="http://yahoo.com"><img alt="Facebook icon_60_60" src="../Images/Facebook%20icon_60_60.png"/></a>

<a id="pinterest" href="http://pinterest.com"><img alt="pinterest_60_60" src="../Images/pinterest_60_60.png"/></a>

[Tex2002ans]

Originally Posted by ralphiedee

All the links work fine except I need some padding in between the images.

How do add that using this code?

I assume you wanted all 4 logos on the same line horizontally?

Wrap the images in their own <span>, and give those a class:

Spoiler:

<div class="socialmedialogos">
<span class="storeimage"><a id="prime" href="http://amazon.com"><img alt="AmPrime60_107" src="../Images/AmPrime60_107.jpg"/></a></span>

<span class="storeimage"><a id="Goodread" href="http://yahoo.com"><img alt="GoodreadsIco_60_60" src="../Images/GoodreadsIco_60_60.png"/></a></span>

<span class="storeimage"><a id="Fbicon" href="http://yahoo.com"><img alt="Facebook icon_60_60" src="../Images/Facebook%20icon_60_60.png"/></a></span>

<span class="storeimage"><a id="pinterest" href="http://pinterest.com"><img alt="pinterest_60_60" src="../Images/pinterest_60_60.png"/></a></span>
</div>

Then insert in your CSS:

Spoiler:

div.socialmedialogos {
	text-align: center;
}

span.storeimage {
	margin-right: 1em;
}

You can now easily control the spacing between them by adjusting margin-right.

Current Issues

But there are multiple issues with your current code:

1. Please don't use meaningless alt tags.

alt tags are used for Screen Reading software + Text-to-Speech, and having names such as "AmPrime60_107" are worse than nothing.

Better to change them to a blank alt="", or give them more meaningful descriptions like alt="Amazon Prime Logo".

2. Images wrapped within <a> links don't work on many ereaders.

And this makes it impossible for someone without internet to actually visit these links. Better to stick the logo there, and give the full URL in text so people may also type it in their browser manually.

Something like this would be a better solution:

<p>*Amazon Logo Here*<br/>
<a href="http://amazon.com">http://amazon.com</a></p>

3. I'm assuming you're going to link to your specific social media links?

All the more reason to have fully readable URLs. People can easily type it into their phone or another device nearby as they read.

(And be careful, your Goodreads example points to Yahoo.com + Facebook to Yahoo.)

What I Would Adjust

New HTML:

Spoiler:

<h2>Visit Me on Social Media</h2>

<div class="socialmedialogos">
<p class="social"><img alt="" src="../Images/AmPrime60_107.jpg"/><br/>
<a href="http://amazon.com">http://amazon.com</a></p>

<p class="social"><img alt="" src="../Images/GoodreadsIco_60_60.png"/><br/>
<a href="http://goodreads.com">http://goodreads.com</a></p>

<p class="social"><img alt="" src="../Images/Facebook%20icon_60_60.png"/><br/>
<a href="http://facebook.com">http://facebook.com</a></p>

<p class="social"><img alt="" src="../Images/pinterest_60_60.png"/><br/>
<a href="http://pinterest.com">http://pinterest.com</a></p>
</div>

Then insert in your CSS:

Spoiler:

div.socialmedialogos {
	text-align: center;
}

p.social {
	text-indent: 0;
}

Here's an example of the differences Before/After: