Home › Forums › CSS › Trying to position buttons in a footer › Re: Trying to position buttons in a footer
furrball1383ok so here are the images then I’ll show you the css and html i used to make it work
for some reason the image uploading site replaces the image names. The one at the top is HMenu-Sprites.png and the one below it is bg.png
both images are transparent png files. obviously not as good quality as what you should have since i was working with images you had put up that included guides and slices with labels, but once you see everything and understand how it works you can just position your images in place of the ones I’ve positioned and that should do the job for you.
Now for the html. Basically I have the footer as a div with the background image displayed in it. I then have the navigation in another div so that I could position it within the footer. This second div is necessary since I am using float:left; to have the list items represented horizontally.
On to the CSS
#footer {
height: 165px;
width: 905px;
background-image: url('../images/bg.png');
}
#buttons {
margin: 0px 0px 0px 170px;
}
ul#nav li {
display: inline;
top: auto;
}
ul#nav li a {
display: block;
width: 152px;
height: 165px;
text-decoration: none;
text-indent: -9999px;
float: left;
}
#clear {
clear: both;
}
ul#nav li.email a {
background: url('../images/nav/HMenu-Sprites.png');
background-position: 0px 0px;
}
ul#nav li.fb a {
background: url('../images/nav/HMenu-Sprites.png');
background-position: -152px 0px;
}
ul#nav li.twitter a {
background: url('../images/nav/HMenu-Sprites.png');
background-position: -304px 0px;
}
ul#nav li.rss a {
background: url('../images/nav/HMenu-Sprites.png');
background-position: -456px 0px;
}
ul#nav li.email a:hover {
background-position: 0px -165px;
}
ul#nav li.fb a:hover {
background-position: -152px -165px;
}
ul#nav li.twitter a:hover {
background-position: -304px -165px;
}
ul#nav li.rss a:hover {
background-position: -456px -165px;
}
And there you have it. This is what I had explained previously, and I did make it and test it to make sure it works before putting it up so hopefully you should be able to use this without much difficulty. Do not forget that you will have to change the targets for the files in the css depending on where you place them. Also if you decide to use your own images either work within the dimensions I have used or if you understand what I’ve done you can just use your own image with new dimensions and change the positioning for the sprites.
