Footer Image Links Not Showing

DamMac

08-05-2011, 01:46 AM

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:

<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>© Me 2011</strong></p>

</div>
</div>

CSS:

#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!

bullant

08-05-2011, 02:16 AM

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?

DamMac

08-05-2011, 02:19 AM

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!

bullant

08-05-2011, 02:32 AM

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

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

DamMac

08-05-2011, 02:50 AM

The most common way of creating image links is

<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!

bullant

08-05-2011, 03:20 AM

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.

<!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>

DamMac

08-05-2011, 02:47 PM

I've managed to get the images appearing by adding in display to my CSS code.
display: inline-block;

However, now it seems to be repeating the link in the corner of the page.

http://m.1asphost.com/bananarama/ScreenShot.png

Any ideas why?

resdog

08-05-2011, 06:41 PM

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.