Myspace Layout help, I need help with this layout. Options

[mentalnote]

Hi, I have been trying to make a myspace layout but my coding has been failing me. I have tried using all kinds of codes an generators. I have been to other forums and they said that I needed to go to a more complex forum for the kind fo page I wanted to create.

Um to show you guys what I want i drew a scaffold of what I want the page to look like in photoshop (see link below).I want the friends and friends comments hidden btw.

The problems i have been having are:

aligning the sections,
getting the image to show up,
the image gets cropped or cut off,
the image does not scroll and only shows like 1/10th (because its so large)

So basically i want all these sections up the top and in my about me section I want this large image. The page will obviously have to use scroll bars to view the whole image because its so big.

So if you guys could give me the codes for this kind of layout that would be great.
Thanks for your time.

LINK-----------

click to enlarge

[Supanamu]

If you read this post I linked below, you'll learn what you need to know to make a div overlay profile, which is what you'll want to do in this situation. Also, fairly soon, someone will come along and move this thread over there in the MySpace section. :)

Here's the link to the div overlay tutorial:

http://www.createblog.com/forums/index.php?showtopic=142922

[fixtatik]

Also, fairly soon, someone will come along and move this thread over there in the MySpace section. :)

moderators sure aren't very active today - there's this in the wrong section with non-thumbed image, and a few other threads have long codes that aren't in codeboxes. slackers =D

anyway...i'd suggest start by putting the image in a div of its own, and making the dimensions of the div the same as those of the picture. after you've positioned the image where you want it to be, you can align different divs within the main one. that way it'll be easier to position an image map, your about me, picture, etc.

[S-Majere]

Dude, busy with my amazing life

Moved, thumbed.

[mentalnote]

ah gee thanks guys, your replies were very hasty (this is like the 5th site I have asked for help on).

I'm sorry for posting in the wrong section. I will definitely try your advice on div overlays. I'll get back to you on how it goes.

In the mean time tyvm.

[mentalnote]

hey guys your div overlay tutorial was topnotch...again i really appreciate it.

I have a few more questions though...

1. How do I get the "add, block, etc" this user (beside contact picture) to appear again??

2. How do i get my blogs section to show up...or alternatively is there a code that will make a link that will redirect them to my blog section???

heres my code so far btw

CODE

<style type="text/css">
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;}
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>

<style type=text/css>

body {
background-color:FFFFFF;
background-image: url("http://i249.photobucket.com/albums/gg235/mentalnote_photos/repeatxy_82198351.jpg");
background-position: center center;
background-repeat:repeat;
background-attachment: fixed;
scrollbar-arrow-color:000066;
scrollbar-track-color:99CCFF;
scrollbar-shadow-color:000000;
scrollbar-face-color: FF3333;
scrollbar-highlight-color:FFFFFF;
scrollbar-darkshadow-color:000000;
scrollbar-3dlight-color:99FF33;}

table, tr, td {background-color: transparent; border: 0px; padding:2;}
table table {border: 0px;}
table table table table{border: 0px;}

{The actual modules}
table table table {border: 1px solid; border-color:000000; background-color:FFFFFF; }

{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:12px;}

{sets the default divisions and text areas}
div, textarea
{font:normal 16px arial; color:0099FF; font-weight:none; border:0px; text-transform: none; line-height:12px;}

{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:12px;}

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

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

{”Blurbs”, “About Me”, “Who I’d like to Meet”, “Friend Space”, and “Friend’s Comments” style}
.orangetext15{font-family: arial; color:FF3333; font-weight: bold; font-size: 26px; letter-spacing: -2px;}

{”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:arial; font-size:20px; color: FF3333; font-weight:none;border:0px; text-transform: uppercase; }

{”Contacting”, “Interests”, “Details”, and “Schools” title styling}
.whitetext12{font-family:arial; font-size:9px; color:FF3333; font-weight:none;border:0px; text-transform: uppercase;}

{”In your extended network” style}
.blacktext12{font-family: arial; color:FF3333; font-weight: bold; font-size: 24px; letter-spacing: -2px; }

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

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

