margin div overlay Options

[Powderhound21]

So i have unwisely lost three hours of sleep trying to figure out how to get through this.

I currently have a div layout, but im *attempting* to go for something a little better. Im trying to, well, overlay my links, picture, and comments over top of my background image. In this im trying to match the two layers up to be so pleasing to the eye.

Ive looked at codes for numerous layouts that are something like what im going for, and try to plug in what i learned into what im trying to do. For that matter, heres what im trying to do.

Image link.

Im trying to get a comment box over the bottom-right leaf.
A picture and an up-scrolling marquee about me over the top-left set.
And my links (add, msg, view comments etc..) over the set on the right.

Ive got my images. But the main problem im having is getting the positioning of the text/graphics over the right spot... I cant even get the text/graphics to show up over the background.

So if there is any kind soul that could help me understand this it would... be appreciated.





...Here is one of my many attempts at trying to get my comment box to go over the bottom leaf.

CODE

<style type="text/css">
body {background-color:white; background-image:url("http://img169.imageshack.us/img169/231/fall082db0.gif"); background-repeat:repeat; background-position:center center; background-attachment:fixed;}
td, .text, div, input {color:white !important;}
a {color:silver !important;} img {border:0px;}
table, tr, td {background:transparent; border:0px;}
img, .contactTable { display:none; }
.bbzContainer img, .comt img { display:inline; }
table div, td td td, table div div { visibility:hidden; }
font, a, .bbzsc a { visibility:hidden; }
marquee { visibility:visible !important; }

.bbzComment { This is where you control the position of the player. }
table table embed {display:block; width:202px; height:35px; position:absolute; top:0px; left:0px; visibility:visible;}
table table table embed,  .bbzContainer div embed {position:static !important; width:auto; height:auto; }
.text, table table table table a,
table table table table div,table table table table div a {visibility:visible;}
.bbzComment { You selected to hide comments. }
.bbzsc { display:none; }
.text, td.text td.text table, .contactTable, .lightbluetext8 {display:none;}
table table, table table td {padding:0px; height:0px;}

.div1 {
background-color:transparent; background-image:url("http://img169.imageshack.us/img169/231/fall082db0.gif"); color:white;
border:1px inset; border-color:black;
width:1085; height:723; overflow:hidden;
position:absolute; z-index:2; left:0%; top:0%;
margin-right:0px; margin-top:0px; text-align:center;
visibility:visible;}

.div2 {
background-color:FFFFFF; opacity:0.87; color:000000;
border:1px inset; border-color:000000;
width:250px; height:200px; overflow:auto;
position:absolute; z-index:3; left:50%; top:0%;
margin-left:700px; margin-top:500px; text-align:center;
visibility:visible;}
marquee { z-index:8; }
table div, span, td td td, table div div { visibility:hidden !important; }
.bbzContainer div, .bbzContainer div font, .bbzContainer div a, .bbzContainer div div, .bbzContainer font a, .bbzContainer span, .bbzContainer div table a, .bbzContainer div table img, .bbzContainer div table font, .bbzContainer div table, .bbzContainer div table td, .comt, .comt td, .comt span, .comt a, .comt div {visibility:visible !important;}

.bbzDiv {content:"Overlay Generator beta";}







</style>

CODE

<div class="div1">
    

</div>

<div class="div2">

<font size=4><center>
Commentos</center></font>
<font size=1>
<br><br>
<center>

<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">

<input type="hidden" name="friendID" value="38316797">

<textarea name="f_comments" cols="35" rows="7">yo.</textarea><br>

<input type="submit" value="Mhmm."> <input type="reset" value="Reset.">

</form><br>

</center>

<style type="text/css">

textarea {background-color: FFFFFF; background-image:url(); border-width:; border-style: dotted; border-color: 000000; color: 000000; font-family:Papyrus;}

input {background-color: FFFFFF; border-width:; border-style:dotted; border-color: 000000; color: 000000; font-family:Papyrus;}

</style>

</center>

[*The Markster*]

Would you mind showing us a live page showing what you've tried to do so far?

[Powderhound21]

I know its rough, but if you go to http://www.mywackospace.com/myspace-layout-previewer/

and paste in what i put in the code tags, it shows exactly what my profile looked like until i just switched it back to the layout i had before last night.

If anyone thinks they could help me better by seeing my profile with my problematic overlay code, say the word and ill put the code into it.


Flardnarf: I think this would go better in myspace help?

[*The Markster*]

First, I'd strongly recommend that you not use those gens to make the base code of your DIV layout.

I would start out by using this code to hide your entire profile. Then, you can absolute-position the main image to the appropriate place. After that, you can set your <div> tags to the right coordinates as well.

[Powderhound21]

Doesnt seem to be working.

I feel dumb trying to do this. I thought I was hot stuff halfway making my 4 table div. This new overlay is just beyond me.

www.myspace.com/soulboarder21

CODE

<style type="text/css">
    table, tr, td {background:transparent;}
    table table table table, table table table table td.text, table.contactTable {display:none;}
    td.text table, .orangetext15 {visibility:hidden;}
    td.text table table {display:inline; visibility:visible;}
    td.text td.text table {display:none;}
    div b font font, div font font u {display:none;}
.whitetext12 { display: none; }
.nametext { display:none;}
</style>

<Style>table, tr, td { background-color:transparent; border:none; border-width:0;}
</style>



.background {
background-image:url('http://img466.imageshack.us/img466/6882/fall083br8.gif');
background-repeat:repeat;
background-position:center;
border:0px ridge white;
font-size:8pt;
font-weight:bold;
color:white;
padding: 0px;
position:fixed;
left:0%;
margin-left:0px;
top:0px;
margin-top:0px;
z-index:2;
width:1086px;
height:621px;
}

CODE

<div class="background">
<img src= "http://img466.imageshack.us/img466/6882/fall083br8.gif">
</div>

[Clashing]

Um, I don't see any codes for your tables. You need div layers if you want tables to show up.