Arranging Elements in HTML and using Javascript -
i quite new javascript. have been making forms here website , have unusual problem.
i want elements names, male/female, dob side side..!! when float them side side ,give width them, doesn't seem change it..!! tried searching on google , stackoverflow, isnt working here.
let me paste html , css code below people can me out..!!
html code :
<div id="form_container" class="warpshadow wlarge wnormal"> <img src = "header.png" width="100%" /> <form id="form_3" class="appnitro top_label" method="post" data-highlightcolor="#f5d678" action="#main_body"> <div class="form_description"> <h2>swim team registration fees</h2> <p>(one check can written children including required fees junior memberships.)</p> </div> <ul > <li id="pagination_header" class="li_pagination"> <table class="ap_table_pagination" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center"><span id="page_num_1" class="ap_tp_num ap_tp_num_active">1</span><span id="page_title_1" class="ap_tp_text ap_tp_text_active">fees</span></td><td align="center" class="ap_tp_arrow">></td> <td align="center"><span id="page_num_2" class="ap_tp_num">2</span><span id="page_title_2" class="ap_tp_text">registration</span></td><td align="center" class="ap_tp_arrow">></td> <td align="center"><span id="page_num_3" class="ap_tp_num">3</span><span id="page_title_3" class="ap_tp_text">release</span></td><td align="center" class="ap_tp_arrow">></td><td align="center"><span id="page_num_4" class="ap_tp_num">4</span><span id="page_title_4" class="ap_tp_text">payment</span></td> </tr> </table> <li id="li_2" > <label class="description" for="element_2"><input type="checkbox"> $120 1st child </label> </li> <li id="li_3" > <label class="description" for="element_2"><input type="checkbox"> $110 2nd child </label> </li> <div id="moveleft"> <li id="li_4" > <label class="description4" for="element_2">names </label> <input id="element_2" name="element_2" class="element text small" type="text" maxlength="255" value=""> </li> <li id="li_5"> <div> <label class="description5" for="element_5">male / female</label> <select class="element select small" id="element_5" name="element_5"> <option value="" selected="selected"></option> <option value="male">male</option> <option value="female">female</option> </select> </div> </li> <li id="li_8" class="date_field"> <label class="description">dob </label> <span class="date_mm"> <input id="element_8_1" name="element_8_1" class="element text" size="2" maxlength="2" value="" type="text" /> / <label for="element_8_1">mm</label> </span> <span class="date_dd"> <input id="element_8_2" name="element_8_2" class="element text" size="2" maxlength="2" value="" type="text" /> / <label for="element_8_2">dd</label> </span> <span class="date_yyyy"> <input id="element_8_3" name="element_8_3" class="element text" size="4" maxlength="4" value="" type="text" /> <label for="element_8_3">yyyy</label> </span> </div> </li>
i cannot attach css code here page becoming large..!! have made file can download here :css file or open in new tab , whole file viewable..!!
please me thing..!!!
you can find working example here :
http://www.ankitsuryawanshi.in/projects/form/form1/form.html
thank time , answers..!!
this might looking split form 2 columns:
<li> <div class="left"><label class="description4" for="element_2">names </label></div> <div class="right"><input id="element_2" name="element_2" class="element text small" type="text" maxlength="255" value=""></div> </li>
the main elements <div class="left">
, <div class="right">
in css file put
.left{float:left;} .right{float:right;}
play around bit.
Comments
Post a Comment