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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Footer Image Links Not Showing

    I'm having a slight problem with my image links, they aren't appearing on my page at all. I was wondering if anyone could tell me where I've gone wrong?

    HTML:
    Code:
    <div id="footer">
    <div id="footercontainer">
    
    <a href="http://www.facebook.com/" target="_blank" class="facebook" alt="Facebook Icon" />
    
    <a href="http://twitter.com/" target="_blank" class="twitter" alt="Twitter Icon" />
    
    <a href="http://www.youtube.com" target="_blank" class="youtube" alt="YouTube Icon" />
    
    <a href="http://www.linkedin.com/" target="_blank" class="linkedin" alt="LinkedIn Icon" />
    
    <p id="footertext"><strong>&copy; Me 2011</strong></p>
    
    </div>
    </div>

    CSS:
    Code:
    #footer {
    background: url('images/footer.png');
    margin-left: -8px;
    margin-right: -8px;
    height: 70px;
    margin-top: 330px;
    margin-bottom: -10px;
    }
    
    #footercontainer {
    width: 700px;	
    margin: 0px auto;
    }
    
    
    a.linkedin {
    background-image: url(images/twittergrey.png); 
    width: 50px;
    height: 50px;
    margin: 0px auto;
    background-repeat: no-repeat;
    }
    
    a.linkedin:hover {
    background-image: url(images/twitter.png);
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    }
    
    
    a.youtube {
    background-image: url(images/twittergrey.png); 
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    }
    
    a.youtube:hover {
    background-image: url(images/youtube.png);
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    }
    
    a.facebook {
    background-image: url(images/facebookgrey.png); 
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    }
    
    a.facebook:hover {
    background-image: url(images/facebook.png);
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    }
    
    a.twitter {
    background-image: url(images/twittergrey.png); 
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    }
    
    a.twitter:hover {
    background-image: url(images/twitter.png);
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    }
    I've been trying to work out what the problem is for hours now... and have run out of things to try and make it work! I just cant see why it isnt working!

    Knowing my luck its probably something simple!

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    The relative paths to images in your css file need to be relative to the folder the css file is in and not the folder the html file is in. Have you checked that?

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes I've checked that and it's all fine.

    The links seem to be there, as when I hover over some of the footer, the link comes up at the bottom of the page... but no images at all!

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    ok, I've had a closer look at your html and I'm not sure that marking up anchors as <a href="whatever" /> is valid. Anchors are normally marked up as
    <a href="xxxxxxx">some content</a>

    The most common way of creating image links is

    Code:
    <a href="where_ever">
        <img src='myPic.jpg' alt='' />
    </a>

  • #5
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bullant View Post
    The most common way of creating image links is

    Code:
    <a href="where_ever">
        <img src='myPic.jpg' alt='' />
    </a>
    Funnily enough, that's how I did the image links first of all. They came up fine when I did it that way... but I couldn't get them to hover!

    That's when I decided to look back at an older code that I'd used which worked correctly and use it here... but obviously it's not working this time!

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    also, with <a>'s being an inline and not block level elements, specifying a height will not work.

    If you want to use background images on the <a>s, try displaying them as 'block' and then set a height something along these lines.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #linksContainer a {
                    display: block;
                    width: 100px;
                    height: 100px;
                }
                #link1 {
                    background-image: url('num1.jpg');
                }
                #link1:hover {
                    background-image: url('num2.jpg');
                }
            </style>
            <script type="text/javascript"></script>
        </head>
        <body>
            <div id="linksContainer">
                <a id="link1" href="wherever"></a>
            </div>
        </body>
    </html>

  • #7
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've managed to get the images appearing by adding in display to my CSS code.
    Code:
    display: inline-block;
    However, now it seems to be repeating the link in the corner of the page.



    Any ideas why?

  • #8
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    which corner are you referring to?

    Since you've made several updates to your code, can you post the new code?

    My guess is that you have more <a href> tags in there.


  •  

    Posting Permissions

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