Strange overlapping of layout, Trying to get a large section of my div layout to line up with the bac Options

[Josirean]

Hi there, I'm pretty new to doing div layouts, so earlier I started out with the Let's Fly Away Together layout code, and fiddled around and made some of my own images and such to fit into it to try and see if it'd work, but when I input my images in and tested it on my page, almost everything was messed up. So I've spent all day trying to recode the parts of it that were broken, by looking around at a couple tutorials, and sampling different sections of code. As of now, I have a mostly done template created, but for some reason, my main image template, along with all of the overlaying text boxes are shifted down directly below the ad, so they don't line up with my background and it makes an odd blue box at the top. My current layout is HERE
And the coding I'm using right now is:

CODE

<style type="text/css">
td td object {position:absolute; z-index:0; left:0px; top:0px; display:block; width:300px; height:50px;}

    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;}

body {
    background-color: 2D43A6;
background-image:url(http://img216.imageshack.us/img216/7326/tilingey0.jpg);
    background-position:top left;
    background-z-index:0;
    background-repeat:repeat-x;
    background-attachment:scroll;
}

.bcover {
    width: 800px;
    height: 300px;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -400px;
    background-color: 2D43A6;
    font-size: 1px;
}
div.lyt {
    width: 800px;
    height: 800px;
    position: absolute;
    top: 175px;
    left: 50%;
    margin-left: -400px;
    background-color: 2D43A6;
    background-image: url('http://img260.imageshack.us/img260/9158/mainpicpn6.jpg');
    background-position: top left; background-repeat: no-repeat;
    background-attachment: scroll;
}
a img {
    border-width: 0px !important;
    border: none !important;
    filter: none;
    opacity: 1;
    -moz-opacity: 1;
}
a:hover {
    filter: alpha(opacity=85);
    opacity: 0.85;
    -moz-opacity: 0.85;
}
a, a:link, a:visited, a:active, a.redlink, a.redlink:link, a.redlink:visited, a.redlink:active {
    color: white;
    font-family: Tahoma;
    font-size: 8px;
    text-transform: uppercase;
    font-weight: bold !important;
    text-decoration: none !important;
    background-color: 777D9D;
}
a:hover, a.redlink:hover {
    text-decoration: none; font-weight: normal;
    color: 777D9D;
    background-color: white;
}
b, .redbtext, .redtext, .btext {
    font-weight: bold;
    font-family: Arial, sans-serif;
    font-size: 8pt;
    color: white;
}
i {
    font-style: italic;
    font-family: Arial, sans-serif;
    font-size: 8pt;
    color: white;
}
.comments {
        visibility: visible;
    position: absolute;
    top: 800px; left: 50%;
    width: 800px; height: 300px;
    margin-left: -435px;
    overflow: visible;
}
.comments table, .comments td, .comments td.text {
    background-color: transparent;
    border: 0px;
}
.comments td.text table tr td {
    color: white;
    font-family: Arial, sans-serif;
    font-size: 8pt;
}
.orangetext15 {
    width: 100%;
    display: block;
    text-align: center;
    font-family: 'Century Gothic', Arial, sans-serif;
    background-color: 2D43A6;
    border: 0px;
    color: white;
    text-transform: uppercase;
    font-weight: normal; font-size: 21pt;
    letter-spacing: -1pt;
    padding: 3px 0px;
}
.blacktext10 {
    display: block;
    font-family: 'Century Gothic', Arial, sans-serif;
    font-size: 21pt;
    text-transform: uppercase;
    letter-spacing: 1pt;
    font-weight: normal !important;
    color: white;
}

td td embed, td td object {position: absolute;top: 0px; left: 0px;}
td td td embed, td td td object {position: static !important;}
table tr td div font {display: none;}
table td div {visibility: hidden;}
table table td div {visibility: visible;}
tr {background-color: transparent;}
table tr td div div {display: none;border: 0px !important;background-color: transparent;}

.cntbox {
    overflow: auto;
    position: absolute;
    left: 50%;
    scrollbar-arrow-color: white;
}
.fmarquee {
    position: absolute;
    width: 315px; height: 75px;
    top: 586px; left: 50%;
    margin-left: -303px;
}
.cntbox, .fmarquee {
    color: white;
    font-family: Arial, sans-serif;
    font-size: 8pt;
}
.nav a {
    background-color: transparent !important;
}
.nav a img {
    height: 20px;
}

</style>

<div class="bcover"> </div>

<div class="lyt"> </div>

<span style="position: absolute; top: 665px; left: 50%; margin-left: -260px" class="nav">
<a href="http://home.myspace.com/index.cfm?fuseaction=user"><img src="http://layouts.cbimg6.com/34/17028c.gif" style="width: 49px" /></a><a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXXXX"><img src="http://layouts.cbimg6.com/34/17028c.gif" style="width: 65px" /></a><a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=XXXXXXXX"><img src="http://layouts.cbimg6.com/34/17028c.gif" style="width: 40px" /></a><a href="http://www.myspace.com/index.cfm?fuseaction=block.blockUser&userID=XXXXXXXX"><img src="http://layouts.cbimg6.com/34/17028c.gif" style="width: 53px" /></a><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=XXXXXXXX"><img src="http://layouts.cbimg6.com/34/17028c.gif" style="width: 39px" /></a><a href="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=XXXXXXXX"><img src="http://layouts.cbimg6.com/34/17028c.gif" style="width: 54px" /></a>
</span>

for my About Me section and:

CODE

<div class="cntbox" style="top: 289px; margin-left: -55px; width: 295px; height: 111px; scrollbar-face-color: 2D43A6; scrollbar-track-color: 2D43A6; scrollbar-3dlight-color: 2D43A6; scrollbar-highlight-color: 2D43A6; scrollbar-shadow-color: 2D43A6; scrollbar-darkshadow-color: 2D43A6" align="justify">
<img src="http://layouts.cbimg6.com/34/17028f.gif" align="left" />
This is where you write all about yourself. This is where you write all about yourself. This is where you write all about yourself. This is where you write all about yourself. This is where you write all about yourself. This is where you write all about yourself. This is where you write all about yourself. This is where you write all about yourself. This is where you write all about yourself. This is where you write all about yourself. This is where you write all about yourself. This is where you write all about yourself.<br /><br />
<a href="about:blank">Hyperlink</a><br />
<b>Bolded text</b><br />
<u>Underlined text</u><br />
<i>Italicized text</i><br />
</div>

<div class="cntbox" style="top: 410px; margin-left: -110px; width: 365px; height: 84px; scrollbar-face-color: 989DB1; scrollbar-track-color: 989DB1; scrollbar-3dlight-color: 989DB1; scrollbar-highlight-color: 989DB1; scrollbar-shadow-color: 989DB1; scrollbar-darkshadow-color: 989DB1" align="center">
<style type="text/css">
form.cmt_box {margin: 0px; padding: 0px;}
form.cmt_box textarea {color: white; font-family: Times New Roman, serif; font-size: 15pt; text-align: center; font-weight: bold;
     width: 180px; height: 65px; border: 1px solid; border-color: white; background-color: transparent; letter-spacing: -1pt; overflow: auto;}
form.cmt_box input {color: white; font-family: Small Fonts; font-size: 7px; text-align: center; text-transform: uppercase;
     letter-spacing: 2px; width: 180px; border: 1px solid; border-color: white; background-color: transparent;}
</style>
<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.confirmComment" class="cmt_box">
<input name="friendID" value="20421132" type="hidden" />
<textarea name="f_comments">Baby, let's fly ..</textarea><br />
<input type="submit" value="JUST THE TWO OF US" /><br />
</form>
</div>

<marquee class="fmarquee" direction="left" height="75">
<img src="http://layouts.cbimg6.com/34/17028g.gif" />
<img src="http://layouts.cbimg6.com/34/17028g.gif" />
<img src="http://layouts.cbimg6.com/34/17028g.gif" />
<img src="http://layouts.cbimg6.com/34/17028g.gif" />
<img src="http://layouts.cbimg6.com/34/17028g.gif" />
<img src="http://layouts.cbimg6.com/34/17028g.gif" />
<img src="http://layouts.cbimg6.com/34/17028g.gif" />
<img src="http://layouts.cbimg6.com/34/17028g.gif" />
</marquee>

<div class="comments" align="center">
<table><tr><td><table><tr><td>

for my I'd Like To Meet section.

While I'm here, I figured I'd also ask about the two other problems I'm having. I was hoping to somehow hide my myspace music player. At the moment, it's been shoved up the left corner, most likely by two different lines of code, but I was hoping to just completely shove it under somewhere or whatever so I could ignore it.

The other was that I'm trying to get my comments to show up, and I thought I had code in there that would work, but nothing seems to be pulling back up. Anyways, I hope that someone could give me some guidance, as I understand most of what I'm doing, but some of the small things confuse me. Thanks in advance!

[Josirean]

Ok guys, sorry, I went back and looked through my code and figured out two of my three problems. I messed with the position of the music player until it was off screen, and then realized my alignment was messed up because I forgot to change the coloring on the upper text hide box and uploaded the wrong background, so it all looked crappy. I could however still use help on the comment thing, they still are showing up at all....

my more fixed code is:

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;}

