Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 04-15-2019, 02:30 PM   #1
ralphiedee
Zealot
ralphiedee is no ebook tyro.ralphiedee is no ebook tyro.ralphiedee is no ebook tyro.ralphiedee is no ebook tyro.ralphiedee is no ebook tyro.ralphiedee is no ebook tyro.ralphiedee is no ebook tyro.ralphiedee is no ebook tyro.ralphiedee is no ebook tyro.ralphiedee is no ebook tyro.
 
Posts: 118
Karma: 1370
Join Date: Mar 2012
Device: none
Target_ID image Style question

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>
ralphiedee is offline   Reply With Quote
Old 04-15-2019, 03:51 PM   #2
Tex2002ans
Wizard
Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.
 
Posts: 1,165
Karma: 6100569
Join Date: Jul 2012
Device: Kobo Forma, Nook
Quote:
Originally Posted by ralphiedee View Post
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:
Code:
<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:
Code:
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:

Code:
<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:
Code:
<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:
Code:
div.socialmedialogos {
	text-align: center;
}

p.social {
	text-indent: 0;
}


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

Click image for larger version

Name:	BeforeSocialMedia.png
Views:	10
Size:	2.1 KB
ID:	170723 Click image for larger version

Name:	AfterSocialMedia.png
Views:	11
Size:	5.2 KB
ID:	170724
Tex2002ans is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Style Sheet entry for a 'hanging' style AThirstyMind Kindle Formats 6 12-10-2016 12:28 AM
Image question and still can't delete PalPam Sigil 5 11-14-2013 11:05 AM
Question about image yakimeshi ePub 5 12-07-2012 04:36 AM
Style Question - Capitalizing entire words galavanter General Discussions 12 09-27-2010 11:59 PM
Epub style question - TOC luthar28 ePub 4 08-04-2010 07:19 PM


All times are GMT -4. The time now is 06:11 PM.


MobileRead.com is a privately owned, operated and funded community.