Help me slice and code this footer? [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific mom开发者_StackOverflow社区ent in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 11 years ago.

Hee lads,

I'm now finished with my footer design and I sliced it up already but I just can't seem to find a good way to code this thing.. I sliced it up like 1px width and the headers separtly and also dont forget the spacers...

Can't fine a good way to code this thing damn Heres a picture to it.

http://imageshack.us/photo/my-images/51/footerws.jpg/

Would be really glad if someone could help :)

---

Like this :

http://jsfiddle.net/EQsAX/1/

It's like the picture you provided

---

This way you can use different positions of one image in different elements.

Note that it does even help to Not always slice images into small pieces. One perk is that the images load at the same time ( or image to be specific ). Especially in a menu hover effect.

http://jsfiddle.net/FyMW6/

CSS:

ul li { 
    background-image: url("http://lorempixum.com/g/400/200/");
    background-repeat: no-repeat;

    width: 100px;
    height:200px;
    float: left;

    border: 1px solid red;
}

.first { background-position: -30px -0px; }
.second { background-position: -100px -0px; }
.third { background-position: -50px 0px; }

-0px was unintentional mistake on my part.. use 0px

HTML:

<ul>
    <li class="first"></li>
    <li class="second"></li>
    <li class="third"></li>
</ul>