Member Avatar for douglas.shrader.1

I can not get this web form to align left on a landing page That I am in the middle of creating ( its no where near complete but, IO cant get the webform in the corrct spot): http://dsninformation.com/nov11/moneygirl3.php Here is the code I am trying to left align.

 <td align="left">
      <table style="width: 544px; height: 50px;" border="0"
 cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td style="width: 544px; height: 50px; text-align: left;">&nbsp;</td>
          </tr>
        </tbody>
      </table>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>
<?php $ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "http://dsdomination.com/xtreme/generate_form.php");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, true);
$data = array(
'key' => '7hgefQ6dEeCnQLaO1jo5'
);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
$output = curl_exec($ch);
$info = curl_getinfo($ch);
curl_close($ch);
echo $output;
?><br>
      </td>
    </tr>
  </tbody>
</table>

If anyone could please help me out I would greatly appreciate it.

  • 2 Contributors
  • 3 Replies
  • 208 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by douglas.shrader.1
Member Avatar for douglas.shrader.1

I have added

 <div align="left">

It doesn't change anything.
:
I also added this snippet that I found online:

<div style="margin: -530px auto 0pt; padding: 10px; width: 477px; height: 235px; position: relative; left:/>

Nothing seems to move this form to the left or right. I can move it up and down.

Member Avatar for JorgeM

First, I'd recommend that you stay away from using deprecated elements and attributes such as <center> and align. You should use CSS instead.

Anyway, a few minor changes as below should produce the results you are looking for.

First, remove the background image from the body element. Add in a new div element with an id of "wrapper". Use this element for the background image as well as for centering content on the screen... that's about it...

12580f93776daf3f75c80e2a1667fe63

Add to your <style> element...

#wrapper { width:1380px;margin:0 auto;background: url(http://dsninformation.com/images/moneygirl2.jpg); background-repeat: no-repeat}

Remove existing style from body... body{ }

Updated HTML body element...

<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
 // your javascript code here is fine.. removed just for test..
</script>

<div id="wrapper">
 <table style="width: 1366px; height: 635px; text-align: left; margin-left: auto; margin-right: auto;" id="Table_01" border="0">
  <tbody>
   <tr>
    <td style="text-align: left; vertical-align: top;">
      <div style="text-align: left;"></div>
       <p style="text-align: left;" id="heading">&nbsp;<span style="font-family: Arial Black;"><br></span>
       <span style="color: rgb(255, 185, 5); font-family: Arial Black;"></span></p>
       <p>&nbsp;</p><p></p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;<br></p>
    </td>
   </tr>
   <tr>
    <td>
     <table style="width: 544px; height: 50px;">
      <tbody>
       <tr>
        <td style="width: 544px; height: 50px; text-align: left;">&nbsp;</td>
       </tr>
      </tbody>
     </table>
    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
   </td>
  </tr>
  <tr>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>
    <div>
     <form style='margin:15px auto; width:300px;' id="mainForm" name="frmSignUp" method="post">
      <input type='hidden' id='affiliateUsername' name='affiliateUsername' value='bryong' />
      <input type='hidden' id='campaign' name='campaign' value='23Ph4R' />
      <input type='text' id='mainFormName' name='name' value='' placeholder='Your name..' />
      <input type='text' id='mainFormEmail' name='email' value='' placeholder='Your email..'  />
      <br>
      <input class='shake button green' type='submit' id='mainFormSubmitButton' style='margin-top:10px;' name='submit' value='Reserve My Spot' />
      <br>
     </form><br>
    </div>
   </td>
  </tr>
 </tbody>
</table>
</div>
</body>

I dont recommend the use of a table in the manner that you are using it. Tables are generally used to display tabular data. You may consider redesigning this using div elements instead.

If you do leave the table as is, I am confident that there are other minor changes that can be made to reduce the amount of code, inline styling/properties that you are using above. I dont have the time right now to rewrite your table, but you may want to look into it if you have the time.

Edited by JorgeM
Member Avatar for douglas.shrader.1

Thank You Jorge, I got it working. I will work on the tables and use css instead. I am not the greatest with css so it will take some time and effort.

Thanks again

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.