dongyan6910
2014-04-22 17:31
浏览 57

PHP表单CSS和定位

Thank you for taking the time to read/answer this.

First thing: my career page has a pre-made contact form that i turned into a job application. I have two layout questions:

1.) How do i get the 'checkbox' buttons to line up a little closer to each other. I tried td colspan="2" which is the case later in the form for 2 buttons (submit/reset 1 which i removed), but to no avail, "No" appears well to the right of "Yes." I'd like to have it relatively closer to "Yes."

2.) When you pull the drop down for "Experience" down, it forces the image below the form. Once you select your option, the image goes back to its place. Do i absolutely have to absolute position the graphic? Or can i add an overflow maybe to the dropdown? I can't figure it out.

FancyForm is the form i'm using.

Here is the HTML:

<form id="contact-form" name="contact-form" method="post" action="submit.php">
                              <table width="100%" border="0" cellspacing="0" cellpadding="5">
                                <tr>
                                  <td width="15%"><label for="name">Name</label></td>
                                  <td width="70%"><input type="text" class="validate[required,custom[onlyLetter]]" name="name" id="name" value="<?=$_SESSION['post']['name']?>" /></td>
                                  <td width="15%" id="errOffset">&nbsp;</td>
                                </tr>
                                <tr>
                                  <td width="15%"><label for="address">Address</label></td>
                                  <td width="70%"><input type="text" class="validate[required,custom[a-zA-Z\d\s\-\,\#\.\+]+]" name="address" id="address" value="<?=$_SESSION['post']['address']?>" /></td>
                                  <td width="15%" id="errOffset">&nbsp;</td>
                                </tr>
                                <tr>
                                  <td width="15%"><label for="telephone">Telephone</label></td>
                                  <td width="70%"><input type="text" class="validate[required,custom[onlyNumber]]" name="telephone" id="telephone" value="<?=$_SESSION['post']['telephone']?>" /></td>
                                  <td width="15%" id="errOffset">&nbsp;</td>
                                </tr>
                                <tr>
                                  <td width="15%"><label for="email">Email</label></td>
                                  <td width="70%"><input type="text" class="validate[required,custom[email]]" name="email" id="email" value="<?=$_SESSION['post']['email']?>" /></td>
                                  <td width="15%" id="errOffset">&nbsp;</td>
                                </tr>
                                <tr>
                                  <td width="15%"><label for="citizenship">US Citizen</label></td>
                                  <td width="35%"><input type="checkbox" name="citizen" value="yes">Yes</td>
                                  <td width="35%"><input type="checkbox" name="citizen" value="no">No</td>
                                  <td width="15%" id="errOffset">&nbsp;</td>
                                </tr>
                                <tr>
                                  <td width="15%"><label for="age">At Least 18</label></td>
                                  <td width="35%"><input type="checkbox" name="age" value="yes">Yes</td>
                                  <td width="35%"><input type="checkbox" name="age" value="no">No</td>
                                  <td width="15%" id="errOffset">&nbsp;</td>
                                </tr>
                                <tr>
                                  <td width="15%"><label for="previousexp">Have you worked<br> with us before?</label></td>
                                  <td width="35%"><input type="checkbox" name="previousexp" value="yes">Yes
                                  <td width="35%"><input type="checkbox" name="previousexp" value="no">No</td>
                                  <td width="15%" id="errOffset">&nbsp;</td>
                                </tr>
                                <tr>
                                  <td width="15%"><label for="subject">Experience</label></td>
                                  <td width="70%"><select name="subject" id="subject">
                                    <option value="" selected="selected"> - Choose -</option>
                                    <option value="0-5">0-5 Years</option>
                                    <option value="6-10">6-10 Years</option>
                                    <option value="11-15">11-15 Years</option>
                                    <option value="16-20">16-20 Years</option>
                                    </select></td>
                                  <td width="15%" id="errOffset">&nbsp;</td>
                                </tr>
                                <tr>
                              <td><label for="captcha"><?=$_SESSION['n1']?> + <?=$_SESSION['n2']?> =</label></td>
                              <td><input type="text" class="validate[required,custom[onlyNumber]]" name="captcha" id="captcha" /></td>
                              <td valign="top">&nbsp;</td>
                            </tr>
                            <tr>
                              <td valign="top">&nbsp;</td>
                              <td colspan="2"><input type="submit" name="button" id="button" value="Submit" />                              
                              <?=$str?>          <img id="loading" src="img/ajax-load.gif" width="16" height="16" alt="loading" /></td>
                            </tr>
                          </table>
                          </form>

CSS:

#form-container{
    padding:0px;
}

td{
    white-space:nowrap;
}

h1{
    color:#777777;
    font-size:22px;
    font-weight:normal;
    text-transform:uppercase;
    margin-bottom:5px;
}

h2{
    font-weight:normal;
    font-size:10px; 
    text-transform:uppercase;   
    color:#aaaaaa;
    margin-bottom:15px;
    border-bottom:1px solid #484848;
    margin-bottom:15px;
}

label{
    text-transform:uppercase;
    font-size:10px;
    font-family:Tahoma,Arial,Sans-serif;
}

textarea{
    color:#404040;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
}

td > button{
    text-indent:8px;
}

Thank you very much for trying to help <3

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • doujia6503 2014-04-22 17:44
    已采纳

    Remove overflow:auto from id #wrapper for your image problem

    打赏 评论
  • dtddjq9637 2014-04-22 17:43

    For your first question, you can simply place both checkboxes in the same <td></td> to get them side-by-side. Change the code to:

    <td width="35%"><input type="checkbox" name="citizen" value="yes">Yes<input type="checkbox" name="citizen" value="no">No</td>
    

    As for the image, you don't seem to have included the code pertaining to it. If you could provide the code in context around this Form so I could see how the image is being placed, it would aid in discovering why it's moving.

    打赏 评论

相关推荐 更多相似问题