Friends / Comments Help in DIV Layout Options

[f1reman]

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!

[Mickey]

Use this code to fix all the colour issues:

CODE

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

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

<style>
.friendsComments {padding-bottom:25px;}
</style>

[f1reman]

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?

[Mickey]

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

[f1reman]

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?

[f1reman]

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?

[f1reman]

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?

[fixtatik]

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.