Profile information, comments, friendspace in different divs?, Is it possible? Options

[shogem]

Hello, my question pertains to placing different sections into these different divs.

My myspace link is: http://www.myspace.com/shogem , each "window" has a title over it indicating what will go where. There are no div layers for the profile info, comments, and whatnot yet.

Now, if it's possible to add profile info (name, status, picture w/ links to my other pictures) as a div over that picture, how would I go about doing that?

Next, how would I go about adding just my comments to the comment area? I know there's a way to hide friends (I believe the tag has to do with .friendspace in CSS).

Also, is it possible to separate comments and friends into different divs?

Here's my code: (I kept the information in as personal notes for later. The CSS for colors and whatnot came from here).

<style type="text/css">

body {
background-color: FFFFFF;
background-image: url("");
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed;
}

{sets the default style for the body, table data, list data, divisions and text areas}
body,table, td, li, p, div, textarea
{font-family: Verdana; color: 000000; font-weight: none; font-size: 10px; border:0px; text-transform: none;}

{class for the basic font for the page}
.text {font-family: Verdana; color: 000000; font-weight: none; font-size: 10px; border:0px; text-transform: none;}


{”General”, “Music”, “Movies”, “Television”, “Books”, “Heros”, “Status”, “Here for”, “Hometown”, “Body Type”, “Ethnicity”, “Religion”, “Sign”, “Smoke/Drink”, “Children”, “Education”, “Occupation”, and “Income” title style}
.lightbluetext8{font-family:Verdana; font-size:10px; color:000000; font-weight:none;border:0px; text-transform: uppercase; }


{Stylizing of your name above your picture }
.nametext{font-family: Verdana; color: 000000; font-weight: bold; font-size: 20px; letter-spacing: -3px; line-height: 35px;}


{This is how all anchor points will be displayed; anchor points appear before all links.}
a{font-family:arial; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase; }
a:link{font-family:arial; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase;}
a:active{font-family:arial; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:arial; font-size:9px; color:555555; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase;}

{”View all friends” and “invite more” link style}
a.redlink{font-family:arial; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:link{font-family:arial; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:active{font-family:arial; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:visited{font-family:arial; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase; }
a.redlink:hover{font-family:arial; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase;}

{2 links in very top on the left, and the 13 links above your picture with make the navigation bar}
a.navbar{font-family:arial; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:link{font-family:arial; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:active{font-family:arial; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:visited{font-family:arial; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:hover{font-family:arial; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}


a:link, a.man{font-family:arial; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase; letter-spacing: 0px;}
a:active{font-family:arial; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:arial; font-size:9px; color:555555; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase;}

{bolded words}
.standard b, p b, B, strong {
font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
a.text,table div font a,table div div,.navbar font,tr td font{visibility:hidden;display:none;height:0px;!important;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
</style>



<div style="position: absolute; z-index:1; left:270px; top:170px; width:720px; height:135px; overflow: hidden; border:0px;"><img src="http://www.hypanthium.net/myspace/header2.png" usemap="#Menu_Map" border="0"><map name="Menu_Map" border="0">
<area shape="rect" alt="" border="0" coords="227,33,322,53" href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLkxpc3RBbGwmZnJpZW5kSUQ9MTE4NzU5MjEw">
<area shape="rect" alt="" border="0" coords="129,56,224,76" href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9jay5ibG9ja1VzZXImdXNlcklEPTExODc1OTIxMA==">
<area shape="rect" alt="" border="0" coords="31,56,126,76" href="http://www.msplinks.com/MDFodHRwOi8vZ3JvdXBzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPWdyb3Vwcy5hZGR0
2dyb3VwJmZyaWVuZElEPTExODc1OTIxMA==">
<area shape="rect" alt="" border="0" coords="129,33,224,53" href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwuZm9y
2FyZCZmcmllbmRJRD0xMTg3NTkyMTAmZj1mb3J3YXJkcHJvZmlsZQ==">
<area shape="rect" alt="" border="0" coords="30,33,125,53" href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLmFkZFRvRmF2b3JpdGUmZnJpZW5kSUQ9MTE4NzU5MjEwJnB1YmxpYz0w">
<area shape="rect" alt="" border="0" coords="129,10,224,30" href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0xMTg3NTkyMTAmTXlUb2tlbj00YTQ0NmFlNi1mMDE3LTQ5MWEtODEzZS01ZDk1Z
I2MmZjZTU=">
<area shape="rect" alt="" border="0" coords="31,10,126,30" href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPWludml0ZS5h
GRmcmllbmRfdmVyaWZ5JmZyaWVuZElEPTExODc1OTIxMA==">
</map></div>

</p>
<div style="position:absolute; z-index:3; left:270px; top:305px; width:450px; height:425px; overflow: hidden;">
<img src="http://www.hypanthium.net/myspace/content.png" /></div>
<div style="position:absolute; z-index:4; left:728px; top:305px; width:260px; height:219px; overflow: hidden;"><img src="http://www.hypanthium.net/myspace/profileinfo.png" width="260" height="219" /></div>
<div style="position:absolute; z-index:5; left:728px; top:530px; width:260px; height:194px; overflow: hidden;"><img src="http://www.hypanthium.net/myspace/other.png" /></div>
<div style="position:absolute; z-index:6; left:281px; top:320px; width:435px; height:375px; overflow: auto;">
<p>Hi, my name's Mina. This page will have a lot of content soon, however, I needed to make sure that the basic layout was functioning properly. Essentially, this site is still <b>under construction</b>.
<p></p>
Thank you!
<p></p>
I have a list of links below so that the main purpose of my myspace is still the same, it's simply not as nicely organized as it will be.
<p></p>
<b><a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD0xMTg3NTkyMTA=">Photo Albums</a></b>
<p></p>
<a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTExODc1OTIxMCZN
VRva2VuPTBiNDBmNDE2LTAwYzAtNDdiYy04YzUwLWY2ODZhZDNjYzllOA==">Add a Comment</a><br></br>
<a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdDb21tZW50cyZmcmllbmRJRD0xMTg3NTkyMTA=">View Comments</a><br></br>
<p>AIM - be mine winged</p>
</div>
<div style="position:absolute; z-index:6; left:315px; top:940px; width:600px; height:50px; overflow: hidden;">
<center>Layout, art and concept all &copy; Copyrighted Mina Ashley 2008. All rights reserved.</center></div>
<div style="position:absolute; z-index:6; left:270px; top: 733px; width:450px; height:350px; overflow: hidden;"><img src="http://www.hypanthium.net/myspace/Comments.png" /></div>
<div style="position: absolute; z-index:6; left: 728px; top: 733px; width: 260px; height: 350px; overflow: hidden;"><img src="http://www.hypanthium.net/myspace/misc.png">

[shogem]

Thanks! I have a question, though. Why is the top menu still hanging out to the left?

And I'm still unsure about how to place my profile info (.profileinfo ) tag in a div layer.

Thanks in advance!