{This is how all anchor points will be displayed; anchor points appear before all links.}
a{font-family:arial; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase; }
a:link{font-family:arial; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a:active{font-family:arial; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:arial; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:9px; color:000000; 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:3366FF; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:link{font-family:arial; font-size:9px; color:3366FF; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:active{font-family:arial; font-size:9px; color:3366FF; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:visited{font-family:arial; font-size:9px; color:9900CC; font-weight:none;border:0px; text-transform: uppercase; }
a.redlink:hover{font-family:arial; font-size:9px; color:3366FF; 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:CCCCCC; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:link{font-family:arial; font-size:9px; color:CCCCCC; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:active{font-family:arial; font-size:9px; color:CCCCCC; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:visited{font-family:arial; font-size:9px; color:CCCCCC; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:hover{font-family:arial; font-size:9px; color:CCCCCC; font-weight:none;border:0px; text-transform: uppercase;}

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

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

</style>

<div class="bg" style="position: absolute; left:0px; top:470px; width:1958px; height:1199px; overflow: hidden;">
<img src="http://i249.photobucket.com/albums/gg235/mentalnote_photos/upload2.jpg">
</div>

<div class="content" style="position: absolute; left:950px; top:25px; width:300px; height:200px; overflow: auto;"><center>
<B>Starsign:<B> LIBRA (the scales :p)
<p> </p><B>Relationship status:<B> Single
<p> </p><B>Orientation:<B> Straight
</div>

<div class="content" style="position: absolute; left:1325px; top:25px; width:400px; height:200px; overflow: auto;"><center>
<B>Last Video/Movie Watched:<B> Grandma's Boy
<p> </p><B>Music Listening to while updating profile:<B> Freeze Pop - Get Ready 2 Rokk
</div>

<div class="content" style="position: absolute; left:975px; top:250px; width:250px; height:200px; overflow: auto;"><center>
<B>LATEST RANDOM QUOTE
<p> </p>"LOL! Noob they don't even have multiplayer mode in super mario"
</div>

<div class="content" style="position: absolute; left:450px; top:375px; width:400px; height:200px; overflow: auto;"><center>
I need more pictures of people to go in friends section,<p> </p> so if you could send on msn or by email.<p> </p> Cheers :D
</div>

<div class="bg" style="position: absolute; left:885px; top:150px; width:870px; height:70px; overflow: hidden;">
<img src="http://i249.photobucket.com/albums/gg235/mentalnote_photos/border03.jpg">
</div>

<div class="bg" style="position: absolute; left:865px; top:0px; width:71px; height:470px; overflow: hidden;">
<img src="http://i249.photobucket.com/albums/gg235/mentalnote_photos/border.jpg">
</div>

<div class="bg" style="position: absolute; left:1250px; top:0px; width:71px; height:470px; overflow: hidden;">
<img src="http://i249.photobucket.com/albums/gg235/mentalnote_photos/border.jpg">
</div>

<div style="text-align: center; width: 100%; height: 100%; position: absolute; left:1050px; top:300px;"><form action="/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=" method="post"><input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /><input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /><input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="" /><textarea name="ctl00$cpMain$UserWriteCommentsControl$commentTextBox" style="width: 250px; height: 100px; color: #FF66FF; font-size: 14px; font-family: Impact; text-align: left; background-image: url('http://i249.photobucket.com/albums/gg235/mentalnote_photos/boxback.jpg'); border-color: #000000; border-width: 2px; border-style: solid;">This r some kind of box ey?</textarea><br /><input type="submit" name="ctl00$cpMain$UserWriteCommentsControl$postcommentImageButton" value="Comment MEH!" style="color: #000000; font-size: 12px; background-color: #CCCCCC; border-color: #000000; border-width: 1px; border-style: solid;"><input type="reset" value="CLEAR" style="color: #000000; font-size: 12px; background-color: #CCCCCC; border-color: #000000; border-width: 1px; border-style: solid;"></form></div>%link_back%

[mentalnote]

hey dont worry guys i got the blog section, add me button and comment box to work on my page.

What i did was add div sections for each. For the "addme" and the "blog" i just made an image displaying that text and when it was clicked on it activated a hyperlink to the specified section.

For the comment box i just made a new div and added the code for the box in there. Tyvm for all your help. I really feel i am getting the hang of how div's work.

Heres the code I used........

CODE

<div style="text-align: center; width: 100%; height: 100%; position: absolute; left:1050px; top:300px;"><form action="/index.cfm?fuseaction=user.viewProfile_commentForm&amp;friendID=" method="post"><input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /><input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /><input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="" /><textarea name="ctl00$cpMain$UserWriteCommentsControl$commentTextBox" style="width: 250px; height: 100px; color: #FF66FF; font-size: 14px; font-family: Impact; text-align: left; background-image: url('http://i249.photobucket.com/albums/gg235/mentalnote_photos/boxback.jpg'); border-color: #000000; border-width: 2px; border-style: solid;">This r some kind of box ey?</textarea><br /><input type="submit" name="ctl00$cpMain$UserWriteCommentsControl$postcommentImageButton" value="Comment MEH!" style="color: #000000; font-size: 12px; background-color: #CCCCCC; border-color: #000000; border-width: 1px; border-style: solid;"><input type="reset" value="CLEAR" style="color: #000000; font-size: 12px; background-color: #CCCCCC; border-color: #000000; border-width: 1px; border-style: solid;"></form></div>%link_back%

<div class="content" style="position: absolute; left:175px; top:425px; width:400px; height:200px; overflow: auto;"><center><a href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD0zNDU2NzkyNjE=" target="_blank"><img src="http://i.myspace.com/site/images/addFriendIcon.gif" border="0" /›‹/a›
</div>

<div class="content" style="position: absolute; left:1350px; top:230px; width:400px; height:320px; overflow: auto;"><center><a href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLkxpc3RBbGwmZnJpZW5kSUQ9MzQ1Njc5MjYx" target="_blank"><img src="http://i276.photobucket.com/albums/kk32/draculaboy_layouts/blog.png" border="0" /›‹/a›
</div>