oh. oh dear. mucho layout problemo., it's this thing with margins! Options

[lghtrfld64]

I simply cannot understand margins. I'm currently trying to construct a layout from an image i made. I just can't get it right though!

This is the code i used:

<!-- begin code provided by createblog.com --><br /><IMG NAME="Image60" SRC="http://img98.imageshack.us/img98/5349/naturalbeauty3sd.gif" WIDTH="756" HEIGHT="756" BORDER="0" USEMAP="#Image6"><br /><br /><MAP NAME="Image6"><br /><AREA SHAPE="rect" COORDS="425,48,471,66" HREF="http://www.xanga.com"><br /><AREA SHAPE="rect" COORDS="338,7,453,26" HREF="http://www.xanga.com/lghtrfldlayouts"><br /><AREA SHAPE="rect" COORDS="481,49,537,65" HREF="http://www.xanga.com/private"><br /><AREA SHAPE="rect" COORDS="546,49,582,65" HREF="http://www.xanga.com/claf"><br /><AREA SHAPE="rect" COORDS="593,50,637,65" HREF="http://www.xanga.com/signin.aspx"><br /><AREA SHAPE="rect" COORDS="649,51,705,63" HREF="http://www.xanga.com/logout.aspx"><br /></MAP><br /><br /></BODY><br /></HTML></body></html><style<br />type="text/css">body {  background-image: url(); <br />background-position: top left;  background-repeat:<br />no-repeat;  background-color: #795c52; <br />scrollbar-arrow-color: #ffffff;  scrollbar-track-color:<br />#795c52;  scrollbar-shadow-color: #795c52; <br />scrollbar-face-color: #795c52;  scrollbar-highlight-color:<br />#795c52;  scrollbar-darkshadow-color: 795c52; <br />scrollbar-3dlight-color: 795c52;   }.leftmoduletitlebar,<br />.leftmoduleborder, .leftmoduleinterior, table.left, table.left TH,<br />table.left TD, table.navigation, table.footer {display: none;}.left,<br />.blogbody, table.footer, .standard, .leftmodulefontcolor, td, p, body,<br />{/* edits main text */  font:normal 9pt Arial;  line-height:<br />8pt;  color:#ffffff;  letter-spacing:0px; <br />text-align:left;  }div.blogheader, .caption {/* edits the dates<br />*/  font-family:Arial;  text-transform:lowercase; <br />font-size:9pt;  font-weight:bold;  color:#ffffff; <br />background-image: url();  border-bottom: 0px transparent; <br />text-align: left;  width:470px;  }table.footer TD {/* this<br />makes the footer at the bottom centered *//* leave it alone unless you<br />know what to do*/  text-align: left;  }input, select,<br />textarea, .textfield, .button {/* this edits the buttons, dropdowns,<br />etc. */ border: 0px solid #transparent; font-family:<br />Arial; font-size: 9pt; line-height: 8pt; color:<br />#ffffff; background-color:<br />#transparent; letter-spacing:0px; }a:link, .footernav.link,<br />a.footernav:link, a.footernav:active {/* edits all links */ <br />color:#ffffff;   font:normal 9pt Arial;  line-height:<br />8pt;  font-weight:normal;  text-decoration: none; <br />}a:visited, a.footernav:visited,  {/* edits the links that the<br />user has visited */  color:#ffffff;   font:normal 9pt<br />Arial;  font-weight:normal;  line-height: 8pt; <br />text-decoration: line-through;  }a:hover {/* edits when user mouseovers<br />the links */  color:#000000;  font:normal Arial; <br />font-weight:normal;  line-height: 8pt;  text-decoration:<br />line-through;  }input, select, textarea, .textfield, .button {/* this<br />edits the buttons, dropdowns, etc. */  border: 0px solid<br />#transparent;  font:normal 9pt arial;  line-height:<br />8pt;  background-color: transparent; <br />letter-spacing:0px;  color: #ffffff;  }table.blogbody {/*<br />this edits the other the place where the  blog is */ <br />background-color: #transparent;  border: 0px solid transparent;<br />  border-top: none;  width:352px; <br />}.#rblEprops{display:none;}#pnlEnabled table, #htmleditor,<br />#lblTimeZone, #pnlEprops, #rblEprops /* width of the comment page I<br />suggest miking it the same width as the blogbody*/{width:<br />352px;}table.search TD, table.search, table.announcements {/* border of<br />search bar (if you have it) */  background-image: url();  <br />border: 0px solid #transparent;  }table.search TD,<br />table.announcements TH {/* this should be left alone *//* unless you<br />know what to do */  border: 0px solid transparent; <br />}table.navigation, table.main, table.footer {/* the width of your blog<br />with modules */  width: 352px;  }table.navigation,<br />table.footer {  background-color:#transparent;  border: 0px<br />solid transparent;  display: none  }hr {/* horizontal divider<br />*/  border: 0px solid #75d321;  display:none; <br />}table.blogbody tr td {/* this edits the left margin of blog */ <br />width:350px;  padding: 0px;  }table.blogbody div.smalltext{/*<br />this edits the blog entry footer */  text-align: left;  }hr<br />{ display: none; } .table.footer,table.navigation {display:<br />none;}td.mainleft { display:none }table.left { display:none<br />}table.footer { display:none }.leftmoduletitlebar { display:none<br />}.leftmoduleborder { display:none }table.navigation { display:none<br />}</style><div align="center" class="blog"><!-- begin<br />code provided by createblog.com --><div style="overflow:<br />auto;width: 352px;height: 700px;margin-top: -295px;margin-right:<br />65px;"> <!-- end code provided by createblog.com<br />--><align="center"><style type="text/css"> text-align:<br />justify;color: #solid transparent;<br />  border-top: none;  width:470px; <br />}.#rblEprops{display:none;}#pnlEnabled table, #htmleditor,<br />#lblTimeZone, #pnlEprops, #rblEprops /* width of the comment page I<br /><br />suggest miking it the same width as the blogbody*/{width:<br />470px;}table.search TD, table.search, table.announcements {/* border of<br />search bar (if you have it) */  background-image: url();  <br />border: 0px solid #transparent;  }table.search TD,<br />table.announcements TH {/* this should be left alone *//* unless you<br />know what to do */  border: 0px solid transparent; <br />}table.navigation, table.main, table.footer {/* the width of your blog<br />with modules */  width: 470px;  }table.navigation,<br />table.footer {  background-color:#transparent;  border: 0px<br />solid transparent;  display: none  }hr {/* horizontal divider<br />*/  border: 0px solid #75d321;  display:none; <br />}table.blogbody tr td {/* this edits the left margin of blog */ <br />width:0px;  padding: 0px;  }table.blogbody div.smalltext{/*<br />this edits the blog entry footer */  text-align: left;  }hr<br />{ display: none; } .table.footer,table.navigation {display:<br />none;}td.mainleft { display:none }table.left { display:none<br />}table.footer { display:none }.leftmoduletitlebar { display:none<br />}.leftmoduleborder { display:none }table.navigation { display:none<br />}</style><div align="center" class="blog"><!-- begin<br />code provided by createblog.com --><div style="overflow:<br />auto;width: 510px;height: 278px;margin-top: -295px;margin-right:<br />-2px;"> <!-- end code provided by createblog.com<br />--><align="center"><style type="text/css"> text-align:<br />justify;color: #795c52}STRONG {COLOR:#795c52}--></style><br /><br /></body></html><divstyle="position:static;<br />margin-left:500px;margin-top:-656px;border: 0px solid #000000; width:<br />500px; height:700px;background: none; overflow: auto"><!-- end<br />code provided bycreateblog.com --><STYLE<br />type="text/css">  <br />BODY{scrollbar-3dlight-color:#795c52;         <br />scrollbar-arrow-color:#ffffff;         <br />scrollbar-base-color:#795c52;         <br />scrollbar-track-color:#795c52;         <br />scrollbar-darkshadow-color:#795c52;         <br />scrollbar-face-color:#795c52;         <br />scrollbar-highlight-color:#795c52;         <br />scrollbar-shadow-color:#795c52}   </STYLE><br /><!-- end code provided by createblog.com -->

to SEE my failed HTML work in action, go to the site:

www.xanga.com/nb64



Any help would render me supremely, hugely, and eternally grateful.

[Kenado]

I fixed upp all the divs and stuff here thry this i only coded the bg and and crollbar since those were the only things i saw

<!-- begin code provided by createblog.com --><br /><!-- end code provided by createblog.com --><br /><br /><!-- begin code provided by createblog.com --><br /><IMG NAME="Image60" SRC="http://img98.imageshack.us/img98/5349/naturalbeauty3sd.gif" WIDTH="756" HEIGHT="756" BORDER="0" USEMAP="#Image6"><br /><br /><MAP NAME="Image6"><br /><AREA SHAPE="rect" COORDS="425,48,471,66" HREF="http://www.xanga.com"><br /><AREA SHAPE="rect" COORDS="338,7,453,26" HREF="http://www.xanga.com/lghtrfldlayouts"><br /><AREA SHAPE="rect" COORDS="481,49,537,65" HREF="http://www.xanga.com/private"><br /><AREA SHAPE="rect" COORDS="546,49,582,65" HREF="http://www.xanga.com/claf"><br /><AREA SHAPE="rect" COORDS="593,50,637,65" HREF="http://www.xanga.com/signin.aspx"><br /><AREA SHAPE="rect" COORDS="649,51,705,63" HREF="http://www.xanga.com/logout.aspx"><br /></MAP><br /><br /><!-- begin code provided by createblog.com --><br /><br /><style type="text/css"><br />.#rblEprops{display:none;}<br />#pnlEnabled table, #htmleditor, #lblTimeZone,<br />/* width of the comment page */<br />{width:245px;}<br />.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer <br />{display: none;} <br /></style><br /><br /><!-- end code provided by createblog.com --><br /><br /><!-- begin code provided by createblog.com --><br /><br /><style type="text/css"><br />/* Name of Your Skin - By You*/<br />body <br />{background-color: #795c52;<br /><br />scrollbar-arrow-color: #ffffff;<br />scrollbar-track-color: #795c52;<br />scrollbar-shadow-color: #795c52;<br />scrollbar-face-color: #795c52;<br />scrollbar-highlight-color: #795c52;<br />scrollbar-darkshadow-color: #795c52;<br />scrollbar-3dlight-color: #795c52;}<br /><br />/* edits the date */<br />div.blogheader, .caption <br />{background-image: url();<br />background-repeat:no-repeat;<br />background-position:center;<br />font-family: FONT FAMILY;<br />text-transform:none;<br />font-size:#px;<br />line-height:#px;<br />font-weight:normal;<br />color:#COLOR CODE;<br />letter-spacing:2px;<br />background-color:#COLOR CODE;<br />text-align:center;<br />border:1px solid #COLOR CODE;}<br /><br />.blogbody b, .standard b, p b, strong {<br />/* edits bolded text in your entry */<br />font-weight: bold;<br />color: #COLOR CODE;}<br /><br />input, select, textarea, iframe.htmleditor, .textfield, .button {<br />/* this edits the buttons, dropdowns, etc. */<br />border: #px solid #COLOR CODE;<br />font:normal #px FONT FAMILY;<br />background-color: #COLOR CODE;<br />font-color:#COLOR CODE;}<br /><br /> table.footer TD {<br />/* this makes the footer at the bottom centered */<br />/* leave it alone unless you know what to do*/<br />text-align: center;}<br /><br />table.left th {<br />/* on your menu module, this edits the title part of it */<br />/* like BLOGRINGS, POSTING CALENDAR, etc */<br />background-image: url();<br />background-color:none;<br />color: #COLOR CODE;<br />font: bold #pt FONT FAMILY;<br />text-transform: none;<br />text-align:center;<br />border: #COLOR CODE #px solid;}<br /> <br />table.left { <br />/* this edits the menu module */<br />width:180px;<br />color:000000;<br />background-color:#COLOR CODE;<br />BORDER: #COLOR CODE #px solid;}<br /><br />font,td,p,xmp<br />{color:#COLOR CODE;<br />font-face: FONT FAMILY;<br />font-weight:normal;<br />font-size:#pt;<br />text-align:justify;}<br /><br />table.blogbody tr td { <br />/* this edits the left margin of blog */ <br />width:0px; <br />padding-left: 0px;} <br /><br />table.blogbody {<br />/* this edits the other the place where the  blog is */<br />background-color:transparent;<br />family-font: FONT FAMILY;<br />BORDER: #COLOR CODE #px solid;<br />width:###px;} /* <-- The width for this should be around 5-15 pixels less then the width for your blog's div layer. */ <br /><br />a:link<br />{line-height: #pt; <br />font-family: FONT FAMILY;<br />font-weight:normal; <br />color:#COLOR CODE; <br />text-transform:none;<br />font-size:#pt; <br />cursor:crosshair;}<br /><br />a:active<br />{font-family: FONT FAMILY; <br />color:#COLOR CODE; <br />text-transform:none;<br />font-size:#pt; <br />cursor:crosshair;}<br /><br />a:visited<br />{font-family: FONT FAMILY; <br />color:#COLOR CODE; <br />text-transform:none;<br />text-decoration:strikeout;<br />font-size:#pt;<br />cursor: crosshair;}<br /><br />A:hover {font-family:FONT FAMILY;<br />color:#COLOR CODE;<br />text-transform: uppercase; <br />cursor: crosshair; <br />font-weight:bold;<br />font-size:#pt}</style><br /><br /><!-- end code provided by createblog.com --><br /><!-- begin code provided by createblog.com --><br /><br /><div style="overflow: auto; width: 500px; height: 630px; margin-top: -680px; margin-left: 150px;"><br /><!-- end code provided by createblog.com -->