Reputation: 27
I am working on my HTML file. I have a table which contains four actuators. And these actuators have two buttons which are ON and OFF. How do I place the ON and OFF buttons side by side per actuator so that it will not look dull with its spacing per button?
Here's my code:
<FORM>
<table width='100%'>
<tr align='center'><td>
<div style='border:2px solid; border-radius:30px;padding: 30px;width:400px;background-color:#F4F4F4;'>
</FORM>
<center><font size="5" color="#1717C9" face="Arial"><B>MANUAL CONTROL</B></font>
<font face="Arial" size="3">
<form action="" method="POST" name="form">
<p class="title"> WATER PUMP </p>
<p class="form">
<input type="submit" id="on" value="ON">
<input type="hidden" name="ctl" value="1">
</form></p>
<form action="" method="POST" name="form">
<p class="lol">
<input type="submit" id="off" value="OFF">
<input type="hidden" name="ctl" value="0">
</form>
</p></font>
Thank you so much in advance!
Upvotes: 1
Views: 3640
Reputation: 1990
try something like this:
<table width='100%'>
<tr align='center'><td>
<div style='border:2px solid; border-radius:30px;padding: 30px;width:400px;background-color:#F4F4F4;'>
<center><font size="5" color="#1717C9" face="Arial"><B>MANUAL CONTROL</B></font>
<font face="Arial" size="3">
<form action="" method="POST" name="form">
<p class="title"> WATER PUMP </p>
<p class="form">
<input type="submit" id="on" value="ON">
<input type="hidden" name="ctl" value="1">
<input type="submit" id="off" value="OFF">
<input type="hidden" name="ctl" value="0">
</p>
</form>
UPDATE:
form{display:inline}
<FORM>
<table width='100%'>
<tr align='center'><td>
<div style='border:2px solid; border-radius:30px;padding: 30px;width:400px;background-color:#F4F4F4;'>
<center><font size="5" color="#1717C9" face="Arial"><B>MANUAL CONTROL</B></font>
<font face="Arial" size="3">
<form action="" method="POST" name="form">
<p class="title"> WATER PUMP </p>
<input type="submit" id="on" value="ON">
<input type="hidden" name="ctl" value="1">
</form>
<form action="" method="POST" name="form">
<input type="submit" id="off" value="OFF">
</form></font></center>
Upvotes: 1
Reputation: 3787
Here
Browsers automatically add some space (margin) before and after each <p>
element. The margins can be modified with CSS (with the margin properties).
According to HTML spec both <form>
and <p>
are block elements and you cannot nest them. Maybe replacing the <p>
with <span>
would work for you.
<FORM>
<table width='100%'>
<tr align='center'><td>
<div style='border:2px solid; border-radius:30px;padding: 30px;width:400px;background-color:#F4F4F4;'>
</FORM>
<center><font size="5" color="#1717C9" face="Arial"><B>MANUAL CONTROL</B></font>
<font face="Arial" size="3">
<!-- Style display inline for forms and remove paragraph between them and reorder hidden name ctl -->
<form action="" method="POST" name="form" style="display: inline;">
<p class="title"> WATER PUMP </p>
<input type="hidden" name="ctl" value="1">
<input type="submit" id="on" value="ON">
</form>
<form action="" method="POST" name="form" style="display: inline;">
<input type="submit" id="off" value="OFF">
<input type="hidden" name="ctl" value="0">
</form>
</p></font>
Upvotes: 2
Reputation: 323
You need to edit the markup a bit. You can use text-align: center
or even display: inline-block
but first I've tided up the HTML and CSS.
.box {
border: 2px solid #000;
border-radius:30px;
padding: 30px;
display: block;
margin: 0 auto;
width:400px;
background-color:#F4F4F4;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.title {
text-transform: uppercase;
color: #1717C9;
font-weight: bold;
font-size: 24px;
text-align: center;
}
.text {
text-transform: uppercase;
}
form {
text-align: center;
}
<div class="box">
<p class="title">
Manual Control
</p>
<form action="" method="POST" name="form">
<p class="text">
Water Pump
</p>
<input type="submit" id="on" value="ON">
<input type="hidden" name="ctl" value="1">
<input type="submit" id="off" value="OFF">
<input type="hidden" name="ctl" value="0">
</form>
</div>
Upvotes: 1