html - Positioning textarea label above (with or without table) -


i'm trying position 2 labels ("your message:" , "your email:") top-left of each of textarea's, "your message:" on top textarea. although through method: how align label of text area top? can't work. table required work correctly? i've tried other methods function, such grouping form within -p- tag didn't work.

html

<div id="contactusform">     <p>contact us</p>         <form>             <table>             <td>             <label for="message">your message:</label>             <textarea id="message" class="contact" name="message"</textarea>             <label for="email">your email:</label>             <textarea id="email" class="contact" name="email"></textarea>             </td>             </table>         </form> </div> 

css

#contactusform {     position: absolute;     width: 1400px;     height: 400px;     top: 227px;     left: 42px;     border: 2px solid #e64a19; }  #contactusform p {     text-decoration: underline;     font-weight: bold;     position: absolute;     top: -15px;     left: 50px;     font-size: 30px; }  .contact {     position: absolute;     background: white;     border: 2px solid #e64a19; }  #message {     width: 500px;     height: 150px;     top: 100px;     left: 30px;     resize: none;     position: absolute; }  #email {     width: 500px;     height: 70px;     position: absolute;     resize: none;     top: 300px;     left: 30px; }  label {     vertical-align: top; } 

get rid of position: absolute, don't see point of using inside table in case.

<div id="contactusform">     <p>contact us</p>         <form>             <table>             <tr>             <td>             <label for="message">your message:</label>             <textarea id="message" class="contact" name="message"></textarea>             <label for="email">your email:</label>             <textarea id="email" class="contact" name="email"></textarea>             </td>             </tr>             </table>         </form> </div>      #contactusform {     width: 1400px;     height: 400px;     border: 2px solid #e64a19; }  #contactusform p {     text-decoration: underline;     font-weight: bold;     font-size: 30px; }  .contact {     background: white;     border: 2px solid #e64a19; }  #message {     width: 500px;     height: 150px;     top: 100px;     left: 30px;     resize: none;     display: block; }  #email {     width: 500px;     height: 70px;     display: block;     resize: none;     top: 300px;     left: 30px; }  label {     vertical-align: top; } 

here's jsfiddle: https://jsfiddle.net/pa4r62eu/


Comments

Popular posts from this blog

java - pagination of xlsx file to XSSFworkbook using apache POI -

Unlimited choices in BASH case statement -

apache - How do I stop my index.php being run twice for every user -