SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2009
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making a comment box appear below an HTML table that may vary in size

    Hello,

    For the code below, how can I change the CSS to make the form have the attributes listed below? I have included the most recent relevant CSS that I have tried (and it did not work).

    Thanks in advance,

    John

    Attributes:

    -The words "Add a comment" always display 30 pixels below the bottom of the HTML table being generated.

    -The top of the form's input field always displays 40 pixels below the bottom of the HTML table being generated.

    -The top of the form's submit button always displays 150 pixels below the bottom of the HTML table being generated.

    Code:
    $sqlStr = "SELECT comment.comment, comment.datecommented, login.username
    FROM comment
    LEFT JOIN login ON comment.loginid=login.loginid
    WHERE submissionid=$submissionid
    ORDER BY comment.datecommented DESC 
    LIMIT 100";			
    			
    $result = mysql_query($sqlStr);
    
    $arr = array(); 
    echo "<table class=\"commentecho\">";
    while ($row = mysql_fetch_array($result)) { 
        echo '<tr>';
        echo '<td class="commentname1">'.$row["comment"].'</td>';
    	echo '</tr>';
    	echo '<tr>';
    	echo '<td class="commentname2"><a href="http://www...com/sandbox/members/index.php?profile='.$row["username"].'">'.$row["username"].'</a>'.date('l, F j, Y &\nb\sp &\nb\sp g:i a &\nb\sp &\nb\sp  \N\E\W &\nb\sp \Y\O\R\K &\nb\sp \T\I\M\E', strtotime($row["datecommented"])).'</td>';
    	echo '</tr>';
    	}
    echo "</table>";	
    
    
    
     
    echo '<form  action="http://www...com/sandbox/comments/comments2.php" method="post"> 
        <input type="hidden" value="'.$_SESSION['loginid'].'" name="uid">
    	<input type="hidden" value="'.$submissionid.'" name="submissionid">  
    	<input type="hidden" value="'.$submission.'" name="submission">
        
    	
    	<label class="addacomment" for="title">Add a comment:</label>
    	
        <input class="commentsubfield" name="comment" type="comment" id="comment" maxlength="1000">  
    	  
        <div class="commentsubbutton"><input name="submit" type="submit" value="Submit"></div> 
    </form>
    ';
    Relevant CSS:

    Code:
    table.commentecho {
    	position:absolute;
       	left:30px;
    	top:180px;
    	text-align: left;
    	font-family: "Times New Roman", Times, serif;
    	font-weight: normal;
    	font-size: 15px;
    	color: #000000;
    	width: 800px;
    	table-layout:fixed;
    	background-color: #FFFFFF;
    	border: 2px #FFFFFF;
    	border-collapse: collapse;
    	border-spacing: 2px;
    	padding: 1px;
    	text-decoration: none;
    	vertical-align: text-bottom;	
    	margin-bottom: 30px;
    	
    }
    
    table.commentecho td {
       border: 2px solid #fff;  
       text-align: left; 
       height: 18px;
       overflow:hidden;
       
    }
    
    table.commentecho td a{
       padding: 2px;
       color: #000000;
       text-decoration: none;
       overflow:hidden;
       height: 18px;
    }
    
    table.commentecho td a:hover{
       background-color: #FFFFFF;
       padding: 2px;
       color: #FF0000;
       text-decoration: none;
       overflow:hidden;
       height: 18px;
    }	
    
    .commentname1 { width: 550px;
                overflow:hidden !important;
    			color: #000000;
    			vertical-align: 
    			
    }
    
    .commentname2 { width: 50px;
                overflow:hidden !important;
    			color: #793D00;
    			font-family:Arial, Helvetica, sans-serif;
    			font-size: 10px;
    			font-weight: bold;
    			height: 18px;
    			padding-bottom: 22px;
    			
    }
    
    .commentsubfield { display: block; margin-left: 30px; width: 390px; height: 90px; border: 1px solid #999999; padding: 5px; }	
    
    .addacomment
    	{
        display: block; /* override the default inline display */
        margin-left: 30px; /* The 30px from the left you wanted */
    	font-family:Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color:#000000;
    	}	
    	
    	
    	
    .commentsubbutton
    	{
    	display: block; /* override the default inline display */
        margin-left: 30px; /* The 30px from the left you wanted */
    	width:250px;
    	text-align: left;
        margin-bottom:3px;
        padding:0px;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color:#000000;
    	}
    Last edited by ArizonaJohn; Apr 5, 2010 at 15:04. Reason: Added the term "relevant" in two places.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    From a quick reading, it sounds like a job for

    Code:
    element {
        margin-top: Xpx;
    }
    But each element will push off the next, rather than off the table, so you wouldn't put margin-top: 150px on the submit button, but just space it away from the element before it.

    EDIT: ah, I notice that the table is positioned absolutely, which in general is not a good idea. That takes it out of the flow of the document, making it hard to position other elements in relation to it. What happens if you remove that?

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2009
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On another site, someone gave me the idea to remove the absolute positioning and that has helped me make some progress on it.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ArizonaJohn View Post
    On another site, someone gave me the idea...
    Etiquettically speaking ( ) it's better to ask a question in one forum at a time.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Or you could post in other forums, just make sure that you post the links there, that way we can ensure we don't waste our time answering something that has already been answered . We always solve every thread here so ..
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •