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 9 of 9
  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,040
    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,040
    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
    7
    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,040
    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.

  8. #8
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,378
    Thanks
    4
    Thanked 484 Times in 472 Posts
    1) The markup has serious issues for being "non-semantic". You've built an inline-level run-on sentence thanks to a lack of block-level dividers or anything resembling a semantic tag to say what any of this IS. It appears to be a short list of options like a menu where the items are in no particular order. We have tags for this called "unordered lists".

    2) It seems unlikely these would be targets for script "get" methods, nor do they seem to be something you'd hash-link or use "for" attributes with, so ID isn't all that great an idea.

    3) lose the DIV for NOTHING, that extra DIV serves zero legitimate purpose.

    4) ALT text is supposed to descibe what the image is in plain text/speech for non-sighted / non-visual UA's. "GoodreadsIco_60_60" is kind of a "screw you" to the visually impaired in that regard.

    5) realistically these images appear to be presentation not content, so they have no business in the markup as images, and should be applied with more advanced CSS techniques like gilder-levin image replacement or negative text-indent. This would simplify the markup, allow for things like CSS Sprites to make the page load faster, etc, etc.

    6) if you have to up-tree link (../) there's something WRONG with your directory structure.

    7) this is 2019, you can stop wasting time on the XML-style closures on "empty" tags such as IMG.

    Keeping the images for now, the markup should likely read more along the lines of:

    Code:
    <ul id="socialMenu">
    	<li>
    		<a href="http://amazon.com">
    			<img
    				src="/Images/AmPrime60_107.jpg"
    				alt="Buy our products on Amazon"
    			>
    		</a>
    	</li><li>
    		<a href="http://yahoo.com">
    			<img
    				src="../Images/GoodreadsIco_60_60.png"
    				alt="Visit us on Yahoo"
    			>
    		</a>
    	</li><li>
    		<a href="http://facebook.com">
    			<img
    				src="../Images/Facebook%20icon_60_60.png"
    				alt="Follow us on Facebook"
    			>
    		</a>
    	</li><li>
    		<a href="http://pinterest.com">
    			<img
    				src="../Images/pinterest_60_60.png"
    				alt="Visit us on Pinterest"
    			>
    		</a>
    	</li><li>
    		<a href="http://google.com">
    			<!-- img here -->
    		</a>
    	</li>
    </ul>
    With CSS along the lines of:

    Code:
    #socialMenu {
    	list-style:none;
    	text-align:center;
    }
    
    #socialMenu li,
    #socialMenu a,
    #socialMenu img {
    	/* not all browsers apply these three the same, so apply to all */
    	vertical-align:middle;
    }
    
    
    #socialMenu li {
    	display:inline;
    	padding-left:20px; /* or however far apart you want them */
    }
    
    #socialMenu li:first-child {
    	padding-left:0; /* kill off left padding on first one so they center as desired */
    }
    
    #socialMenu a {
    	text-decoration:none; /* kill off underline */
    }
    Boom, done. No goofy screwing around with unique padding on each one, no flex overcomplicating the behaviors, etc, etc. You just wanted to pad them apart horizontally, right? So just pad them apart!


    Though if I were coding the same thing I'd have all those images in a monolithic (single) file and apply them via the CSS. Said image would have them next to each-other rounded up to the nearest multiple of 8 pixels in width (so there's no scaling stripe of the next image). The markup for that would go something like:

    Code:
    <ul id="socialMenu">
    	<li class="amazon">
    		<a href="http://amazon.com">
    			Buy our products on Amazon
    		</a>
    	</li>
    	<li class="yahoo">
    		<a href="http://yahoo.com">
    			Visit us on Yahoo
    		</a>
    	</li>
    	<li class="facebook">
    		<a href="http://yahoo.com">
    			Follow us on Facebook
    		</a>
    	</li>
    	<li class="pinterest">
    		<a href="http://pinterest.com">
    			Visit us on Pinterest
    		</a>
    	</li>
    	<li class="google">
    		<a href="http://google.com">
    			Search this site on Google
    		</a>
    	</li>
    </ul>
    With the CSS along these lines:

    Code:
    #socialMenu {
    	list-style:none;
    	text-align:center;
    }
    
    #socialMenu li,
    #socialMenu a {
    	/* not all browsers apply these three the same, so apply to all */
    	vertical-align:middle;
    }
    
    
    #socialMenu li {
    	display:inline;
    	padding-left:20px; /* or however far apart you want them */
    }
    
    #socialMenu li:first-child {
    	padding-left:0;
    }
    
    #socialMenu a {
    	display:inline-block;
    	text-decoration:none; /* kill off underline */
    	text-indent:-999em; /* hide the text */
    	width:60px;
    	height:60px;
    	background:url(images/socialIcons.png) 0 0 no-repeat;
    }
    
    #socialMenu .amazon a {
    	width:107px;
    }
    
    #socialMenu .yahoo a {
    	background-position:-112px 0;
    }
    
    #socialMenu .facebook a {
    	background-position:-176px 0;
    }
    
    #socialMenu .pinterest a {
    	background-position:-240px 0;
    }
    
    #socialMenu .google a {
    	background-position:-304px 0;
    }
    Sliding the background around to reveal each piece of the larger image where desired, providing the fallback text for non "screen media" users (remember, use a bloody MEDIA attribute on your stylesheet LINK tag), and making the page load faster by reducing the number of separate images. (remember, each file past the first eight assume a real-world load-time overhead of an extra fifth of a second)

    Really fun is using this method you could even animate it to a second image without increasing the number of image files, just on hover slide it up/down with background-position and/or add a generated content faux-element to slide around, revealing the bottom half of a double-tall image.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  9. #9
    New to the CF scene
    Join Date
    Mar 2019
    Location
    India
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, Sunfighter for guiding me next time I will remember it.


 

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
  •