I would like the make the text field on the same line of the button, but not successful.
Need some helps.
HTML
<form id="newsletter_form">
<input type="text" placeholder="Enter you mail here ..." /><input type="image" src="images/go_button.jpg" />
</form>
CSS
#newsletter_form
{
display:inline;
vertical-align:top;
text-align:center;
}
#newsletter_form input[type="text"]
{
margin: 0;
}
Demo
http://jsfiddle.net/yokosatan/GbtZy/
Define your input[type="text"] vertical-align:top
as like this
#newsletter_form input[type="text"] {
vertical-align: top;
}
Demo
Just float the first input to the left:
Markup
<form id="newsletter_form">
<input type="text" class="lefty" placeholder="Enter you mail here ..." />
<input type="image" class="clear" src="http://s21.postimg.org/n786rdtfn/go_button.jpg" />
</form>
CSS
.lefty {
float: left;
}
.clear {
clear:both;
}
http://jsfiddle.net/GbtZy/3/
Its worth reading up on floats and how to understand them. Its important to clear after using them, otherwise other things will get a little confusing.
Floats CSS
You should select your input element and give vertical-align: middle; to be displayed properly.
#newsletter_form input
{
margin: 0;
vertical-align: middle;
}
demo
try like this..
<form id="newsletter_form">
<table>
<tr>
<td valign="top">
<input type="text" placeholder="Enter you mail here ..." />
</td>
<td valign="top">
<input type="image" src="images/go_button.jpg" />
</td>
</tr>
</table>
</form>
or Edit your css like this
#newsletter_form input[type="text"]
{
vertical-align: top;
}
you need to define input type for vertical-align work
Related
If I create a layout with tables like the old-school way:
input {
width: 100%;
padding: 5px;
}
table {
border-collapse: collapse;
padding: 0;
margin: 0;
width: 50%;
}
td {
padding: 5px;
}
<table>
<tr>
<td colspan="3"><label>Label 1:</label></td>
</tr>
<tr>
<td colspan="3"><input type="text" /></td>
</tr>
<tr>
<td><label>Label 2:</label></td>
<td> </td><td>
<label>Label 3:</label></td>
</tr>
<tr>
<td><input type="text" /></td>
<td> </td>
<td><input type="text" /></td>
</tr>
<tr>
<td colspan="3"><label>Label 4:</label></td>
</tr>
<tr>
<td colspan="3"><input type="text" /></td>
</tr>
<tr>
<td colspan="3"><label>Label 5:</label></td>
</tr>
<tr>
<td colspan="3"><input type="text" /></td>
</tr>
</table>
https://jsfiddle.net/njb69anL/
I get a layout where it is like a grid on the screen. It resizes to the width of the browser easily. Everything is spaced and placed correctly.
However, my html markup is full of table tags. If I wanted to rid myself of the table I'd start by making the markup semantic:
<div id="grp">
<label>Label 1:</label><input type="text" />
<label>Label 2:</label><input type="text" />
<label>Label 3:</label><input type="text" />
<label>Label 4:</label><input type="text" />
<label>Label 5:</label><input type="text" />
</div>
But is it even possible to achieve the same table-like layout with this little markup? It seems display: table cannot do colspan, and the trickiest part is having a row with two label,input pairs on the same row. Is it possible to achieve this without adding a whole bunch of wrapper divs and thus making the original markup messy (non-semantic) anyways?
* {
box-sizing: border-box;
}
.labels-wrapper {
display: flex;
flex-wrap: wrap;
width: 40%;
}
label {
flex-basis: 100%;
padding: 10px;
}
label:nth-child(2),
label:nth-child(3) {
flex-basis: 50%;
}
input {
margin-top: 5px;
display: block;
width: 100%;
}
<div class="labels-wrapper">
<label>Label 1:
<input type="text" />
</label>
<label>Label 2:
<input type="text" />
</label>
<label>Label 3:
<input type="text" />
</label>
<label>Label 4:
<input type="text" />
</label>
<label>Label 5:
<input type="text" />
</label>
</div>
Adding flexbox example for an alternative. Please use the "full page" button to really get a feel for how it looks.
The only way to get it looking right using the html above is with position:absolute which to me feels like a hack. I have wrapped label 2 and label 3 in a div so they may be grouped together.
The below html / css gets very close to the fiddle:
#grp {
width: 50%;
white-space:nowrap;
}
#grp label,
#grp input {
width:100%;
display:block;
clear:left;
}
#grp input {
margin-bottom:1em;
}
#grp div {
float:left;
width:49%;
}
#grp div + div {
margin-left:2%;
}
<div id="grp">
<label>Label 1:</label><input type="text" />
<div><label>Label 2:</label><input type="text" /></div>
<div><label>Label 3:</label><input type="text" /></div>
<label>Label 4:</label><input type="text" />
<label>Label 5:</label><input type="text" />
</div>
This is definitely possible. I have created a fiddle for you. It's about the same amount of content, but it is definitely more easy to manipulate than a table.
I just use:
<wrapper>
<row>
<label></label>
<input>
</row>
</wrapper>
https://jsfiddle.net/Kiaaanabal/qv89yb56/
You would use css float or inline-block and width percentage to specify the amount of space each row element consumes.
EDITED CSS Version
Example: https://jsfiddle.net/njb69anL/3/
In order for this example to work, the label and input positions would need to be next to each other for them to appear on the same row. The end result is your markup looks like the display. Using nth-child allows you to specify which element in the list to apply your rule to.
HTML
<div id="grp">
<label>Label 1:</label>
<input type="text" />
<label>Label 2:</label><label>Label 3:</label>
<input type="text" /><input type="text" />
<label>Label 4:</label>
<input type="text" />
<label>Label 5:</label>
<input type="text" />
</div>
CSS
*{
box-sizing: border-box;
}
#grp {
width: 50%;
}
input,
label {
display: block;
float: left;
width: 100%;
padding: 5px;
}
label:nth-child(3),
label:nth-child(4){
width: 50%;
}
input:nth-child(5) {
width: 49%;
}
input:nth-child(6) {
width: 49%;
margin-left: 2%;
}
For example: https://jsfiddle.net/njb69anL/2/
updated with a responsive layout
HTML
<form>
<div class="full-row">
<label>
<span>Label 1:</span>
<input type="text" />
</label>
</div>
<div class="half-row">
<label>
<span>Label 2:</span>
<input type="text" />
</label>
</div>
<div class="half-row">
<label>
<span>Label 3:</span>
<input type="text" />
</label>
</div>
<div class="full-row">
<label>
<span>Label 4:</span>
<input type="text" />
</label>
</div>
</form>
CSS
* {
box-sizing: border-box;
}
form input{
width: 100%;
padding: 5px;
}
form {
width: 80%;
overflow: hidden;
}
form > div {
float: left;
padding: 5px;
}
.full-row {
width: 100%;
}
.half-row {
width: 50%;
}
label > span{
display: block;
}
I am trying to make an html form and I have to replicate the following image:
I've done almost everything right but I can't get the positioning just right, specially on the submit button. What is the best to do this? and also how do I reposition the "message" caption next to the text box?
<style type="text/css">
form {
background-color: gray;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 20px;
width: 400px;
text-align:right;
}
#formElements{
width: 60%;
}
</style>
<body>
<form>
<div>
Name: <input type="text" name="name" id="formElements">
<p>
Email: <input type="email" name="email" id="formElements">
<p>
Message: <textarea name="message" id="formElements"> </textarea>
<p>
<input type="submit" id="button" value="send your message">
</div>
</form>
</body>
A few problems here:
1. Broken HTML
You have several places where the HTML is broken. Remember to always close your <p> tags, and close the <input> tags with a soft closing /> just for good practice.
2. Never use IDs in place of class
IDs are only ever meant to be assigned to one element. They are to be unique. If you want to assign some CSS to multiple elements, use a class:
.class
//Not
#id
3. Use Labels for text in forms
Not only can you style them independently, but you can use the for attribute to link them to your inputs.
4. Repaired CSS
I used some different CSS tricks, such as block-style display for the button to allow me to position it in the right spot.
form {
background-color: gray;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 20px;
width: 400px;
text-align:right;
}
.formElements {
width: 300px;
}
label {
display: inline-block;
vertical-align: top;
}
input[type="submit"] {
display: block;
margin-left: 95px;
}
5. Repaired HTML
Here it is. Always always always write proper HTML. It will save you a bunch of headaches.
<form>
<div>
<label>Name:</label>
<input type="text" name="name" class="formElements" />
<p>
<label>Email:</label>
<input type="email" name="email" class="formElements" />
</p>
<p>
<label>Message:</label>
<textarea name="message" class="formElements" rows="4"></textarea>
</p>
<p>
<input type="submit" id="button" value="send your message" />
</p>
</div>
</form>
Here is a JSFiddle that demo's the form for you.
I hope this helps.
Take a look at this.
There are a few things you should consider in your code:
Do Not use an ID more than once in a page, it must be specific to 1 element. Use classes instead to style multiple elements at once.
Use label tag to explain the form elements
Don't forget to close a container tag like p after opening it.
I would almost put it in a two columns table with the text on the left and the text boxes and button on the right.
I should look like this
<style type="text/css">
form {
background-color: gray;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 20px;
width: 400px;
text-align:right;
}
#formElements{
width: 100%;
}
.right {
text-align:right;
}
.wide {
width:300px;
}
</style>
<body>
<form>
<div>
<table>
<tr>
<td class="right">Name:</td>
<td class="wide"><input class = "wide" type="text" name="name" id="formElements"></td>
</tr> <tr>
<td class="right">Email:</td>
<td class="wide"> <input class="wide" type="email" name="email" id="formElements"></td>
</tr> <tr>
<td class="right">Message:</td>
<td class="wide"> <textarea class="wide" name="message" id="formElements"> </textarea></td>
</tr> <tr>
<td></td><td class="wide"><input type="submit" id="button" value="send your message"></td>
</tr>
</div>
</form>
</body>
I have this table:
<table>
<tr>
<td>
<input type="text" class="half"/>
<input type="text" class="half" />
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
</tr>
</table>
CSS:
table {
width: 100%;
border-spacing: 0;
}
.half {
float: left;
width: 50%;
}
How can I have two input fields next to each other each filling up 50% of the table cell's (natural / normal) width?
Right now, this doesn't work. The table cells containing the input fields of class half are far too wide and I can't see why this happens.
You need two things: DEMO
avoid the white-space in between inline-block element (you may then drop the float property).
include border size into width.
First, the easiest way is to remove white-space from html code and write it so :
<input ... /><input ... />
Second, is to switch to another box-model so :
box-sizing:border-box;
Add vendor-prefix whenever needed .
How about applying .half to the <td> parent?
<td class="half">
<input type="text" />
<input type="text" />
</td>
How about :
<table border="2px">
<tr>
<td>
<input type="text" class= "half"/>
<input type="text" class= "half"/>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
</tr>
</table>
.css
table {
width: 100%;
border-spacing: 0;
}
td{
padding-left: 5px;
}
.half {
float: left;
width: 49%;
margin: 2px;
}
A quick way to resolve this, wrap then inputs in a span tag. Set the span to inline-block 50%, and the inputs to 100%. Using a box model maintains the inputs in the td
http://jsfiddle.net/HgxFf/
<table>
<tr>
<td>
<span><input type="text" class="half"/></span>
<span><input type="text" class="half" /></span>
</td>
<td>
<input type="text"/><input type="text"/>
</td>
<td>
<span><input type="text"/></span>
</td>
</tr>
</table>
CSS
table {
width: 100%;
border-spacing: 0;
}
td{border:1px solid #000000;font-size:0px; }
span{
display:inline-block;
width:50%;
padding:0px
}
.half {
width: 100%;
}
input[type="text"]{
box-sizing:border-box;
}
}
I have an example here: http://jsfiddle.net/3zSbt/
I don't know how I'd even up my input boxes with eachother...
Any help would be greatly appreciated.
HTML
<div id="contactContent">
<form>
Email: <input type="text" name="firstName">
<br>
Subject: <input type="text" name="lastName">
</form>
</div>
CSS
#contactContent { margin-top: 50px; margin-left: 300px;}
input { border: none; margin-left: 50px; margin-bottom: 30px; padding-right: 50px;}
There are many ways. One way is putting your value names in label. Example:
HTML
<label>Email:</label><input type="text" name="firstName" />
<br />
<label>Subject:</label><input type="text" name="lastName" />
CSS
label{
display:inline-block;
width:100px;
}
JSFiddle.
If you wanted to use HTML you could try putting it in a table, or if you just want to use CSS have you tried this;
input {
display:inline-block;
float:left;
}
The below code is for adding a product to the basket.
Instead of just using an image as a buy button in the input, I would like to have an image or a fill in the background and HTML text above it.
<input border="0" src="/images/buy.png" type="image" />
This is the complete code:
<span class="BuyButton_ProductInfo">
<table id="BUYSECTION">
<tbody>
<tr>
<td valign="top" align="left">Count<br />
<input id="amount" class="TextInputField_ProductInfo" maxlength="6" size="3" name="AMOUNT" value="1" type="text" />
</td>
<td> </td>
<td class="BuyButton_ProductInfo">Buy<br />
<input border="0" src="/images/buy.png" type="image" />
</td>
</tr>
</tbody>
</table>
</span>
You can insert text above input elements. I'm use label element for this work. You can edit the label element position with using CSS codes.
<input src="/images/buy.png" type="image" id="myButton" />
<label for="myButton">Click me or image</label>
Not sure if I understand your question correctly either,
But if you're talking about a solid background color on the submit button, you can use
<input type="submit" style="background-color: black; color: white;" value="your text" />
Not sure I understand completely what you are trying to accomplish? Can you just set the display property in CSS?
#BUYSECTION input[type="image"] {
display:block;
}
Otherwise, can you elaborate? Maybe provide a JSFiddle link to show the issue?
EDITED
Is it that you want a clickable submit button, with a pattern or "button-like" fill, but to still have text at a different z-index "above" the button?
HTML:
<button type="submit">Buy</button>
CSS:
button{
/* reset the button style properties */
border:0;
display:block;
/* include the image and dimensions */
width:50px;
height: 20px;
background:transparent url("images/buy.png") no-repeat 50% 50%;
/* format the text */
text-align:center;
padding:5px;
font-weight:bold;
color:#333;
}
Try this:
HTML:
<input type="button" value="Texto del boton" class="imgButton" />
CSS:
.imgButton{
background-image:url(/images/buy.png);
width: 100%;
height: 100%;
}
Saludos!