Google Captcha-Div-Tag verlegt wurden, wenn in mobilen und Desktop-

ich eine Frage, die sich am gesehen, während cheking die unten Seite in mobilen und desktop.The captcha TeilGoogle Captcha-Div-Tag verlegt wurden, wenn in mobilen und Desktop-

`<div class="g-recaptcha" data-sitekey="6LcahyITAAAAAOjQ8U5d9i62LBgQkjEeLrUDABOX" data-callback="onSuccess()" ></div>`

ist nicht richtig ausgerichtet wurden, wenn in mobilen gesehen und Desktop.

Kann mir jemand helfen, wie man es richtig in Desktop und Mobile ausrichten kann.

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> 
    <title>Hello</title> 
    <meta content="width=device-width, initial-scale=1" name="viewport"> 
    <meta content="IE=edge" http-equiv="X-UA-Compatible"> 
    <meta charset="utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script> 
    <script src='https://www.google.com/recaptcha/api.js'></script> 
    </head> 

    <body style="background: #f2f2f2;"> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <div style="position: relative; width:95%; max-width: 820px; height: 467px; background: #ffffff; font-family:Arial, Helvetica, sans-serif; margin:0px auto;"> 
     <div style=" position:absolute; left:0px; top:50px; width:100%; text-align:center;"> </div> 
     <div style="position:absolute; left:0px; top:160px; width:100%; font-size:24px; text-align:center; font-weight:bold;"> Hello </div> 
     <div style="position:absolute; left:0px; top:180px; width:100%; font-size:16px; text-align:center;"> <br> 
     Get the smartest tips, news and tools on parenting in one timesaving newsletter, plus more.<br> 
     <a href="http://google.com/" style="color:#e2232e; font-size:14px; text-decoration:none; white-space:nowrap;" target="_blank">See Sample</a><br> 
     <br> 
     <br> 
     </div> 
     <form method="post" style="position:absolute; left:0px; top:290px; width:100%; font-size:18px; text-align:center;" onsubmit="return validateCapcha();"> 

     <input value="" class="newsletter-email-text" style="vertical-align:middle; width:55%; max-width:250px; height:30px; padding:2px 3px; border:1px solid #dddddd; font-size:18px; background:#ffffff;" name="email" type="text" pattern="[A-Za-z0-9._+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})" placeholder="Email" title="Valid email address required" required> 
     <input value="SUBMIT" class="newsletter-email-submit-button" style="vertical-align:middle; width:95px; height:36px; line-height:36px; text-align:center; background:#ed1c24; color:#ffffff; border:0px; border-radius:3px; font-weight:bold; font-size:14px; cursor:pointer;" type="submit"> 

     <div style="position: relative; width:95%; max-width: 820px; height: 467px; font-family:Arial, Helvetica, sans-serif; margin:0px auto;"> 
     <div class="g-recaptcha" data-sitekey="6LcahyITAAAAAOjQ8U5d9i62LBgQkjEeLrUDABOX" data-callback="onSuccess()" ></div> 
     </div> 
     <p id="customeMessage" style="display:none;position:absolute;bottom:10px;vertical-align:middle;text-align:center;top:112px;left:229px;"><lable> Please check the capcha </lable></p> 


     </form> 

    </div> 

    </body> 
    </html>

Grüße

ich will -

Nun ist es wie unten kommend -

Quelle

2016-06-16 hellraizer

Hier ist Ihre Lösung (Hinzufügen Styling in diesem div)

Update 2

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> 
    <title>Hello</title> 
    <meta content="width=device-width, initial-scale=1" name="viewport"> 
    <meta content="IE=edge" http-equiv="X-UA-Compatible"> 
    <meta charset="utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script> 
    <script src='https://www.google.com/recaptcha/api.js'></script> 
    </head> 

    <body style="background: #f2f2f2;"> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <div style="position: relative; width:95%; max-width: 820px; height: 467px; background: #ffffff; font-family:Arial, Helvetica, sans-serif; margin:0px auto;"> 
     <div style=" position:absolute; left:0px; top:50px; width:100%; text-align:center;"> </div> 
     <div style="position:absolute; left:0px; top:160px; width:100%; font-size:24px; text-align:center; font-weight:bold;"> Hello </div> 
     <div style="position:absolute; left:0px; top:180px; width:100%; font-size:16px; text-align:center;"> <br> 
     Get the smartest tips, news and tools on parenting in one timesaving newsletter, plus more.<br> 
     <a href="http://google.com/" style="color:#e2232e; font-size:14px; text-decoration:none; white-space:nowrap;" target="_blank">See Sample</a><br> 
     <br> 
     <br> 
     </div> 

<table style="position:absolute; left:-25.5%; width:100%; font-size:18px; text-align:center;top:290px; vertial-align:top; "> 
<tr> 

<td style=" vertical-align:top;"> 
     <form method="post" style=" left:0px; width:150%; font-size:18px; " onsubmit="return validateCapcha();"> 

     <input value="" class="newsletter-email-text" style="vertical-align:middle; width:55%; max-width:300px; height:30px; padding:2px 3px; border:1px solid #dddddd; font-size:18px; background:#ffffff;" name="email" type="text" pattern="[A-Za-z0-9._+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})" placeholder="Email" title="Valid email address required" required><input value="SUBMIT" class="newsletter-email-submit-button" style="vertical-align:middle; width:95px; height:36px; line-height:36px; text-align:center; background:#ed1c24; color:#ffffff; border:0px; border-radius:3px; font-weight:bold; font-size:14px; cursor:pointer;" type="submit"> 
<div style="position: relative; width:95%; max-width: 820px; height: 467px; font-family:Arial, Helvetica, sans-serif; margin:0px auto;"> 

<div style=" justify-content: center; margin-top:15px; margin-left:210px" class="g-recaptcha" data-sitekey="6LcahyITAAAAAOjQ8U5d9i62LBgQkjEeLrUDABOX" data-callback="onSuccess()" ></div> 

</div> 
     <p id="customeMessage" style="display:none;position:absolute;bottom:10px;vertical-align:middle;text-align:center;top:112px;left:229px;"><lable> Please check the capcha </lable></p> 
</td> 

<td style=" vertical-align:top;"> 




</td></tr> 
</table> 

     </form> 

    </div> 

    </body> 
    </html>

Quelle

2016-06-16 18:17:31

Hallo Prashant .. Kann das Captcha div-Tag mit E-Mail-Input-Tag ausrichten werden .. – hellraizer

Sie das Captcha benötigen div direkt unter dem Eingang E-Mail-Box ?? –

Ja .. direkt unter der Eingabe-E-Mail-Box. Thanx – hellraizer

Google Captcha-Div-Tag verlegt wurden, wenn in mobilen und Desktop-

Antwort

Verwandte Themen