problems hiding default myspace layout Options

[missDanish]

I'm not sure why I'm getting parts of the old myspace
layout coming through, although I'm guessing it's got to do with
me using my first div to hold the other div boxes rather than just
to cover the general ugliness that is myspace.


Ideally I want the background to be behind all of the layout.

Is there a way that I can just create a div to hold the background
and then put all my other divs ontop of it without having to
reposition everything by widening my "profile" div?



Any help would be really appreciated.


Demo of the Myspace Layout



My Code: 1st part

CODE

<style type="text/css">
.btext {display:none;}
.contacttable {display:none;}
.lightbluetext8 {display:none;}
.nametext {display:none;}
.orangetext15 {display:none;}
.redlink {display:none;}
.whitetext12 {display:none;}
.hidethem {visibility:hidden; display:none;}
.comments {visi­bility:hi­dden;display:none;}
.userProfileDetail {visi­bility:hi­dden;display:none;}


body {
background-color:black;
background-image: url(http://i142.photobucket.com/albums/r115/miss_danish/bg2-2.png);
background-repeat:repeat;
background-position:center;
}
table tr td {
background-color:black;
}

.profile
{
top: 172px;
width:564px;
height:460px;
position:absolute;
left: 50%;
margin-left: -282px;
z-index:0;
}

.flower{
border:2px solid white;
position:absolute;
top: 0px;
left: 0px;
width: 307px;
height: 230px;
background-image: url(http://i142.photobucket.com/albums/r115/miss_danish/y1.png);
z-index:2;
}

.about{
border:2px solid white;
position:absolute;
padding: 20px;
top: 190px;
right: 0px;
left: 278px;
width: 287px;
height: 245px;
background-color:black;
z-index:1;
text-align:right;

color: white;
font-face:Century Gothic;
font-size:24px;


}


.details{
position:absolute;
padding-left: 20px;
padding-right: 10px;
top: 67px;
left: 10px;
width: 245px;
height: 150px;
background-color:black;
z-index:1;
text-align:justify;
color:white;
overflow: auto;
font-family:verdana;
font-size:12px;
scrollbar-base-color: white;
scrollbar-track-color:black;

}

.linkbox{
border:2px solid white;
position:absolute;
padding: 20px;
top: 0px;
right: 0px;
width: 240px;
height: 180px;
background-color:black;
z-index:1;
text-align:right;

}

.links{
position:absolute;
top: 30px;
left: 40px;
width:162px;
height:119px;
background-image: url(http://i142.photobucket.com/albums/r115/miss_danish/giffy.gif);
z-index:2;
}

.commentspace{
border:2px solid white;
position:absolute;
padding: 20px;
top: 245px;
left: 0px;
width: 265px;
height: 190px;
background-color:black;
z-index:1;
}

.commentbox{
position:absolute;
top: 35px;
left:30px;
z-index:4;
}


a.HOME{position: absolute; top:0px; left:0px; height:19px; width:162px; z-index:3; }
a.PICTURES{position: absolute; top:25px; left:0px; z-index:3; height:19px; width:162px; }
a.MSG{position: absolute; top:50px; left:0px; z-index:3; height:19px; width:162px; }
a.BLOG{position: absolute; top:75px; left:0px; z-index:3; height:19px; width:162px; }
a.ADD{position: absolute; top:100px; left:0px; z-index:3; height:19px; width:162px; }

a.HOME:hover{background: url(http://i142.photobucket.com/albums/r115/miss_danish/home.gif); }
a.PICTURES:hover{background: url(http://i142.photobucket.com/albums/r115/miss_danish/pictures.gif); }
a.MSG:hover{background: url(http://i142.photobucket.com/albums/r115/miss_danish/message.gif); }
a.BLOG:hover{background: url(http://i142.photobucket.com/albums/r115/miss_danish/blog.gif); }
a.ADD:hover{background: url(http://i142.photobucket.com/albums/r115/miss_danish/add.gif); }

</style>

My Code: 2nd part

CODE

<div class = "profile">

<div class = "flower"></div>

<div class = "commentspace">
<div class = "commentbox">

<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">
<input type="hidden" name="friendID" value="FRIEND_ID_HERE">
<textarea name="f_comments" id="f_comments" style="
background-color:CCCCCC!important;
scrollbar-base-color: white;
scrollbar-track-color:black;
border-width:1px!important; border-color:white!important;
border-style:solid!important; text-align:center; font-family:Verdana!important; font-size:10px!important; color:black!
important; width:200px!important; height:100px!important; line-height:20px !important; ">say something here!</textarea>
<input type="submit" value="Submit" style=" width:200px!important;
height:20px!important; background-color:FFFF99!important;
background-image: url(http://); background-position: top left;
background-attachement: fixed; background-repeat: repeat; border-width:1px!important; border-color:FFFF99!important;
border-style:solid!important; font-family:Century Gothic!important; font-size:10px!important;
font-weight:bold; color:black!important; letter-spacing:1px !important; "></form>



</div>
</div>

<div class = "linkbox">
<div class = "links">


<a href = "http://home.myspace.com/index.cfm?fuseaction=user" class = "HOME"></a>
<a href = "http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=FRIEND_ID_HERE" class = "PICTURES"></a>
<a href = "http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=FRIEND_ID_HERE" class = "MSG"></a>
<a href = "http://blog.myspace.com/FRIEND_ID_HERE" class = "BLOG"></a>
<a href = "http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=FRIEND_ID_HERE" class = "ADD"></a>

</div>
</div>


<div class = "about">

<font face = 'Century Gothic'>About Me</font>
<div class = "details">about me .... etc... </div>
</div>

</div>

<DIV class="comments"><table><tr><td><table><tr><td>

[S-Majere]

OK, looking good so far.

Have you tried this script that hides everything?

[missDanish]

thanks for the script I just tried it but for some reason it just replaces everything with the background (e.g. my layout is hidden too).

[S-Majere]

Ahum, could be a case of upping your Z-indexes.

I'm just going to play around with this for a while, give me 10 minutes,

Alright, I don't think there's an easy way round this. I think what you've done is confuse your DIVs - it's made worse because you haven't first started from a script that hides all default attributes. I've been trying to de-tangle this and I'm not having much look dealing with the DIVs you have already.

The best thing to do is to first hide all default Myspace attributes and start placing your DIVs (best not to include them in one large DIV, unless it's a container) separately.

[missDanish]

ouch, thanks for looking at it. I thought that might be it... but I kinda hoped it wouldn't be

btw... what are containers?

[missDanish]

ok, got it done. Thankyou again for the help :D

[Insurmountable]

Topic closed, this topic will be moved to the Myspace Resolved topics. If you need to re-opened feel free to contact a design staff.

Thanks,
topic closed.