2013-03-01 2 views
0

Хорошо, поэтому я пытаюсь настроить часть формы Aweber на своей странице. В форме есть кнопка, которую пользователи нажимают, чтобы присоединиться к списку рассылки. Я хочу поместить над ним какой-либо текст (чтобы я мог разбить текст A: B позже). Я создал второй div и абсолютно позиционировал текст, чтобы сделать это, он работает отлично.Ссылка на изображение по форме

Проблема в том, что пользователь наводит курсор на кнопку. В любом месте, где текст находится над изображением, он отрицает связь. Пожалуйста помоги.

Вы можете увидеть страницу в Интернете по адресу www.pregnantatlast.com

Вот код:

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<!-- InstanceBeginEditable name="doctitle" --> 
<title>Pregnant At Last - Conditions that Stop Pregnancy, Solutions</title> 
<!-- InstanceEndEditable --> 
<style type="text/css"> 
</style> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
<!-- InstanceBeginEditable name="head" --> 
<!-- InstanceEndEditable --> 
</head> 
<body> 
    <div id="header"> 
     <div id="header_txt"> 
        Pregnant At Last 
     <h1>Increase Fertility - Get Pregnant - Naturally</h1> 
     </div> 
     <div id="menu"> 
      <ul> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="causes.html">Causes</a></li> 
       <li><a href="miscarriage.html">Miscarriage</a></li> 
       <li><a href="nutrition.html">Nutrition</a></li> 
       <li><a href="conditions.html">Conditions</a></li> 
      </ul> 
     </div><!--End menu--> 
    </div><!--End header--> 
    <!-- InstanceBeginEditable name="Content" --> 
    <div id="content_bg"> 
     <div id="content"> 
     <h1>Common fixable conditions often lead to infertility.</h1> 
     <div class="picture"> <img src="Assets/Images/44037990.jpg" width="301" alt="Couple with Doctor" /> 
     </div> 
     <div id="caption"> 
      <p>2/3 of all infertility cases are linked to the woman. &nbsp; Many can be helped.</p> 
     </div> 
     <div id="list"> 
      <ul> 
      <li>Environmental factors are known to block conception</li> 
      <li>Some medical treatments alter sperm production and cause ovarian problems</li> 
      <li>Simple lifestyle changes can fix many conditions</li> 
      <li>How to breathe so your body heals itself</li> 
      <li>Herbs that help your body clense</li> 
      </ul> 
      <p> Learn what to <span>do</span> and more importantly, what <span> not to do</span>. </p> 
      <p> Heal your <span>body</span> and become <span>fertile</span> in no time! </p> 
     </div> 
     <!--End list--> 
     <div id="formbox"> 
      <h2>Learn Secrets to Get Pregnant<br />Naturally in Months</h2> 
      <div id="formtxt"> 
      <h3>Sign up for a FREE 7 day course and recieve:</h3> 
      <p>-10 Household Chemicals you Must Avoid</p> 
      <p>-Simple technique to double chances of conception</p> 
      <p>-Ways to help your parner increase his sperm count</p> 
      </div> 
      <!--End formtxt--> 
      <div id="form"> 
      <!-- AWeber Web Form Generator 3.0 --> 
      <style type="text/css"> 
        #af-form-69035635 .af-body .af-textWrap{width:98%;display:block;float:none;} 
        #af-form-69035635 .af-body input.text, #af-form-69035635 .af-body textarea{background-color:#FFFFFF;border-color:#919191;border-width:1px;border-style:solid;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:12px;font-family:Verdana, sans-serif;} 
        #af-form-69035635 .af-body input.text:focus, #af-form-69035635 .af-body textarea:focus{background-color:#FFFAD6;border-color:#030303;border-width:1px;border-style:solid;} 
        #af-form-69035635 .af-body label.previewLabel{display:block;float:none;text-align:left;width:auto;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:12px;font-family:Verdana, sans-serif;} 
        #af-form-69035635 .af-body{padding-bottom:0px;padding-top:5px;background-repeat:no-repeat;background-position:inherit;background-image:none;color:#000000;font-size:11px;font-family:Verdana, sans-serif;} 
        #af-form-69035635 .af-quirksMode{padding-right:10px;padding-left:10px;} 
        #af-form-69035635 .af-standards .af-element{padding-right:10px;padding-left:10px;} 

        #af-form-69035635 .buttonContainer input.submit{background-color:#c20606;background-image:url("http://www.pregnantatlast.com/Assets/Images/button_arrow3.jpg");color:#FFFFFF;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Verdana, sans-serif;} 

        #af-form-69035635 .buttonContainer input.submit{width:auto;} 
        #af-form-69035635 .buttonContainer{text-align:center;} 
        #af-form-69035635 button,#af-form-69035635 input,#af-form-69035635 submit,#af-form-69035635 textarea,#af-form-69035635 select,#af-form-69035635 label,#af-form-69035635 optgroup,#af-form-69035635 option{float:none;position:static;margin:0;} 
        #af-form-69035635 div{margin:0;} 
        #af-form-69035635 form,#af-form-69035635 textarea,.af-form-wrapper,.af-form-close- 
        #af-form-69035635 img{float:none;color:inherit;position:static;background-color:none;border:none;margin:0;padding:0;} 
        #af-form-69035635 input,#af-form-69035635 button,#af-form-69035635 textarea,#af-form-69035635 select{font-size:100%;} 
        #af-form-69035635 select,#af-form-69035635 label,#af-form-69035635 optgroup,#af-form-69035635 option{padding:0;} 
        #af-form-69035635,#af-form-69035635 .quirksMode{width:329px;} 
        #af-form-69035635.af-quirksMode{overflow-x:hidden;} 
        #af-form-69035635{background-color:#FFFFFF;border-color:transparent;border-width:1px;border-style:solid;} 
        #af-form-69035635{display:block;} 
        #af-form-69035635{overflow:hidden;} 
        .af-body .af-textWrap{text-align:left;} 
        .af-body input.image{border:none!important;} 
        .af-body input.submit,.af-body input.image,.af-form .af-element input.button{float:none!important;} 
        .af-body input.text{width:100%;float:none;padding:2px!important;} 
        .af-body.af-standards input.submit{padding:4px 12px;} 
        .af-clear{clear:both;} 
        .af-element label{text-align:left;display:block;float:left;} 
        .af-element{padding:5px 0;} 
        .af-form-wrapper{text-indent:0;} 
        .af-form{text-align:left;margin:auto;} 
        .af-quirksMode .af-element{padding-left:0!important;padding-right:0!important;} 
        .lbl-right .af-element label{text-align:right;} 
        body { 
        } 
        </style> 
      <form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl" > 
       <div style="display: none;"> 
       <input type="hidden" name="meta_web_form_id" value="69035635" /> 
       <input type="hidden" name="meta_split_id" value="" /> 
       <input type="hidden" name="listname" value="4pregnantatlast" /> 
       <input type="hidden" name="redirect" value="http://pregnantatlast.com/welcome.hmtl" id="redirect_6f08e83ce4f3bc074b25117c5105d14d" /> 
       <input type="hidden" name="meta_redirect_onlist" value="http://pregnantatlast.com/welcome.hmtl" /> 
       <input type="hidden" name="meta_adtracking" value="Pregnant_At_Last_Form" /> 
       <input type="hidden" name="meta_message" value="1" /> 
       <input type="hidden" name="meta_required" value="name,email" /> 
       <input type="hidden" name="meta_tooltip" value="" /> 
       </div> 
       <div id="af-form-69035635" class="af-form"> 
       <div id="af-body-69035635" class="af-body af-standards"> 
        <div class="af-element"> 
        <label class="previewLabel" for="awf_field-42946097">Name: </label> 
        <div class="af-textWrap"> 
         <input id="awf_field-42946097" type="text" name="name" class="text" value="" tabindex="500" /> 
        </div> 
        <div class="af-clear"></div> 
        </div> 
        <div class="af-element"> 
        <label class="previewLabel" for="awf_field-42946098">Email: </label> 
        <div class="af-textWrap"> 
         <input class="text" id="awf_field-42946098" type="text" name="email" value="" tabindex="501" /> 
        </div> 
        <div class="af-clear"></div> 
        </div> 
        <div class="af-element buttonContainer"> 
        <input name="submit" id="af-submit-image-69035635" type="image" class="image" style="background: none;" alt="Submit Form" src="http://www.pregnantatlast.com/Assets/Images/button_arrow3.jpg" tabindex="502" /> 
        <div class="af-clear"></div> 
        </div> 
       </div> 
       </div> 
       <div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=bJwMzKxszKw=" alt="" /></div> 
      </form> 
      <script type="text/javascript"> 
         <!-- 
         (function() { 
          var IE = /*@[email protected]*/false; 
          if (!IE) { return; } 
          if (document.compatMode && document.compatMode == 'BackCompat') { 
           if (document.getElementById("af-form-69035635")) { 
            document.getElementById("af-form-69035635").className = 'af-form af-quirksMode'; 
           } 
           if (document.getElementById("af-body-69035635")) { 
            document.getElementById("af-body-69035635").className = "af-body inline af-quirksMode"; 
           } 
           if (document.getElementById("af-header-69035635")) { 
            document.getElementById("af-header-69035635").className = "af-header af-quirksMode"; 
           } 
           if (document.getElementById("af-footer-69035635")) { 
            document.getElementById("af-footer-69035635").className = "af-footer af-quirksMode"; 
           } 
          } 
         })(); 
         --> 
        </script> 
      <!-- /AWeber Web Form Generator 3.0 --> 
      </div> 
      <!--End form--> 
     <div id="button_ttl"> Successful Pregnancy<br /> 
      Starts Here </div> 
      <!--End button_ttl--> 
     </div> 
     <!--End formbox--> 
     <div id="arrow"> <img src="Assets/Images/red-arrow.png" width="252" height="415" alt="Arrow" /> </div> 
     <!--End arrow--> 
     <!--End content--> 
     </div> 
     <!--End content--> 
     </div> 
     <!--End content--> 
    </div><!--End content_bg--> 
    <!-- InstanceEndEditable --> 
     <div id="footer"> 
     <div id="ft_menu"> 
     <ul> 
       <li><a href="service.html">Terms of Service</a></li> 