body {
    background-color: 2D43A6;
background-image:url(http://img215.imageshack.us/img215/9809/tilingfn1.jpg);
    background-position:top left;
    background-z-index:0;
    background-repeat:repeat-x;
    background-attachment:scroll;
}

.bcover {
    width: 800px;
    height: 300px;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -400px;
    background-color: 5F6EBB;
    font-size: 1px;
}
div.lyt {
    width: 800px;
    height: 800px;
    position: absolute;
    top: 175px;
    left: 50%;
    margin-left: -400px;
    background-color: 2D43A6;
    background-image: url('http://img260.imageshack.us/img260/9158/mainpicpn6.jpg');
    background-position: top left; background-repeat: no-repeat;
    background-attachment: scroll;
}
a img {
    border-width: 0px !important;
    border: none !important;
    filter: none;
    opacity: 1;
    -moz-opacity: 1;
}
a:hover {
    filter: alpha(opacity=85);
    opacity: 0.85;
    -moz-opacity: 0.85;
}
a, a:link, a:visited, a:active, a.redlink, a.redlink:link, a.redlink:visited, a.redlink:active {
    color: white;
    font-family: Tahoma;
    font-size: 8px;
    text-transform: uppercase;
    font-weight: bold !important;
    text-decoration: none !important;
    background-color: 777D9D;
}
a:hover, a.redlink:hover {
    text-decoration: none; font-weight: normal;
    color: 777D9D;
    background-color: white;
}
b, .redbtext, .redtext, .btext {
    font-weight: bold;
    font-family: Arial, sans-serif;
    font-size: 8pt;
    color: white;
}
i {
    font-style: italic;
    font-family: Arial, sans-serif;
    font-size: 8pt;
    color: white;
}
.comments {
        visibility: visible;
    position: absolute;
    top: 800px; left: 50%;
    width: 800px; height: 300px;
    margin-left: -435px;
    overflow: visible;
}
.comments table, .comments td, .comments td.text {
    background-color: transparent;
    border: 0px;
}
.comments td.text table tr td {
    color: white;
    font-family: Arial, sans-serif;
    font-size: 8pt;
}
.orangetext15 {
    width: 100%;
    display: block;
    text-align: center;
    font-family: 'Century Gothic', Arial, sans-serif;
    background-color: 2D43A6;
    border: 0px;
    color: white;
    text-transform: uppercase;
    font-weight: normal; font-size: 21pt;
    letter-spacing: -1pt;
    padding: 3px 0px;
}
.blacktext10 {
    display: block;
    font-family: 'Century Gothic', Arial, sans-serif;
    font-size: 21pt;
    text-transform: uppercase;
    letter-spacing: 1pt;
    font-weight: normal !important;
    color: white;
}

td td embed, td td object {position: absolute;top: 0px; left: -300px;}
td td td embed, td td td object {position: static !important;}
table tr td div font {display: none;}
table td div {visibility: hidden;}
table table td div {visibility: visible;}
tr {background-color: transparent;}
table tr td div div {display: none;border: 0px !important;background-color: transparent;}

.cntbox {
    overflow: auto;
    position: absolute;
    left: 50%;
    scrollbar-arrow-color: white;
}
.fmarquee {
    position: absolute;
    width: 315px; height: 75px;
    top: 586px; left: 50%;
    margin-left: -303px;
}
.cntbox, .fmarquee {
    color: white;
    font-family: Arial, sans-serif;
    font-size: 8pt;
}
.nav a {
    background-color: transparent !important;
}
.nav a img {
    height: 20px;
}

</style>

<div class="bcover"> </div>

<div class="lyt"> </div>

<span style="position: absolute; top: 665px; left: 50%; margin-left: -260px" class="nav">
<a href="http://home.myspace.com/index.cfm?fuseaction=user"><img src="http://layouts.cbimg6.com/34/17028c.gif" style="width: 49px" /></a><a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXXXX"><img src="http://layouts.cbimg6.com/34/17028c.gif" style="width: 65px" /></a><a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=XXXXXXXX"><img src="http://layouts.cbimg6.com/34/17028c.gif" style="width: 40px" /></a><a href="http://www.myspace.com/index.cfm?fuseaction=block.blockUser&userID=XXXXXXXX"><img src="http://layouts.cbimg6.com/34/17028c.gif" style="width: 53px" /></a><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=XXXXXXXX"><img src="http://layouts.cbimg6.com/34/17028c.gif" style="width: 39px" /></a><a href="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=XXXXXXXX"><img src="http://layouts.cbimg6.com/34/17028c.gif" style="width: 54px" /></a>
</span>

and the other is still the same...

[freeflow]

Before we help you with anything you need to PM the owner. You can't just take their code and try to edit it. If you want to learn how to make a div there are tutorials. (two here)

So PM them. When they tell you whether or not it was ok then you can get help..

[Josirean]

Ahh, ok. I've PM'd the owner to ask for permission, and as I told him, I don't plan on keeping my code like this, I just liked the style of it, so I was using this to fiddle with to get a working page while I changed it around more. Mainly it just seemed like a rather complicated one, so it would have the most information to be gained from it. I apologize for using someone else's as a base, I didn't realize how much I had erred.

[freeflow]

Its ok. Lots of people don't know. It owuldn't be a problem if some people didn't mind but some layout creators do thats why we kind of need you to ask first.

But in the meantine you can always look at this DIv tutorial to see if it helps you understand some of your questions till he/she replies.
http://www.createblog.com/forums/index.php?showtopic=142922

[Josirean]

Alright, The Markster said it was fine that I used his code as a base.

Also, that's actually the topic I was looking at for most of what I did, but I tried most of the comment stuff listed in there and none of it seemed to work. Not sure if it's just not being made visible again, or if I have something listed wrong so it's being completely hidden..

[freeflow]

Remove

CODE

    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;}

