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
Post a Comment