html - How do you add text vertically underneath a heading -
i creating marking form , there 4 headings, 1 comments, 1 max, 1 mark , last 1 section. how create subheadings directly underneath section heading vertically inline each other.
**section** **max** **comments** **mark**
dynamic
intellij
control
active
database
underneath comments heading have 5 textboxes created centred in middle of page
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> p { text-align: center; color: red; font-weight: bold; } p1 { position: relative; left: 1040px; color: red; font-weight: bold; bottom:32px } p2 { position: relative; left: 100px; color: red; font-weight: bold; top:35px } p3 { position: relative; left: 350px; color: red; font-weight: bold; top:35px } </style> <script type="text/javascript"> function run() { // alert("running"); var ipnode = document.getelementbyid("input"); var opnode = document.getelementbyid("output"); opnode.textcontent = ipnode.value; var evalnode = document.getelementbyid("eval"); try { evalnode.textcontent = eval(ipnode.value); } catch (e) { evalnode.textcontent = e; } } </script> </head> <body> <body class="main"> <div> <p2>section</p2> <p3>max</p3> <p>comments</p> <p1>mark</p1> </div> <form action=""> <p><textarea rows="6" name="input" id="input" cols="61"></textarea> <p><textarea rows="6" name="input" id="input" cols="61"></textarea> <p><textarea rows="6" name="input" id="input" cols="61"></textarea> <p><textarea rows="6" name="input" id="input" cols="61"></textarea> <p><textarea rows="6" name="input" id="input" cols="61"></textarea> <br> <br> <input type="reset" value="clear" name="b2"></p> </form> <pre id="output"> </pre> <pre id="eval"> </pre> </body> </html>
you can simplify markup , styles quite lot.
below have outlined 1 approach divides page vertical columns, span page left right, each 1 24% width of viewport.
the <h3> subheadings lined vertically <h2> heading above , lined <textarea>s, 2 columns right.
.column { display: inline-block; width: 24%; vertical-align: top; } h2 { color: rgb(255,0,0); margin-left:35%; } h3 { height: 64px; line-height: 64px; margin: 24px 0 24px 35%; } textarea { height: 60px; } textarea, input[type="reset"] { display: block; margin: 24px auto; }<div class="column"> <h2>section</h2> <h3>dynamic</h3> <h3>intellij</h3> <h3>control</h3> <h3>active</h3> <h3>database</h3> </div> <div class="column"> <h2>max</h2> </div> <div class="column"> <h2>comments</h2> <form> <textarea name="input1" id="input1"></textarea> <textarea name="input2" id="input2"></textarea> <textarea name="input3" id="input3"></textarea> <textarea name="input4" id="input4"></textarea> <textarea name="input5" id="input5"></textarea> <input type="reset" value="clear" name="b2"></p> </form> </div> <div class="column"> <h2>mark</h2> </div>
Comments
Post a Comment