After spending the last hour trying to center a form for a name without success, I have decided to seek help here. Although I have searched extensively, I am still struggling at this point.
Here is my HTML:
<div id="main" class="main">
<table border="0" class="container1">
<tr>
<td>
<p>
<img src="images/doesitfit.png" />
</p>
</td>
</tr>
</table>
<table border="0">
<div class="container2">
<input type="text" value="Enter Your First Name" id="form" onblur="javascript:if(this.value=='')this.value='Enter Your First Name';" onclick="javascript:if(this.value=='Enter Your First Name')this.value='';"></input>
</div>
</table>
</div>
Below is my CSS:
.main {
background-color: rgba(11, 11, 11, 0.8);
width: 800px;
height: 550px;
border-radius:15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
margin-left: auto;
margin-right: auto;
min-height: 10em;
height:100%;
overflow:hidden;
}
.container1 {
table-layout: fixed;
height:50%;
overflow:hidden;
width: 802px;
border-color:#ff0000;
border-radius:15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
margin-left: auto;
margin-right: auto;
min-height: 10em;
color:white;
margin: auto;
}
.container2 {
}
#form {
font-size: 19px;
border: 0px solid;
color: #7a7a7a;
height:28px;
width:295px;
text-align:center;
margin: auto;
}
I also intend to include additional forms (inputs) such as Email and phone number.
Thank you in advance for any assistance provided. I truly appreciate it.