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): 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, "");
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
  • 221 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by douglas.shrader.1

Dani AI

Generated

A short, practical diagnosis and robust fixes for the thread (OP: ; great direction from ).

The most common cause when a remote script (here returned via PHP/cURL) refuses to move is that the injected HTML carries its own layout (tables, inline style attributes, or a <center> wrapper) or an ancestor has a centering rule (for example text-align:center or a block with margin:0 auto). Start by locating the exact node and the rule that is forcing the layout: open the browser DevTools Elements panel and review the Styles and Computed panes to see which rule sets width, text-align or positioning. (developer.chrome.com)

If the injected form uses inline styles or high-specificity selectors, override it with a targeted rule that either (a) creates a positioned context and places the form where it belongs, or (b) forces a left alignment for the form and its children. Example (new selector names; do not copy third‑party class names verbatim):

/* positioning context */
#wrapper { position: relative; }

/* anchor the injected form to the left of the wrapper */
#wrapper .injected-form { position: absolute; left: 40px; top: 220px; width: 320px; }

/* ensure inner text is left-aligned, even if remote CSS attempts to center */
#wrapper .injected-form, #wrapper .injected-form * { text-align: left !important; }

Inline styles and specificity explain why a simple <div align="left"> had no effect; selectors and cascade determine which rule wins. Use the smallest required specificity and reserve !important only to override third‑party inline behavior. ()

Alternatives and cautions: margin:0 auto centers block elements that have an explicit width (so it won’t left-align a centered block). Negative margins are fragile and break on responsive widths. For stubborn, heavily‑styled remote HTML, consider isolating it in an iframe (keeps page styles separate) or post‑processing the returned HTML server‑side to add a wrapper class/ID that can be reliably targeted. For reference on positioning, margins and iframe isolation see the linked docs. (developer.mozilla.org)

Recommended Answers

All 3 Replies

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.