Learning Report 6
Facebook Link/Precisely Positioning Images
Resource: http://www.ehow.com/how_2031214_badge-facebook.html
What did I learn?
I decided that a good way for visitors of my website to be able to contact me would be through facebook, which we all know is one of the more powerful and mainstream online social networks. Its something that people are very familiar with, and so users will feel comfortable making contact with me through this means.
In the process of creating the link, I ran into some difficulties getting the facebook icon to align correctly with the text, so I'll did some studying up on CSS image positioning. I found that I needed to used relative positioning so that I could position the image in relation to its parent <div> container.
How did I implement it?
There are lots of different ways you could create a link to your facebook page, but I decided I want to create a tiny facebook icon in my footer's navigation section. The tutorial basically guides you to facebook's "Badge Widget Creator," which I referred to a bit(to find my profile pages URL), but I used other resources as well. I also went on google and found that there are lots of free neat little "facebook buttons" to use. You can look around and find what suits you best, but here's the sight I grabbed my image from.
Next I threw some simple html code into my footer module to create an image hyperlink, using the new image and also the URL I found on facebook's widget creator:
<a href="http://www.facebook.com/people/Cory-Fugate/100000152284103" title="Cory Fugate">
<img src="/images/facebook.png" alt="facebook" /></a>
After creating the hyperlink, I found that the image wasn't aligning the way I wanted it to. Here's a screenshot of the problem I was having:
As always seems to be the case, some fancy css came to the rescue. I stumbled upon the help I needed on some discussion boards, but you can find better info about this on W3Schools.
Here's the code I used to fix the problem:
#footer img{
position: relative;
bottom: 8px;
left: 16px;
}
That's pretty much the whole process. You can see the finished product in my footer at the bottom of each page.
