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

[cherry_starr]

Ah okay, ill try that out! Thanks!!

Yeah but now my image map doesnt show up at all @_@
Just the Header image, and its covered by my entries, and still not centered

CODE

GLOBAL_HEAD<=
<style type="text/css">
<!--
/*GETS RID OF ICON*/
.shadowed img{
display:none;
}

/*HIDES YOUR NAVIGATION*/
table table table table .meta {visibility:hidden;position:absolute;top:1px}
table table table table table .meta {visibility:visible;position:relative;top:1px}

tr.caption{
display:none
}
.shadowed td div{
visibility: hidden;
position: absolute;
top: 1px
}



/*POSITION YOUR HEADER*/
#x{
position:absolute;
visibility: visible;top:0px;
width: 350px;
left:50%;
margin-left:-390px;
height: 300px;
}




/*YOUR SIDEBAR*/
#sidebar{
position:absolute;
top:120px;
left: 50%;
margin-left: 145px;
width: 225px;height: 100%;
visibility: visible;
z-index:2;
font-size:8pt;
text-align:justify;
}
#sidebar img{
display:inline;
}



/*BACKGROUND IMAGE*/
body {
background-color:#66CC9A;
background-image: url(http://i46.photobucket.com/albums/f103/cherrystarr_/3625.jpg);
background-attachment:fixed;
background-repeat: repeat;
}


/*YOUR ENTRIES*/
table, tr, td, .shadowed {
background: transparent;
}

table {
width: 510px;
left:50%;
margin-left:-240px;}

table table {
width: 100%;
margin:0;
}
table table table {
width: auto;
}


/*JUSTIFIES TEXT*/
.entrybox td{
position:relative;
text-align: justify;
}
.entrybox td.index, .entrybox td.comments{
text-align: right;
}

/*LINKS*/
a{
color: #ffffff;
}
a:hover{
color: #66CC9A;
}
-->
</style>
<=GLOBAL_HEAD

LASTN_WEBSITE<=

<!--YOUR SIDEBAR STUFF HERE-->
<div id="sidebar">
The text, links, and pictures you want in your sidebar.<br />
--------------------
<br />
I am going to put an image in this sidebar. Usually when you hide
your icon, you have to put a visibility code in every image you use.
That is not necessary with this layout. We have not hidden our icon,
we have DESTROYED it! It's gone. Not hiding. I just put a simple
code in the HEAD overrides that will allow all of the sidebar pictures
to show without extra code. Look:<br /><br />
<center>
<img src="http://pics.livejournal.com/carriep63/pic/0000rec6">
</center>
</div>

<!--This fixes a bug in Internet Explorer-->

<div id="x">
<!--HEADER IMAGE-->
<img src="http://i46.photobucket.com/albums/f103/cherrystarr_/ayumap.png" style="display:inline;">
</div>

<MAP NAME="name">
<div style="position:absolute; top:0%; left:50%; 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