I want to make this form in HTML/CSS:
Unfortunately I can't seem to get the right style and alignment. I've been at it for hours now and whatever avenue I seem to take seems to get me nothing but garbage. Below is my best code, not very good, but it is what it is. Can anybody please help fix the code to reflect the above picture? I would truly appreciate it.
<style> * {
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.group:after {
content: "";
display: table;
clear: both;
}
.containerANE {
overflow: hidden;
background: #C6DEFF;
width: 992px;
}
.rightANE {
float: right;
width: 30px;
outline: 1px solid #8191a6;
}
.leftANE {
float: left;
width: 152px;
outline: 1px solid #8191a6;
}
.middleANE {
width:717px;
outline: 1px solid #8191a6;
}
</style>
<h1>E-mail US</h1>
<form action="file:///C:/Users/Owner/Desktop/confirmed.php" method="get">
<div class="group containerANE">
<div class="group rightANE">
<img width="25" src="http://i.imgur.com/881g5D7.png">
</div>
<div class="group leftANE">
Name
</div>
<div class="group middleANE">
<input type="text">
</div>
<div class="group rightANE">
<img width="25" src="http://i.imgur.com/881g5D7.png">
</div>
<div class="group leftANE">
Description
</div>
<div class=middleANE>
<textarea rows="4" cols="50">
</textarea>
</div>
<div class=rightANE>
<img width="25" src="http://i.imgur.com/881g5D7.png">
</div>
<div class=leftANE>
E-mail<br><br>Phone
</div>
<div class=middleANE>
<input type="text">
<br> OR <BR>
<input type="text">
</div>
<input type="submit" value="SUBMIT">
This is a representation of the code in JSFiddle.
This FIDDLE will give you a start.
HTML
<table class='holder'>
<tr>
<td>Name:</td>
<td><input type='text' size=40></input></td>
<td><div class='icondiv'></div></td>
</tr>
<tr>
<td>Desscription:</td>
<td><textarea rows=6 cols=31></textarea></td>
<td><div class='icondiv'></div></td>
</tr>
<tr>
<td>Email:</td>
<td><input type='text' size=40></input></td>
<td></td>
</tr>
<tr>
<td colspan='3' id='single'>or<div id='singlediv' class='icondiv'></div></td>
</tr>
<tr>
<td>Phone:</td>
<td><input type='text' size=40></input></td>
<td></td>
</tr>
<tr>
<td colspan='3' id='single'><input type='submit'></input></td>
</tr>
</table>
The CSS is a bit long, and it's in the fiddle in any case.
Play with the CSS to refine it to your needs.
Related
I am trying to achieve the below format design in HTML. I tried using multiple TR inside TD but i was not successful in getting the below design.
Please find the below code i have been trying:
#content {
position: absolute;
top: 110px;
left: 350px;
width: 775px;
height: 605px;
}
#content label {
display: block;
float: left;
margin-right: 4px;
vertical-align: top;
}
<div id="content">
<label>
Date Range
</label>
<label>
(Past)
<br />
<input id="myDatePast" type="text" style="width:31px;" />
</label>
<label>
(Future)
<br />
<input id="myDateFuture" type="text" style="width:31px;" />
</label>
<label>
<br />Total
<input id="myDateFuture" type="text" style="width:31px;" />Days
</label>
</div>
Well you can try something like this. I used table and css to style them.
table {
border: 1px solid #666;
border-collapse: collapse;
}
th,tr {width: 150px;}
th input {width: 50px;}
.th1-main {
border-right: 1px solid #666;
}
.th1-modify {margin-left: 60px;}
.th1-modify2 {margin-right: 60px;}
<div id="content">
<table>
<tr>
<th class="th1-main">
<span class="th1-modify">Date</span> <br>
<span class="th1-modify2">Range</span>
</th>
<th>
Past<br>
<input type="text" value="60"><br>
Date
</th>
<th>
Future<br>
<input type="text" value="360"><br>
Date
</th>
<th>
Total - <input type="text" value="420"> days
</th>
</tr>
</table>
</div>
Hope this was helpful.
table,#cell1{
border:2px solid gray;
border-collapse: collapse;
}
#total{
width:auto;height:50px;
}
#cell1{
width:100px;
height:75px;
}
td:not(.empty){
width:100px;
height:50px;
}
<div id="content">
<table>
<tr>
<td id="cell1">
<span style="float:right"><b>Date</b></span><br/><br/>
<span style="float:left"><b>Range</b></span> </td>
<td class="empty"></td>
<td>
(Past)
<br/>
<input id="myDatePast" type="text" value="60" style="width:31px;" /><br/><b>Date</b>
</td>
<td>
(Future)<br/>
<input id="myDateFuture" type="text" value="360" style="width:31px;" /><br/><b>Date</b>
</td>
<td id="total">
Total-
<input id="myDateFuture" type="text" value="420" style="width:31px;"/><b> Days</b>
</td>
</table>
</div>
A good setup would be
<table>
<tr>
<td>2</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
<tr>
<td>5</td><td>6</td>
</tr>
</table>
I have a table consisting of a lot of input elements inside td elements.
<table>
<tbody>
<td class="first">
<div>
<input type="text" />
</div>
</td>
</tbody>
</table>
The width of the input elements should be 20px. The width of the table is set to 100%. The input element in the first td should only have a min-width set so it will strech out (since the table has 100% width). I want the other inputs to have a fixed width (20px). When I do this the td elements has a much larger width than the input elements:
https://jsfiddle.net/cbzuwyrg/
Is it possible to make the td elements the same width as the input elements without setting the same width in css?
This fiddle shows what I want to achieve, but without having to set the width of the td to 20px:
https://jsfiddle.net/cbzuwyrg/1/
I guess this will work with you too .
Edit : i edited the code so all tds be the same size as the input .
table {
width:100%;
border-collapse: collapse;
}
td.first{
width:auto;
border: 1px solid #000;
}
input[type="text"] {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
}
<table>
<tbody>
<td class="first">
<div>
<input type="text" size="2">
</div>
</td>
<td class="first">
<div>
<input type="text" size="7">
</div>
</td>
<td class="first">
<div>
<input type="text" size="">
</div>
</td>
<td class="first">
<div>
<input type="text" placeholder="last" size="" >
</div>
</td>
</tbody>
</table>
The code is html and CSS no JavaScript were used .
<table>
<tbody>
<td class="first">
<div>
<input type="text" />
</div>
</td>
<td>
<div style="width:8px">
<input type="text" />
</div>
</td>
<td>
<div style="width:8px">
<input type="text" />
</div>
</td>
<td>
<div style="width:8px">
<input type="text" />
</div>
</td>
</tbody>
</table>
Add the width size to your div's
I think that the scss you are writing can be more useful if you nest it properly, this works fine just adding a calc and nesting the scss code. I hope it can helps.
In this case the td's with 20px of width use a class that stablish that width, and the inputs have a calc because when you use 100% width they use the whole space until next input.
Sass:
table {
width:100%;
border-collapse: collapse;
td {
border: 1px solid #000;
//display: inline-block;
width: 100%;
div {
input {
width: calc(100% - 4px) ;
&.td20 {
width: 20px;
}
}
}
}
}
HTML:
<table>
<tbody>
<td class="first">
<div>
<input type="text" />
</div>
</td>
<td>
<div>
<input type="text" class="td20"/>
</div>
</td>
<td>
<div>
<input type="text" class="td20" />
</div>
</td>
<td>
<div>
<input type="text" class="td20" />
</div>
</td>
</tbody>
</table>
Here you can see it working: https://jsfiddle.net/javierdp/adtj2t3o/8/
I am trying to float the submit button to the right in the form but I am facing problem the float is not being applied on the submit button Login. I have added some of server-side generated code.
Code
#login-form{
width: 400px;
background-color: #6B0000;
color: white;
}
#loginButton{
color: #6B0000;
border: 1px solid;
padding: 5px 30px 5px 30px;
background-color: white;
border-radius: 3px;
/*This one here does not work */
float: right;
}
<body>
<header id="header">
<h1>
Google Maps & Yahoo Mashup
</h1>
</header>
<DIV id="content">
<form id="login-form" name="login-form" method="post" onSubmit='return false'>
<input type="hidden" name="login-form" value="login-form" />
<table>
<tbody>
<tr>
<td><label>Email</label></td>
<td><input id="login-form:email" type="text" name="login-form:email" /></td>
</tr>
<tr>
<td><label>Password</label></td>
<td><input id="login-form:pwd" type="text" name="login-form:pwd" /></td>
</tr>
<tr>
<td><input type="submit" value="Login" id="loginButton" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" />
</form>
</DIV>
</body>
Try this one. I set a colspan of 2 to the input button and gave its parent td a width of 100%, this along with the float right should shift it to the right.
#login-form{
width: 400px;
background-color: #6B0000;
color: white;
}
#loginButton{
color: #6B0000;
border: 1px solid;
padding: 5px 30px 5px 30px;
background-color: white;
border-radius: 3px;
/*This one here does not work */
float: right;
}
/* Make the input's parent td 100%, you may want
a class here instead for browser support */
td:last-child {
width: 100%;
}
<body>
<header id="header">
<h1>
Google Maps & Yahoo Mashup
</h1>
</header>
<DIV id="content">
<form id="login-form" name="login-form" method="post" >
<input type="hidden" name="login-form" value="login-form" />
<table>
<tbody>
<tr>
<td><label>Email</label></td>
<td><input id="login-form:email" type="text" name="login-form:email" /></td>
</tr>
<tr>
<td><label>Password</label></td>
<td><input id="login-form:pwd" type="text" name="login-form:pwd" /></td>
</tr>
<tr>
<!-- setting a colspan of two -->
<td colspan="2"><input type="submit" value="Login" id="loginButton" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" />
</form>
</DIV>
</body>
I have the child tags of a tag and made the background-color of the parent tag to blue. It change the background-color of the block, but I want it color to the entire width of the web page. Even the background-image of such a tag is not even displayed. Here is my code:
<html>
<head>
<title>Login</title>
<style>
#login
{
background-color:blue;
color:white;
overflow:hidden;
}
#registration
{
background-color:white;
overflow:hidden;
}
.logintable
{
color:white;
}
</style>
</head>
<body bgcolor="white">
<div>
<div id="login">
<div style="display: inline-block; white-space: nowrap;float:left">
<font face="Monotype Corsiva" color="white" size="5">Facebook</font>
</div>
<div style="display: inline-block; white-space: nowrap;float:right">
<table class="logintable" align="right">
<tr>
<td>email:</td>
<td><input type="text" name="email" id="email"></td>
<td>password:</td>
<td><input type="password" name="pswd" id="pswd"></td>
<td><input type="submit" value="Login" onClick="return validate()"></td>
</tr>
</table>
</div>
</div>
<div id="registration" style="background-image:registration.jpg">
<div id="empty" style="float:left">
<img src="registration.jpg" height="610">
</div>
<div id="registraionform" style="float:right">
<table align="right" height="630" cellspacing="10" cellpadding="3">
<tr>
<td><B><font size="6">Sign Up</font></B></h1>
<br><br><font size="3">Its free and always will be.</font>
</td>
</tr>
<tr>
<td>Firstname <input type="text" name="First"></td>
<td>Lastname <input type="text"name="Last"></td>
</tr>
<tr><td>Gender</td><td><input type="radio"name="gender">male
<input type="radio"name="gender">female</td>
</tr>
<tr><td>phone</td><td><input type="text"name="phone"></td></tr>
<tr><td>email</td><td><input type="text"name="user"</td></tr>
<tr><td>password</td><td><input type="text"name="pass"></td></tr>
<tr><td>Re-typepassword</td><td><input type="password"name="rpass"></td></tr>
<tr><td><input type="checkbox" name="check" id="check">I agree to the terms and conditions</td><td></td></tr>
<tr><td></td><td><input type="submit"value="Sign Up"></td></tr>
</table>
</div>
</div>
</div>
</body>
</html>
Even the background-image is not loaded, I have used tag to display that pic beside sign up.
And this is the pic of the resultant page:
Setting body {margin: 0;} in the style section fixes the extra white space around the page.
I have a simple contact form within a div but I can't get it to center within the div. I have tried margins, padding, text-align:center but none of them work.
html: http://www.joekellywebdesign.com/churchsample/contact.html
<div id="contactbottomright">
<h2>Contact Form</h2>
<form action="feedback.php" method="post">
<table border="0" cellpadding="8" cellspacing="8">
<tr>
<td>
<label for="tswname">Name</label>:</td>
<td>
<input type="text" name="fullname" id="tswname" size="25" />
</td>
</tr>
<tr>
<td>
<label for="tswemail">Email address</label>:</td>
<td>
<input type="text" id="tswemail" name="email" size="25" />
</td>
</tr>
<tr>
<td colspan="2">
<label for="tswcomments">Comments</label>
<br />
<textarea rows="15" cols="35" name="comments" id="tswcomments"></textarea>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="Submit" />
<br />
</td>
</tr>
</table>
</form>
</div>
css: http://www.joekellywebdesign.com/churchsample/css/styles.css
/* rules for contact page */
#contactbottomleft {z-index:26; width:450px;height: 700px; background-color:#92B681; margin: 30px 0 0 0; float:left;position: relative;}
#contactbottomright { z-index:27; width:450px; height: 700px; margin: 30px 0 0 0px; background-color:#428C3E; float:right;position: relative;}
form {
display: inline-block;
text-align: center;
}
/* end rules for contact page */
You could set a width to the form and then add margin: 0 auto; to the CSS. For example:
HTML:
<div>
<form></form>
</div>
CSS:
form {
margin: 0 auto;
width: 300px;
}
NOTE: For this to work, you must remove display:inline-block from form.
JS Fiddle Example (using your HTML/CSS).
You must set a Width of Ancestor element and then add margin:0 auto to its child.
See demo