SitePoint Sponsor

User Tag List

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

    Styles for a comment box

    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
    Code:
    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



    Code:
    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>
    ';

    Code:
    .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. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Tags for this Thread

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
  •