Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    href style question

    I have targeted images in an epub which link to webpages outside the book. All works except I need to space the links and add some padding inbetween the links the code I used is

    <div style="text-align: center;"><a id="whattheheck" 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><a id="whatthe****" href="http://google.com"><br/></a></div>

    how to I structure a padding attribute inbetween the images?

    -spacing-needed-jpg

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    8,035
    Thanks
    37
    Thanked 1,076 Times in 1,072 Posts
    You have left out a lot of needed information.
    But do this
    1.) remove the <br> in the google icon
    2.) make a DIV to surround the images
    3.) use this in the style sheet and define a width

    Code:
    <style>
    #images{
        display: flex;
        justify-content: space-between;
        width: 10vw;   // SET THE WIDTH HERE 
    }
    </style>
    Use this HTML:
    Code:
    <div style="text-align: center;">
        <div id="images">
            <a id="whattheheck" 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>
            <a id="whatthe****" href="http://google.com"></a>
        </div>
    </div>
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,490
    Thanks
    3
    Thanked 624 Times in 610 Posts
    Hi there ralphiedee,

    check out the attachment to see how I would tackle your problem.

    coothead
    Attached Files Attached Files
    Last edited by coothead; Apr 16th, 2019 at 08:40 PM.
    ~ the original bald headed old fart ~

  4. #4
    New Coder
    Join Date
    Feb 2009
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Copied the code to the html page and css page. The links and images work and display but I can't get the width to work. see screenshots

    -html_ss-jpg
    -css_ss-png
    -page_ss-png

  5. #5
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    8,035
    Thanks
    37
    Thanked 1,076 Times in 1,072 Posts
    Post YOUR code, not mine. I want to see what you are using for width.

    Also tell us what
    but I can't get the width to work.
    means. What don't work? How is it working that you don't like? ETC.

    If you tell us what are the dimensions of the icons your using we can give you code.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  6. #6
    New to the CF scene
    Join Date
    Mar 2019
    Location
    India
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You need to actually add padding to the elements. Something like this:

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

    <a style="padding: 0px 2px 0px 2px;" id="Goodread" href="http://yahoo.com"><img alt="GoodreadsIco_60_60" src="../Images/GoodreadsIco_60_60.png"/></a>

    <a style="padding: 0px 2px 0px 2px;" id="Fbicon" href="http://yahoo.com"><img alt="Facebook icon_60_60" src="../Images/Facebook%20icon_60_60.png"/></a>

    <a style="padding: 0px 2px 0px 2px;" id="pinterest" href="http://pinterest.com"><img alt="pinterest_60_60" src="../Images/pinterest_60_60.png"/></a><a id="whatthe****" href="http://google.com"><br/></a></div>;


    Adjust the values according to what padding you are looking for:

    If the padding property has four values:

    padding: 25px 50px 75px 100px;
    top padding is 25px

    right padding is 50px

    bottom padding is 75px

    left padding is 100px

  7. #7
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    8,035
    Thanks
    37
    Thanked 1,076 Times in 1,072 Posts
    @lucywilson, please use CSS style sheets instead of inline styling.
    While padding works it's not the best way of doing this.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •