Forums > Friends / Comments Help in DIV Layout

Full Version: Friends / Comments Help in DIV Layout

Forums > Resource Center > Support Center > MySpace Support > Myspace Resolved Topics

f1reman

Sep 20 2009, 03:43 AM

I'm almost done with my profile, but I'm having a couple problems:

1. "All/Online/New" links in "Friends" section are the wrong color
2. "Displaying X of X comments" in "Comments" section are the wrong color
3. Time/Date for each comment in "Comments" section is the wrong color
4. My "Comments" section stretches all the way to the bottom of the screen, and I'd like to raise the bottom of the box up a little bit

It's a 1.0 profile, and everything is arranged PERFECTLY, except for those 4 things above. Please help!

Here's the relevant code:

About Me:

CODE

.friends
	{
	position:absolute;
	top:1190px;
	margin-top:20px;
	background-color:000000;
	height:40px;
	width:794px;
	padding:14 15 7 27px;
	color:DDDDDD;
	}

.friendSpace
	{
	width:794px;
	position:absolute;
	margin-left:-568px;
	top:1417px;
	padding:0 15 0 27px;
	background-color:000000;
	}
 
.comments
	{
	position:absolute;
	top:1507px;
	margin-top:20px;
	background-color:000000;
	height:40px;
	width:794px;
	padding:14 15 7 27px;
	color:DDDDDD;
	}

.friendsComments
	{
	width:794px;
	position:absolute;
	top:1743px;
	margin-left:-567px;
	background-color:000000;
	color:DDDDDD;
	}

Who I'd Like to Meet:

CODE

<div class="friends">
<h2>My Friends</h2> 
</div>

<div class="comments">
<h2>Comments</h2>
</div>

NOTE: I created my own headings (.friends, .comments) to hide the default headings for those two sections. Each section is a black box, and the background of the page is gray.

Any help is GREATLY appreciated!

Mike

Sep 20 2009, 05:26 AM

Use this code to fix all the colour issues:

CODE

The first line is for the friend links, the second is for the comment count and the third is for the time stamp. Not quite sure what you mean by your fourth question but if you want to add padding to the bottom of your comments, try this:

CODE

f1reman

Sep 20 2009, 06:23 AM

QUOTE(Mike @ Sep 20 2009, 06:26 AM)

Use this code to fix all the colour issues:

Holy crap, man. You're my new hero! That worked perfectly.

As for the "padding" part, I did a pretty awful job of describing it. The way I've got my profile structured, each section is in its own black box over the light gray background. The black boxes aren't touching, so there's a little bit of gray between each section.

Anyway, the "Comments" section goes all the way to the very bottom of the screen. There's no gray below it. I tried adding another DIV class below it, adding another row to the table structure, and even adding another table under the original one. Nothing worked. Basically, I'm missing the bottom DIV with the Myspace copyright information.

Any ideas?

deadmellotron

Sep 20 2009, 09:43 AM

You can always create another DIV to put under the comments DIV with the bottom links.

Mike

Sep 20 2009, 02:09 PM

Can you post all of the codes you're using and a link to your page?

f1reman

Sep 20 2009, 07:15 PM

I stripped my profile down, to better illustrate the problem.

About Me:

CODE

<style>

table, tr, td {background-color:transparent; border:0px;}
div.profileWidth table td { background-color: 000000; !important; background-image: none !important; } 
div.profileWidth div ul li a {font-size: 11px !important;} 
div.profileWidth div ul li a:hover, div.profileWidth div ul li .open {font-size: 11px !important;} 
div.profileWidth div td.rail{background-color: 000000 !important;} 
div.profileWidth table td ul small {font-size: 8px !important;} 
div.profileWidth table tr td div table.rail {background-color: 000000;} 

body table tr table tr td.text table tr td.text table tr td table tr td {color:DDDDDD;}

