Help! I'm so fustrated!, Does anyone have the "Div" code for xanga?? Options

[kounyia]

Okay..well I've been making layouts for a while now..but I'm trying something new....This is so confusing! I have the pictures and scroll bar and everything else done but the Navigation...how would you make it so the letters at the top are the links? I know you use cordnates but how do you find the cordnates?

If anyone can help I'll be really REALLY greatful! Thanks

here' the code if you want to look at it....

~*edit*~
I figured out the Div code I just need the Navigation...-_-;


<!-- Custom Colored Scrollbars : blogring-->
<style type="text/css">
<!--
BODY {
background-color: #ffffff;
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #D95A45;
scrollbar-highlight-color: #D95A45;
scrollbar-3dlight-color: #D95A45;
scrollbar-darkshadow-color: #D95A45;
scrollbar-track-color: #ffffff;
scrollbar-arrow-color: #D95A45;
-->
</style>
<!-- End Script: blogring-->
<style type="text/css">
/*Thoughts of you make me blush*/
/*Created By Kounyia*/
/*Designer <a href='http://www.xanga.com/xXxdreams_n_wishesxXx*/' target='_blank'>http://www.xanga.com/xXxdreams_n_wishesxXx*/</a>
/* <a href='http://blogring' target='_blank'>http://blogring</a> */
body {

scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #D95A45;
scrollbar-highlight-color: #D95A45;
scrollbar-3dlight-color: #D95A45;
scrollbar-darkshadow-color: #D95A45;
scrollbar-track-color: #ffffff;
scrollbar-arrow-color: #D95A45;
}
.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p {
/* edits main text */
font:normal 11px arial;
line-height:12px;
color:#000000;
letter-spacing:0px;
text-align:justify;
}

table.footer TD {
/* this makes the footer at the bottom centered */
/* leave it alone unless you know what to do*/
text-align: center;
}

div.blogheader, .caption {
/* edits the dates */
width:283px;
font-family:arial;
text-transform:uppercase;
font-size:18px;
line-height:20px;
font-weight:bold;
color:#ffffff;
letter-spacing:0px;
text-align:center;
background-color: #transparent;
border: 0px solid #ffffff;
border-width: 0px 0px 0px 0px;
}

a:link, .footernav.link, a.footernav:link, a.footernav:active {
/* edits all links */
color:#ffffff;
font:normal 11px arial;
line-height:10px;
text-decoration: none;
}

a:visited, a.footernav:visited, {
/* edits the links that the user has visited */
color:#C5523F;
font:normal 11px arial;
line-height:10px;
text-decoration: none;
}

a:hover {
/* edits when user mouseovers the links */
font:bold 11px Trebuchet ms;
line-height:12px;
text-transform: uppercase;
cursor: crosshair;
text-decoration: static;
color:#D95A45;
filter:shadow(color=#ffffff, strength=2, direction=135);
}

input, select, textarea, .textfield, .button {
/* this edits the buttons, dropdowns, etc. */
border: 1px solid #ffffff;
font:normal 11px Comic sans Ms;
background-color: #transparent;
letter-spacing:0px;
color: #D95A45;
}

table.left {
/* this edits the menu module */
border: 0px solid #ffffff;
width:20px;
background-color: #Transparent;
}

table.blogbody {
/* this edits the other the place where the blog is */
border: 0px solid ffffff;
border-width: 1px 0px 0px 0px;
background-color: #transparent;
width:300px;
}

table.left th {
/* on your menu module, this edits the title part of it */
/* like BLOGRINGS, POSTING CALENDAR, etc */
background-image: url();
background-color: #Transparent;
font: bold 11px comic sans ms;
text-transform: uppercase;
color: #ffffff;
border: none;
}
table.left TD {
/* on your menu module, this edits the body part of it */
background-image: url();
background-color: #Transparent;
border: none;
}

table.search TD, table.search, table.announcements {
/* border of search bar (if you have it) */
background-color: #Transparent;
border: 0px solid #ffffff;
}
table.search TD, table.announcements TH {
/* this should be left alone */
/* unless you know what to do */
border: 0px solid #ffffff;
}
table.navigation, table.main, table.footer {
/* the width of your blog with modules */
width: 50px;
}
.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer, hr {
/* hiding */
display:none;
}
b, strong, i, u, {
/* edit colors when bold italic underline */
font-family: tahoma;
font-size: 8pt;
color: #ffffff;
font-weight: bold;
text-transform: none;
}
#htmleditor, {
height:125;
border : 2x solid #000000;
}
#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops {
width:250px;
}

</style>


<img border="0" src="http://www.uploadfile.info/uploads/e28417ac29.gif" width="755" height="600">
<div align=left><DIV style="margin-top: -450px;
margin-right:140px;
margin-left:445px;
width:525px;
OVERFLOW: auto;
height:385px;
BACKGROUND-COLOR: transparent">

[Curious Kat]

[font=Century Gothic]Normally for coordinants I use a program.
Without the program all you can do is guess and check I think.
JavaScript is a pain in the butt though.

[kounyia]

What kind of program do you need? Whats the name?

[talcumpowder]

One that does image mapping. You could just google. "free image mapping program" or something similar, it'll pop up with tons of results.

Or did you not know it was called image mapping? Well, you do now. By the way, study layouts so you get an idea of the basic stucture. ^_^ It's a lot easier to learn like that.

[Gypsy Eyes]

you can use ms paint for image mapping, just open the image and hold your cursor over the point. The numbers will show up in the bottom left corner

[kounyia]

Thanks a bunch!! ^_^