CSS Layout | add links to footer

Hey...I have been working on this and I am down to adding the "social networking" links in the bottom of the page. What would I add to put them in the correct place?

http://www.eight84.com/new/coding/


links should look like this:

http://www.eight84.com/new/index_new.jpg


Also how would I create a rounded background with hover effect? Like the links in the footer of the above image. Basically when you hover the rounded background should change to orange and the text to white. Any help and/or tips will be greatly appreciated.

 

Hi, i played with the layout..

you need another DIV inside the footer, like

<div id="footer">

<div id="footer_inside">
<a href="www.twitter.com"><img src="Twitter.jpg" /></a>
</div>

</div>

Code (markup):

then you can place the buttons with padding

#footer_inside {
margin:0 auto;
padding:500px 25px 25px;
width:900px;
background-color:#000;
}

Code (markup):

background color to be removed after that, for the button effects there are tons of examples

cheers

 

thanks..that makes a little more sense now!

 

Well I changed the image to text links...but how do I make them have a certain class? or style? for those boarders on the jpeg? Ive looked up a few css hover effects but I cant find something for that exact thing.

 

You can give the links a class, then use CSS to give the links a bg image and hide the text so only the bg image shows through...

So basically:

<div id="footer_inside"><a href="#">Twitter</a> <a href="#">Facebook</a></div>

Code (markup):

Would become:

<div id="footer_inside">
	<a href="#" [B]class="twit"[/B]>Twitter</a>
	<a href="#" [B]class="fb"[/B]>Facebook</a>
</div>

Code (markup):

And then the CSS used to control the links as described would be:

a.twit{
	display:block;
	float:left;
	width:zzpx;
	height:zzpx;
	background:url('linktoimg.png');
	text-indent:-999em;
}
a.fb{
	display:block;
	float:left;
	width:zzpx;
	height:zzpx;
	margin-left:20px;
	background:url('linktoimg.png');
	text-indent:-999em;
}

Code (markup):

You'd set the width's and height's to the dimensions of the images, and change the linktoimg to the correct location of the image...

As a brief description:
display:block; is required because <a>'s (anchors) are inline elements by default, and inline elements cannot be given dimensions, so we have to change it to a block element by setting: display:block;

However this creates a problem because block elements always appear on their own line underneath one another, like DIV's do. So we then add float:left; to make the two links appear on the same line next to each other rather than seperate...

Then text-indent:999em; is a trick used to hide the text off the page so the background image shows through!

I added a bit of a left-margin to the fb link to create a gap in-between the two links. You can set margins on them and the #footer_inside as required to create the gaps as needed so that the elements are positioned where you need them.

The technique used here is an image-replacement technique, because well it is replacing the text with an image as required. There are many different ways to do this, but the way described is probably the most commonly used (well by me anyhow)..but they all have their own pro's n con's!

 

thank again for your help!