hawktalk,
You’re looking for this:
#hawkberry #footer a {
width: 800px;
height: 200px;
display: block;
background: url('images/strawberry-footer-ro.jpg') no-repeat 0 0;
color: #000;
}
#hawkberry #footer a:hover {
background: url('images/strawberry-footer.jpg') no-repeat 0 0;
}
Please add the correct width and height. Your footer code should now look something like this:
<div id="footer" class="clear center">
<a href="http://www.facebook.com/profile.php?id=100000247809024&ref=profile"/>
</div>
well that got rid of it all…
hawktalk,
Looks like you’re getting it. Remove the H2 tag and the link hidden there then remove the #footer-link style from your style sheet and you’re all set.
It doesn’t show the footer at all anymore. And when I take off display: block;, then it kinda does what I want, but it completely moves the footer
hawktalk,
Just missed you check the comment above. The background is repeating because of the H2 tag’s link. If this is necessary we can target it specifically but it doesn’t seem to be doing anything.
Okay, I did that.. Now it shows 2 footers..?
Woah, now it works. Okay next question.. Thank you so much for your help!
I have a link for facebook now, but what if I wanted to put another image in the footer and link it to Twitter for example?
hawktalk,
I’ve been cheering you on 🙂 Looks like you removed the h2 tag which removed the second footer. Hopefully that was an older comment.
Yes thank you so much! I posted another question above, if you have any knowledge on that, please let me know 🙂 Thanks again!
hawktalk,
Do you know where in the code the previous Facebook and Twitter images are currently? They seem to be outside the Page content which makes me think they would be located at the bottom of the footer.php file. Looks as easy as copying the code from the previous link and creating a new image for the next social media icon.
They were located in footer.php about two seconds ago, but I just deleted them cause they weren’t relevant anymore.
I wanted it to be all one image though. Like before, I just had the footer, and I combined the Facebook logo into the footer image together in photoshop. Now, it is a rollover link so whenever you click anywhere on the footer, you go to facebook. If I wanted to combine the footer (the new footer image with facebook logo) and a twitter logo, how would i make it to where you can scroll over the facebook logo and only the facebook logo changes. Then you scroll over the twitter logo and only the twitter logo changes. And each would have separate links
The site I’m looking at that I really like is http://www.relevantstudents.com/index.php and if you look at the bottom, that is the look I am trying to go for
hawktalk,
In that web site the two footer links are two completely separate rollovers. Your website currently is only utilizing one and you only get one link per rollover.
If you would like two rollovers. Make the red footer background a static background image and the Facebook and Twitter images position: relative in a new div. This would allow multiple social media rollovers.
Something to this effect:
<div id="footer" class="clear center">
<div class="facebook"><a href="facebook.com"></a></div>
<div class="twitter"><a href="twitter.com"></a></div>
</div>
#footer would have a static background image and the other two would be rollovers positioned relatively within the footer div.
Okay, what code would you have to do to make it static? This is the first time I’ve dealt with background images and footers so sorry about all the questions!
hawktalk,
No worries.
#footer {
width: 800px;
height: 70px;
background: url(images/strawberry-footer.jpg) no-repeat 0 0;
}
Check the width and height on that. The image would then only be a single strawberry footer image with no Facebook logo. Since we have no :hover style it is static.
awesome! thanks again so much 🙂