.main
	{
	position:absolute;
	left:50%;
	top:176px;
	z-index:1;
	margin-left:-401px;
	padding:0;
	border:0;
	background-color:DDDDDD;
	}

body
	{
	background-color:DDDDDD;
	}

tr
	{
	background:transparent;
	}

a:link,a:visited
	{
	text-decoration:underline;
	color:DDDDDD;
	}

a:hover
	{
	text-decoration:none;
	color:DDDDDD;
	}


img
	{
	border:none;
	}

.content
	{
	position:absolute;
	top:0px;
	margin-top:20px;
	background-color:000000;
	height:1000px;
	width:794px;
	padding:14 15 7 27px;
	color:DDDDDD;
	}	

.friends
	{
	position:absolute;
	top:1020px;
	margin-top:20px;
	background-color:000000;
	height:40px;
	width:794px;
	padding:14 15 7 27px;
	color:DDDDDD;
	}

.friendSpace
	{
	width:794px;
	position:absolute;
	margin-left:-567px;
	top:1232px;
	padding:0 15 0 27px;
	background-color:000000;
	}

.comments
	{
	position:absolute;
	top:1327px;
	margin-top:20px;
	background-color:000000;
	height:40px;
	width:794px;
	padding:14 15 7 27px;
	color:DDDDDD;
	}

.friendsComments
	{
	width:794px;
	position:absolute;
	top:1563px;
	margin-left:-567px;
	background-color:000000;
	color:DDDDDD;
	}

.redlink, .friendlink, .friendtext {color:DDDDDD!important;}
.friendsComments td.text td b, .redtext {color:DDDDDD!important;}
.blacktext10 {color:DDDDDD!important;}

</style>

Who I'd Like to Meet:

CODE

<div class="main">
     <table style="width:800px;
     height:800px;
     cellpadding:0px;
     cellspacing:0px;
     background-color:DDDDDD;">
     <tr><td valign="top">

<div class="content">
stuff
</div>

<div class="friends">
<h2>My Friends</h2> 
</div>

<div class="comments">
<h2>Comments</h2>
</div>
	
</td></tr></table></div>

<div style="position: relative;
	height: 400px;
	overflow: hidden;
	border: 0px;">

I'd like to get the "normal" Myspace copyright info back at the bottom of my profile, but the "Comments" section stretches all the way to the very bottom of the page, hiding it. Help?

Mike

Sep 21 2009, 01:01 PM

Unfortunately, you can't bring back the bottom table unless you give your comments section a definite height, set it to automatic overflow, replicate the bottom table inside a DIV and position it below your comments.

f1reman

Oct 11 2009, 04:58 PM

OK, I added -
height:400px;
overflow:auto;

But, I'm still a little foggy on the last part ("replicate the bottom table inside a DIV and position it below your comments"). Any suggestions?

Mike

Oct 11 2009, 05:13 PM

View the page source and copy the codes for the bottom links / copyright table. Paste inside a set of <div> tags then position it below the comments. By the way, were you actually able to put your comments in a scrollbar?

f1reman

Nov 7 2009, 07:17 AM

I gave up on the layout edit for a while (more important things came up, unfortunately), but now I'm back to it.

I tried the suggested edits, and I can't seem to shorten the Comments section. I tried: overflow:auto; , overflow:hidden; , and overflow:scroll;. NONE of them do anything at all to the section. I tested in both IE8 and Firefox 3.5.

Any other ideas?

Mike

Nov 7 2009, 07:56 AM

I'm afraid you can't set the Comments section to overflow as it's a table and not a DIV. You can use a hack to force it to overflow but it only works for Firefox so I doubt you'd want to make use of it. Sorry.

fixtatik

Nov 10 2009, 12:27 AM

You could try switching to profile 2.0. Friends and comments are already in a div, which you can resize and position wherever, no matter the browser.

Mike

Nov 12 2009, 03:40 AM

^Or that. Topic closed & moved.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.