Div overlay confusion., I'm just lost. Options

[Formica]

So I've decided to venture into div overlays minus generators and I'm lost. All I've got is a white canvas and my content is not showing up. I know a good bit about css, but when it comes to all this "table table table td" stuff I don't know what the code is doing or meant to do, however, I know the basic workings of a table. I've tried following a number of tutorials and failed miserably. Here are my codes:

Interests

CODE

<style type="text/css">
body {background-color:FFFFFF; background-repeat:repeat; background-position:center center; background-attachment:fixed;}
td, .text, div, input {color:000000 !important;}
img {border:0px;}
table, tr, td {background:transparent; border:0px; font-family:arial; font-size:12px; line-height:11px; text-align=justify;}

body {
scrollbar-arrow-color:3e2e15;
scrollbar-track-color:dfd7cc;
scrollbar-shadow-color:dfd7cc;
scrollbar-face-color:3e2e15;
scrollbar-highlight-color:dfd7cc;
scrollbar-darkshadow-color:dfd7cc;
scrollbar-3dlight-color:dfd7cc;}

a.nav {font-family:arial; font-size:11px; color:6699cc; background-color:99ccff; font-weight:bold;border:0px; text-transform: uppercase; text-decoration: none;}
a.nav:link {font-family:arial; font-size:11px; color:6699cc; background-color:99ccff; font-weight:bold;border:0px; text-transform: uppercase; text-decoration: none;}
a.nav:active{font-family:arial; font-size:11px; color:6699cc; background-color:99ccff; font-weight:bold;border:0px; text-transform: uppercase; text-decoration: none;}
a.nav:visited{font-family:arial; font-size:11px; color:6699cc; background-color:99ccff; font-weight:bold;border:0px; text-transform: uppercase; text-decoration: none;}
a.nav:hover{font-family:arial; font-size:11px; color:ffffff; background-color:99ccff; font-weight:bold;border:0px; text-transform: uppercase; text-decoration: none;}

a {font-family:arial; font-size:12px; color:a78a6a; font-weight:bold;border:0px; text-transform: uppercase; text-decoration: none;}
a:link {font-family:arial; font-size:12px; color:a78a6a; font-weight:bold;border:0px; text-transform: uppercase; text-decoration: none;}
a:active {font-family:arial; font-size:12px; color:a78a6a; font-weight:bold;border:0px; text-transform: uppercase; text-decoration: none;}
a:visited {font-family:arial; font-size:12px; color:a78a6a; font-weight:bold;border:0px; text-transform: uppercase; text-decoration: none;}
a:hover {font-family:arial; font-size:12px; color:3e2e15; font-weight:bold;border:0px; text-transform: uppercase; text-decoration: none;}

{sets the default style for the body, table data, list data, divisions and text areas}
body,table, td, li, p, div, textarea  
{font:normal 12px arial; color:000000; font-weight:none; border:0px; text-transform: none; line-height:11px;}

{class for the basic font for the page}
.text {font:normal 12px arial; color:000000; font-weight:none; border:0px; text-transform: none; line-height:11px;}

{style for the number of comments you have. The actual ..}
.redtext{font-family:tohoma; font-size:12px; color:000000; font-weight:none; border:0px; text-transform: uppercase; }

{style for the number of friends you have.}  
.redbtext{font-family:tohoma; font-size:12px; color:000000; font-weight:none; border:0px; text-transform: uppercase; }

{stylizing of your name above your picture }  
.nametext{font-family: arial; color: 000000; font-weight: bold; font-size: 12px; letter-spacing: -3px; line-height: 11px;}  

{date stamp on comments}  
.blacktext10{font-family:arial; font-size:9px;  color:000000; font-weight:none;border:0px; text-transform: uppercase;}  

{remove searchbar}
body div table td form option{display:none!important;}
body div table td form select{display:none!important;}
body div table td form input{display:none!important;}
{remove navbar}
table td div {visibility:hidden;}
table table td div {visibility:visible;}
body div table tbody tr td font {visibility:hidden;}
body table div table tbody tr td font {visibility:visible;}
{remove login details}
table td.text {visibility:hidden;}
td.text td, td.text span, td.text a {visibility:visible;}
{remove contact table}
.contactTable {display:none!important; border:0px !important;}

table div, td td td, table div div { visibility:hidden; }
marquee { visibility:visible !important; }
.text, td.text td.text table, .contactTable, .lightbluetext8 {display:none;}
table table, table table td {padding:0px; height:0px;}
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, .blacktext12 .orangetext15 { display: none; }

.div1 {
background-color:transparent; color:000000;
border:0px solid; border-color:000000;
width:725px; height:355px; overflow-x:hidden; overflow-y:scroll; overflow:-moz-scrollbars-vertical;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-360px; margin-top:125px; text-align:justify;
visibility:visible;}
marquee { z-index:8; }
table div, span, td td td, table div div { visibility:hidden !important; }

</style>

Music

CODE

<div class="div1">
<table width="720" border="0" cellpadding="2" cellspacing="3" text-align="justify">
<tr width="700"><td width="170">
<center><b>Tuez moi, svp.</b><br></center>
<a href="imgurl"><img src="imgurl"></a>
<br>
<center>View More Photographs</center>
</td>

<td width="25"></td>


<td width="375" valign="top" text-align="justify">
CONTENT
</td></tr>

<tr width="275" text-align="justify"><td width="250">
CONTENT
</td>

</tr>
</table>
</div>

By the way, I put all my coding in interests and music because I can't seem to get it to work in about me or who I'd like to meet.

Thanks for your time.

[freeflow]

For one you don't need all those tables in the div get rid of them. Two change this:

CODE

.div1 {
background-color:transparent; color:000000;
border:0px solid; border-color:000000;
width:725px; height:355px; overflow-x:hidden; overflow-y:scroll; overflow:-moz-scrollbars-vertical;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-360px; margin-top:125px; text-align:justify;
visibility:visible;}

To

CODE

.div1 {
background-color:transparent; color:000000;
border:0px solid; border-color:000000;
width:725px; height:355px; position:absolute; z-index:2; left:#px; top:#px;
text-align:justify;
visibility:visible;}

Then change the #'s to positions. Don't use margin or percent positioning.


Try reading this tutorial its explained best: http://www.createblog.com/forums/index.php?showtopic=142922

[Formica]

Those tables are there because I have one big div, and I wanted columns within the div (i.e. it's like an iframe). I suppose I could do divs within div, but I didn't think of that nor am I too sure it will work. If I removed the overflow tags then I end up with horizontal scroll in IE and firefox, so that fixes my scrolling issues. I suppose I should mention that I made the layout and it works fine as an .html, but when I transfer it over to myspace it just doesn't work.

I've read over the tutorial you gave several times. I've tried it several times and I just can't get it to work right for me and what I'm trying to do.

Thanks for trying anyway.

[freeflow]

The reason I said read that is because not all codes that work on websites work on myspace.

I didn't notice it before but if you go through your code, things like hiding the search and navbar can also stop your content from showing.

[Formica]

It's all good. I found a tutorial that I can understand better. Thanks. This can be closed.