I am putting together a sidebar box for a friend of mine. I've sliced up the images to be used in the box for my friend wanted the inner text images to be links to different pages. You can view the box in progress here.

Below is the CSS I wrote for the divs and the divs themselves:

#container {
width: 261px;
margin: auto;
}

#top {
height: 82px;
margin: auto;
}

#leftside {
float: left;
width: 35px;
background: url(/img/buttonleft.gif) no-repeat;
height: 229px;
margin: auto;
}

#rightside {
float: right;
width: 35px;
background: url(/img/buttonright.gif) no-repeat;
height: 229px;
margin: auto;
}

#content {
margin: auto;
}

#footer {
clear: both;
height: 42px;
margin: auto;
}

<div id="container">
<div id="top"><img alt="Ads and Buttons" border="0" width="261" src="/img/buttonheader.gif" height="82" title="Ads and Buttons"/></div>
<div id="leftside"></div>
<div id="rightside"></div>
<div id="content">
<a href=""></img/designbutton.gif"></a>
<a href=""></img/makemyad.gif"></a>
<a href=""></img/resizemyad.gif"></a>
<a href=""></img/howtograb.gif"></a>
<a href=""></img/grabwpcom.gif"></a>
<a href=""></img/oneclick.gif"></a>
<a href=""></img/otheruses.gif"></a>
</div>
<div id="footer"><img border="0" width="261" src="/img/buttonbottom.gif" height="42"></div>
</div>

If you look at the box on the page I linked to above you'll see that everything seems to be working fine except for the bottom piece. For some reason I have a small gap above the footer image and it extends way out to the right.

I'm not a coder so if you have any suggestions or know of a better way to implement this please let me know.

Thanks.

Page not found error on your link.

Just looking at your code here, you should put those links in a proper unordered list and you shouldn't use images for navigation that way - it's inaccessible.

Originally Posted by LadynRed

Page not found error on your link.

Just looking at your code here, you should put those links in a proper unordered list and you shouldn't use images for navigation that way - it's inaccessible.

I got it working so I removed it from that test site. I made this for my friend and that's the way she wanted it done.