Styles for a comment box

HTML & CSS
1

Hello,

The code below contains text that says “Add a comment:”, an input field, and a submit button. What would be a good way to give these three things the characteristics below?

Characteristics:

  • The text “Add a comment:” is 30 px below
echo '<div class="subcommenttitle">'.$submission.'</div>';

if there are no comments.

  • The text “Add a comment:” is 30 px below the most recent comment (for now just use $recentcomment for the) if there is a comment has been made or if two or more comments have been made.

  • The top of the input field is always 30 px below the text “Add a comment:”.

  • The top of the submit button is always 30 px below the bottom of the input field.

Some corresponding CSS that I have tried is also below.

Thanks in advance,

John

echo '<div class="subcommenttitle">'.$submission.'</div>';


  $submission = mysql_real_escape_string($_GET['submission']);
  
   
echo '<form action="http://www...com/sandbox/comments/comments2.php" method="post"> 
    <input type="hidden" value="'.$_SESSION['loginid'].'" name="uid">  
    
	<label class="addacomment" for="title">Add a comment:</label>
    <input class="commentsubfield" name="title" type="title" id="title" maxlength="1000">  
	  
    <div class="commentsubbutton"><input name="submit" type="submit" value="Submit"></div> 
</form>
';

.commentsubfield { margin: 30px 0 30px 30px; width: 390px; height: 90px; border: 1px solid #999999; padding: 5px; }	

.addacomment
	{
    display: block; 
	margin-top: 250px;
    margin-left: 30px; 
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#000000;
	}	
	
.commentsubbutton
	{
	position:absolute;
	width:250px;
	left:30px;
    top:420px;
	text-align: left;
    margin-bottom:3px;
    padding:0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 11px;
	color:#000000;
	}
2

Hi, why can’t you just simply use margins to achieve the spacing you desire? You have an awful lot of PHP in there which makes my head hurt trying to read it lol.

Just lose the absolute positioning (if possible) and then use margins to space it out. Should be pretty straightfoward :slight_smile: