Log In · Register

 
 
Closed TopicStart new topic
div comments - alter width of comment text
falsetigerlimbs
post Apr 23 2006, 02:56 AM
Post #1


Senior Member
*****

Group: Official Designer
Posts: 441
Joined: Dec 2005
Member No: 330,617



I'm currently using a DIV overlay layout. I managed to place my comments into a DIV layer, but for some reason the actual comment itself is still too long. I can alter the width of the date and time table, but not the text below it. Also, I can't get the comments to appear close to the edge of the DIV; there is a huge gap at the top.

The link to my myspace: http://www.myspace.com/britgal858
(You will see the comment DIV hovering on the left side)

This is the related code from my About Me section:
CODE
{comment coding}
{hides: friends space and span text; unhides: actual comments;}
.comt td td td table, .btext, .orangetext15, .redlink {display:none;}
.comt td td td {visibility:visible; background-color:transparent !important; border:0px; width:290px;}
{ the: MAIN comt div;}
.comt {
visibility:visible;
z-index:1;
width: 300px; height: 300px;
position:absolute;
top: 2px; left: 2px;
overflow: auto;
background-color: transparent;}
table table table {width:300px;}
table table table table table table {width:20%;}


.comt td, .comt table{width:0px!important; height:0px!important; background-color:transparent!important; border:0px!important; padding:2px!important; } .comt, .comt td, .comt table, .comt td a img, .comt td td td a, .comt td b a, .comt td .redlink{visibility:visible;}
.comt td td td b{top:0px; display:inline;}
.comt td td td table, .comt .orangetext15, .redlink, .comt .btext, .rid, .frnd{display:none;}
.comt {z-index:7;}
.comt table, .comt b {position:relative; top:10px; _top: 2px; width: 290px;}
{comment LINKS and time stamp}

.comt td a {font-family: verdana; font-size: 11px; color: 666666;}
.comt td a:hover {font-family: verdana; font-size: 11px; color: 000000;  font-weight: bold; text-decoration: underline;}

.blacktext10 {width: 200px; font-family: Georgia; font-size: 11px; color: 000000; font-weight: normal; display: block; background-color: CFCFCF; }
{hides: Displaying XX of XX comments(View/Edit All Comments);}
.comt td b{display:none;}
.nametext {width: 100px; display:block;}

{resizes: linked images including friends profile pic;}
.comt td a img {width:90px; max-width:70px; width:auto; _width:90px !important;}


Any help with this issue would be greatly appreciated.
 
LittleMissSunshi...
post Apr 23 2006, 03:14 PM
Post #2


rawr?
******

Group: Official Member
Posts: 2,705
Joined: Nov 2005
Member No: 285,858



maybe you should try removing the comment code, from your div lay. becuz there is already a link saying view my comments.
 
falsetigerlimbs
post Apr 23 2006, 03:37 PM
Post #3


Senior Member
*****

Group: Official Designer
Posts: 441
Joined: Dec 2005
Member No: 330,617



I know there's already a link. But I have a redesigned copy of my layout that's not yet online where I have a space for comments. So I want to have it visible on the page. It's just hovering up there right now because I haven't uploaded my new layout yet. But I'm having issues with formatting the comments.
 
falsetigerlimbs
post Apr 23 2006, 05:47 PM
Post #4


Senior Member
*****

Group: Official Designer
Posts: 441
Joined: Dec 2005
Member No: 330,617



I managed to figure out by myself how to adjust the width of the comment text, but there's still a huge gap above it. Any ideas?
 
coldtrance
post Apr 23 2006, 06:13 PM
Post #5


There Are Strange Things Afoot At The Cirlce K
******

Group: Member
Posts: 1,130
Joined: Oct 2005
Member No: 253,395



here try using the shrink image code:
http://www.createblog.com/forums/index.php?showtopic=124161

^it makes the extra space in the table smaller and wil force your text to move to the next line. example:

before:
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

after:
aaaaaaaa
aaaaaaaa
aaaa

and to position the layer look for this:
{ the: MAIN comt div;}
.comt {
visibility:visible;
z-index:1;
width: 300px; height: 300px;
position:absolute;
top: 2px; left: 2px;
overflow: auto;
background-color: transparent;}
table table table {width:300px;}
table table table table table table {width:20%;}

you need to change those numbers that i put in bold. try making the "top:2px" into a large negative number
 
falsetigerlimbs
post Apr 23 2006, 07:04 PM
Post #6


Senior Member
*****

Group: Official Designer
Posts: 441
Joined: Dec 2005
Member No: 330,617



Thanks for that! But is there a way I can remove the huge gap where my top 8 should have been? I tried this method but it didn't do anything.

I also tried inserting this:

CODE
<style type="text/css"> td.text td.text table table table, td.text td.text table br, .rid br, td.text td.text table .orangetext15, td.text td.text .redlink, td.text td.text span.btext {display:none;} td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;} td.text td.text table {background-color:transparent!important} td.text td.text table td {font-size:0} td.text td.text {height:0}</style>
 

Closed TopicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members: