Div Layering, Adding Another Div Layer Options

[REBELIOUSWEETHEA...]

I read 'How To Make A Skin'..And according to the tutorial it tells you to enter this code to make another div layer for your profile information;

<!-- begin code provided by createblog.com --><br /><div style="overflow: auto; width: ###px; height: ###px; margin-top: ###px; margin-left: ###px;"><b>About Me</b><br>Name: John Smith<br>Age: 20<br>Birthday: January 1<br>Hobbies: Farting<Br>Expertise: Computer Programming</div><br /><!-- end code provided by createblog.com -->

I used that code, And I am having trouble getting the layer to move to where I want it. Here is my current code;

<!-- begin code provided by createblog.com --><br /><! -- PROFILE --><br /><div style="overflow: hidden; width: 200px; height: 200px; margin-top:200px; margin-left: 100px;"><b>About Me</b><br>Name: JJ Smith<br>Age: 14<br>Birthday: January 1<br>Hobbies: Layouts<Br>Expertise: Computer Programming</div><br /><! -- PROFILE --><br /><br /><br /><! -- LAYOUTIMAGE --><br /><div style="overflow: hidden; width:984; height:605; margin-top:10px; margin-left:-5px;"><img src="http://i4.photobucket.com/albums/y129/RebeliousLayouts/music_mychemicalromance.gif"></div><br /><!-- ENDLAYOUTIMAGE --><br /><br /><!-- BLOGPLACEMENT --><br /><div style="overflow-y: auto; overflow-x: hidden; width: 340px; height: 518px; margin-top: -585px; margin-left: -620px;"> <br /><!-- ENDBLOGPLACEMENT --><br /><br /><!-- REMOVEFOOTER --><br /><br /><style type="text/css"><br />table.navigation, table.footer { display:none; }<br /></style><br /><br /><!-- ENDREMOVEFOOTER --><br /><br /><!-- REMOVEMODULE --><br /><br /><style type="text/css"><br />.#rblEprops{display:none;}<br />#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops <br />/* width of the comment page */<br />{width:230px;}<br />.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer <br />{display: none;} <br /></style><br /><br /><!-- ENDREMOVEMODULE --><br /><br /><!-- STYLE --><br /><br /><style type="text/css"><br />/*To The End, My Chemical Romance BY RebeliousLayouts@Xanga*/<br />body <br />{background-color: #FFFFFF;<br /><br />scrollbar-arrow-color: #COLOR CODE;<br />scrollbar-track-color: #COLOR CODE;<br />scrollbar-shadow-color: #COLOR CODE;<br />scrollbar-face-color: #COLOR CODE;<br />scrollbar-highlight-color: #COLOR CODE;<br />scrollbar-darkshadow-color: #COLOR CODE;<br />scrollbar-3dlight-color: #COLOR CODE;}<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: Old English Text MT;<br />text-transform:none;<br />font-size:12px;<br />line-height:14px;<br />font-weight:bold;<br />color:#791F1F;<br />letter-spacing:1px;<br />background-color: transparent;<br />text-align:center;<br />border:1px solid #000000;}<br /><br />.blogbody b, .standard b, p b, strong {<br />/* edits bolded text in your entry */<br />font-weight: bold;<br />color: #FFFFFF;}<br /><br />input, select, textarea, iframe.htmleditor, .textfield, .button {<br />/* this edits the buttons, dropdowns, etc. */<br />border: 1px solid #FF0000;<br />font:normal 10px Century Gothic;<br />background-color: transparent<br />font-color:#000000;}<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: #000000;<br />font: bold 9pt century gothic;<br />text-transform: none;<br />text-align:center;<br />border: #000000 1px solid;}<br /> <br />table.left { <br />/* this edits the menu module */<br />width:180px;<br />color:000000;<br />background-color: transparent;<br />BORDER: #000000 1px solid;}<br /><br />font,td,p,xmp<br />{color:#000000;<br />font-face: century gothic;<br />font-weight:normal;<br />font-size:9pt;<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: century gothic;<br />BORDER: #FFFFFF 1px solid;<br />width:323px;}<br /><br />a:link<br />{line-height: 10pt; <br />font-family: century gothic;<br />font-weight:normal; <br />color:#FFFFFF; <br />text-transform:none;<br />font-size:9pt; <br />cursor:crosshair;}<br /><br />a:active<br />{font-family: century gothic;<br />font-weight:normal; <br />color:#FFFFFF; <br />text-transform:none;<br />font-size:9pt; <br />cursor:crosshair;}<br /><br />a:visited<br />{font-family: century gothic;<br />font-weight:normal; <br />color:#FFFFFF; <br />text-transform:none;<br />font-size:9pt; <br />cursor:crosshair;}<br /><br />A:hover {font-family: century gothic;<br />font-weight:normal; <br />color:#AD0404; <br />text-transform:none;<br />font-size:9pt; <br />cursor:crosshair;}</style><br /><br /><!-- ENDSTYLE --><br /><br /><!-- HIDEDIVIDER --><br /><style type="text/css"><br />hr {<br />/* horizontal divider */<br />display:none;<br />}<br /></style> <br /><!-- ENDHIDEDIVIDER --><br /><!-- end code provided by createblog.com -->

Attached is a picture of approx. where I want the box to be. Thanks for your help!

Attached File(s)

 helpme.gif ( 35.81K ) Number of downloads: 0

 

[*mona lisa*]

To position it, you have to change the values of the margin-top and marin-left. Experiment with the numbers because you can't get it right the first time, usually. You can also use negative numbers if you want to move it the opposite way. If you're having trouble with the margin-left, you can replace that with margin-right and change the values for that.