<li><a href="disclaimer.html">Disclaimer</a></li> 
       <li><a href="sitemap.html">Site Map</a></li> 
       <li><a href="privacy.html">Privacy Policy</a></li> 
       <li><a href="contact.html">Contact Us</a></li> 

      </ul> 
     </div><!--End ft_menu--> 
     <div id="foot_txt"> 
      Pregnant At Last<br /> 
      4043 Mahinahina Pl.<br /> 
      Lahaina, HI 96761<br /> 
     </div> 
     </div> 
</body> 
<!-- InstanceEnd --></html> 

ответ

0

Я не эксперт. Но я знаю, что у меня было что-то подобное с текстом над изображениями. И я установил его Changin Z-индексы

попробуйте использовать положительные Z-индексы

надеюсь, что это помогает.

Вот еще один стек о Z-индекс и ссылки на картинку: Link using z-index can't be clicked even though it's on top, in both Firefox & IE

+0

ли это вам помочь? – Kus

0

Вы просто пропустить перенаправлять страницу.

Изменение:

<input type="hidden" name="redirect" value="http://pregnantatlast.com/welcome.hmtl" id="redirect_6f08e83ce4f3bc074b25117c5105d14d" /> 

To:

<input type="hidden" name="redirect" value="http://pregnantatlast.com/welcome.html" id="redirect_6f08e83ce4f3bc074b25117c5105d14d" /> 
Смежные вопросы