And put this instead:

CODE

table table,table table table table,table table{background-color:transparent;width:;border:0px;}
div,table,tr,td,th{background-color:transparent;text-align:left;border:0px;}
a.navbar,font,.whitetext12,.btext,.orangetext15,.redbtext,.redtext,.blacktext12,
lightbluetext8,strong,.nametext,div b font font, div font font u,table table table table, table.contacttable{display:none;}
div table form tr td,td.text table,a.text, table div font a,table div div,{visibility:hidden;di-splay:none}
td.text table table {display:inline; visibility:visible;}

That should fix your comments.

[Josirean]

Wow, that worked great! Thank you so much for the help!

Also, I was just wondering for when I'm doing stuff later...is there a way to make the comments visible like that while hiding the friends section? If not it's cool, I just figured I'd ask while I was here, lol.

[freeflow]

Of course. You just add this script to your codes:
http://www.createblog.com/scripts/download.php?id=231


Any other questions?

[Josirean]

That worked great, uhh, the only other thing I was wondering about really was I have the scrolling marquee of friend's pictures, is there a way to add links to those, so that it replaces my regular friend pictures? I tried linking them, but it makes the images disappear from the marquee.

And just so you know, you're hella awesome :D

[freeflow]

Aw thanks.

Your code should be this:

CODE

<marquee>
<a href="FRIENDLINK"><img src="friendimageurl"></a>
<a href="FRIENDLINK"><img src="friendimageurl"></a>
<a href="FRIENDLINK"><img src="friendimageurl"></a>
<a href="FRIENDLINK"><img src="friendimageurl"></a>
</marquee>