Resizable fixed footer with absolute elements within it - html

Question

I want to make my fixed footer resizable on my 320px viewport, together with the absolute elements inside it.
I manage to get the footer div resizable, but the elements inside it doesn't seems to stick within the footer div when i resize the windows.
Note: I'm trying to create a footer with a background image. This image have some clickable areas which i created using the unordered list.
Here is my HTML Code:
<footer>
<ul>
<li>Shoot Me
</li>
<li>Facebook
</li>
<li>Tumblr
</li>
<li>Instagram
</li>
<li>E-mail
</li>
</ul>
</footer>
Here is my CSS Code:
footer{
z-index:21;
display:block;
position:fixed;
bottom:0;
left:0;
right:0;
padding:0;
width:1280px;
height: 426px;
max-width: 100%;
background:url(../images/layout/footer.png) no-repeat center bottom;
background-size: 100%;
margin:0 auto;
pointer-events:none;
}
footer ul li {
display: inline;
width: 14%;
}
footer ul li img {
border: none;
padding-left: 8px;
}
footer ul li a.shootme-link{
position:absolute;
bottom:200px;
left:1080px;
width: 151px;
height: 33px;
background:url(../images/layout/shootme.png) bottom;
pointer-events:auto;
/* Hide the text. */
display: inline-block;
overflow: hidden;
font-size: 0px;
}
footer ul li a.shootme-link:hover {
background-position: 0 0;
}
footer ul li a.facebook-link {
position:absolute;
width:33px;
height:29px;
bottom:40px;
left:970px;
pointer-events:auto;
/* Hide the text. */
display: inline-block;
overflow: hidden;
font-size: 0px;
}
footer ul li a.tumblr-link {
position:absolute;
width:33px;
height:29px;
bottom:40px;
left:980px;
pointer-events:auto;
/* Hide the text. */
display: inline-block;
overflow: hidden;
font-size: 0px;
}
footer ul li a.instagram-link {
position:absolute;
width:33px;
height:29px;
bottom:40px;
left:1030px;
pointer-events:auto;
/* Hide the text. */
display: inline-block;
overflow: hidden;
font-size: 0px;
}
footer ul li a.mail-link {
position:absolute;
width:33px;
height:29px;
bottom:40px;
left:1055px;
pointer-events:auto;
/* Hide the text. */
display: inline-block;
overflow: hidden;
font-size: 0px;
}
I'm still very much noob in CSS3 so i hope someone could enlighten me on this and pardon for my bad English. Hope it's not that confusing. Thanks
Here is the fiddle: http://jsfiddle.net/5JWG5/
Full screen fiddle: http://jsfiddle.net/5JWG5/embedded/result/

Answer 1

Ok, I Hope this help you, first:
it's easier using divs instead of a list, so we can achieve the location of the elements better.
<footer>
<div class="shootme-link">
Shoot Me
</div>
<div class="social">
<a class="facebook-link" href=" " target="_blank" >Facebook</a>
Tumblr
Instagram
E-mail
</div>
</footer>
as you can see, i also reduce the number of classes, instead using one for each element, now i'm using just one name it "social", this will be a Div box that will nest the link elements.
Then, we will point to the links inside that div to give them size and we will float all to the left. using display: inline-block and text-align: left; (you could also use display: block; and float: left; but the you should give them a margin)
this is the new CSS
footer{
z-index:21;
display:block;
position: absolute;
margin: 0 auto;
bottom:0;
left: 0;
right: 0;
width:1280px;
height: 426px;
max-width: 100%;
background:url("http://jennisa.com/images/layout/footer.png") no-repeat right bottom;
background-size: cover;
pointer-events:none;
}
footer > .shootme-link {
display: block;
position:absolute;
bottom:200px;
right: 50px;
width: 151px;
height: 33px;
background:url("http://jennisa.com/images/layout/shootme.png") bottom;
pointer-events:auto;
/* Hide the text. */
text-indent: -999px;
overflow: hidden;
}
footer > .social {
position: absolute;
width: 163px;
height: 32px;
bottom: 46px;
right: 163px;
pointer-events: auto;
}
footer > .social > a {
background-color: blue;
width:33px;
height:29px;
display: inline-block;
text-align: left;
pointer-events:auto;
/* Hide the text. */
text-indent: -999px;
overflow: hidden;
}
there is a jsfiddle
for the background size I use the attribute cover instead 100% because this will kep the proportions of the image to cover all the div and also i positioned the image to the right, because is there where the elements are (the elements also are positioned absolute since the right.
you just delete background-color: blue; from the links (I used it to point the changes visually)
Hope this help you.

Answer 2

I'm not shure of what you're trying to do, i speak spanish, if that language works for you, you could explain better in it.
anyway, i think you could use position: relative; instead of position:absolute;.
"inline-block" has text capabilities, so you can use text-align: center; or use display:block; and float everything to the left.
but i don't see the point of "float" your elements if give them an absolute position.. may be you could use jsfiddle to explain your point better with an example.
is not necessary to use max-width: 100%;you just put the width at 100% of the size and declare the minimun width size, for example "320px" and the div will not be smaller than this size.
Hope this help you :)