Image Map Help Options

[cherry_starr]

I dont know what is wrong but i cannot get the image map to be centered over my entries, and the stuff behind it is still showing, which its not supposed to be. I got the sidebar to show up, FINALLY! But now i have this problem, here is my code:

CODE

GLOBAL_HEAD<=
<style type="text/css">
<!--

body {
background-color: #ffffff !important;
background-image: url(http://i46.photobucket.com/albums/f103/cherrystarr_/3625.jpg) !important;
background-repeat: repeat !important;
background-attachment: fixed !important;
background-position: 2% !important;
}

body, td, font, div, p {
font-family: "Century Gothic", "Arial", "Helvetica", sans-serif;
font-size: 8pt;
letter-spacing: 2pt;
font-color: #474747;
}

A:link {
color: #fd389d;
text-decoration:none
}

A:visited {
color: #fd389d;
text-decoration:none
}

A:hover {
color: #9ece1e;
cursor: crosshair;
font-family: times new roman, arial;
font-size: 12pt;
letter-spacing: -2pt;
text-transform: lowercase;
}

table {
width: 350px;
margin-left: 25%;
margin-right: 25%;
}
table table {
width: 100%;
margin:0;
}
table table table {
width: auto;
}

-->
</style>
<=GLOBAL_HEAD

LASTN_WEBSITE<=
<div style="position:absolute; top:20%; left: 80%; width: 150; height: 100%; visibility: visible;">
<br>
The text, links, and pictures you want in your sidebar.
<img src="http://i46.photobucket.com/albums/f103/cherrystarr_/BC1.gif">
</div>

<IMG SRC="http://i46.photobucket.com/albums/f103/cherrystarr_/ayumap.png" WIDTH=350 HEIGHT=300 BORDER=0 USEMAP="#yourmap" class="x">

<MAP NAME="name">
<div style="position:absolute; top:0%; left:25%; width:350; height:300;"><img src="http://i46.photobucket.com/albums/f103/cherrystarr_/ayumap.png" width="350" height="300" usemap="#01" border="0"><map name="01">

    <area shape="rect" alt="Journal" coords="126,296,193,280" href="http://smayzes.livejournal.com/" title="Journal">
<area shape="rect" alt="Friends" coords="194,296,265,280" href="http://smayzes.livejournal.com/friends" title="Friends">
<area shape="rect" alt="Calendar" coords="266,296,346,280" href="http://smayzes.livejournal.com/calendar" title="Calendar">
    </map></div>
</MAP>

<style type="text/css">
<!--
table table table table .meta {visibility: hidden}
table table table table table .meta {visibility: visible}
.x {
position:absolute; left:0; top:0; z-index: -10; }

.shadowed td div {
position: absolute;
top: 1px
}
-->
</style>
<=LASTN_WEBSITE

My journal: Here

[*Libertie*]

Actually, if you want it centered you might try following this tutorial:
http://www.livejournal.com/community/every...lj/3804169.html