This is how I usually layout the form elements in the same row:
<div style="vertical-align: middle">
Field: <input id="Text3" type="text" /><input id="Button3" type="button"
value="button" />
</div>
However, it doesn't look very good, the button and the input-text don't align well (even though I've wrapped them with a vertical-align DIV).
Is there anything that can be done to make it look better (like some CSSing)?
Yeah you can style your boxes many ways, along with your button. Just look up some CSS and you are on your way. Also I would use a separate style sheet instead of the inline CSS that you have right now.
Related
My apologies in advance, I have VERY modest coding experience and am trying to get to grips with HTML...
While applying some basic code for a contact form from insightly (below/attached), I'm trying to incorporate whats discussed here
Can't seem to get it right though, would just like the field titles on the left with the actual fields behind them aligned, with a return between each and while sticking to the coding needed for it to work with Insightly..
Thanks in advance for any help!
[EDIT 1]
Thanks a lot, I have now managed to make it appear more or less as wanted with a bit of CSS (attached). Unfortunately I can't quite get it to behave as need be though, it submits to insightly fine but it doesn't clear the fields upon submit, nor have I found a working method to provide confirmation that it was sent, other than a particularly ugly alert window (especially in chrome)..Any help on 'resetting on submit' and a way of telling the user that it was sent would be great! I did try a bit of CSS from here but to no avail...
<style type="text/css">
/*************CHSE Stylesheet ***/
body {
background-color: transparent;
height:360px;
width:280px;
}
textarea {
height:70px;
width:273px;
}
</style>
<style>
form label{
display: inline-block;
width: 100px;
font-weight: bold;
}
</style>
<form name="insightly_web_to_contact" action="https://example.insight.ly/WebToContact/Create" method="post"<span style="font-size:14px;"><span style="color:#FFFFFF;font-weight:bold"><span style="font-family:Open Sans;"><input type="hidden" name="formId" value="xxxxxxxxxxxxxxx/xxxxxx=="/>
<span style="font-size:14px;"><span style="color:#FFFFFF;font-weight:bold"><span style="font-family:Open Sans;"><center>Quick Message:</center><br/>
<label for="insightly_firstName">First Name: </label><input id="insightly_firstName" name="FirstName" required="" type="text"/><br/><br/><label for="insightly_lastName">Last Name: </label><input id="insightly_lastName" name="LastName" required="" type="text"/><br/><br/><input type="hidden" name="emails[0].Label" required="" value="Work"/><label for="email[0]_Value">Email: </label><input id="emails[0]_Value" name="emails[0].Value" required="" type="text"/><br/><br/><label for="insightly_background">Message: </label><textarea id="insightly_background" name="background">
</textarea><br/><br/><center><input type="submit" value="Send Message"></center></form>
The key to attractive layouts is DIVs and CSS.
First, use DIVs to group the various input areas, and to divide each area into left/right (via float).
For example, you might want the label and the input fields to be nicely aligned:
.frmGroup{overflow:hidden;}
.frmLeft {float:left;width:120px;}
.frmRight{float:left;width:300px;}
#thisone{margin-top:50px;}
<form>
<div class="frmGroup">
<div class="frmLeft"><label for="fn">First Name:</label></div>
<div class="frmRight"><input id="fn" type="text" /></div>
</div>
<div class="frmGroup">
<div class="frmLeft">Last Name:</div>
<div class="frmRight"><input type="text" /></div>
</div>
<div id="thisone">
<textarea cols="50" rows="5"></textarea>
</div>
</form>
The float instruction is particularly useful, as it allows you to align the DIVs side-by-side. However! It also removes the DIVs from the HTML "flow", meaning that they take zero vertical space. To counter that, add overflow:____ to the parent DIV. In example, I used overflow:hidden]. In the jsFiddle at bottom, experiment by deleting/adding that line.
You can also give an ID to a specific DIV and style it to have either margin or padding above/below/left/right.
DIVs have the added advantage of being block elements, which has the same effect as adding a <br> to the end.
*Also note that the <label> tag is really only useful for buttons, checkboxes, etc. because they allow the user to click the button/checkbox by also clicking on the text label.
Here is a jsFiddle of the above demo that you can experiment with.
I have this site:
http://www.les-toiles.co/shop/amandine-dress/
I put a picture to understand better what I want.I want to position these sights integral to be in line with the "in stock".
This is code HTML:
<div class="single_variation_wrap" style="">
<div class="single_variation">
<p class="stock in-stock">Only 2 left in stock</p>
</div>
<div class="variations_button add-cart">
<div class="cart-number">
<span></span>
<div class="quantity">
<input type="number" step="1" name="quantity" value="1" title="Quantity" class="input-text qty text" size="4" min="1" max="2">
</div>
</div>
<button type="submit" class="button single_add_to_cart_button alt btn-block">
<i class="icon-cart2"></i>
Add to cart
</button>
</div>
<input type="hidden" name="add-to-cart" value="1726">
<input type="hidden" name="product_id" value="1726">
<input type="hidden" name="variation_id" value="1922">
</div>
How can I resolve this with CSS?
I tried to add this CSS code, but unfortunately not working
.cart-number {float:left;display:inline-block;}
this is not just an easy quick thing that you can get. There are much more things that need to changed. Let me see how far can I explain. Refer the attached images. For this, you should use the 'Chrome Dev Toolbar' or Firebug of Firefox, so that it helps.
First, the div block of your Wishlist button is completely outside the FORM element. So you can't make it inline, unless you move it inside the FORM element. See the 1st Image.
Now I have moved the DIV block of your Wishlist button inside the FORM element and have modified CSS for many classes and DIVs, definitely as INLINE, for demonstration. You need to really work hard to put this as modular as possible. I am sure you'll figure that out. In the next image, You'll see the effect as you wanted and see the CIRCLED section for the added or edited CSS code
Add display:inline-block; to both .button and .cart-number. It tells the elements to position themselves on the same line, and hopefully with this method you should't need to use float.
I have a very simple form for data input. Just labels with inputs. But my labels are localized, so I don't know how long text for different languages will be. This problem is easily solved with table layout:
<table>
<tr>
<td>
<label for="Text1">Short</label>
</td>
<td>
<input id="Text1" type="text" />
</td>
</tr>
<tr>
<td>
<label for="Text1">Looooooooong</label>
</td>
<td>
<input id="Text2" type="text" />
</td>
</tr>
</table>
No matter how long labels are my layout will be always nice. But us many say using table tag with non tabular data is not good. I don't now how to solve this problem with divs.
<div>
<div style="float:left; width:50px;"><label for="Text3">Short</label></div>
<div style="float:left;"><input id="Text3" type="text" /></div>
<br style="clear:left;" />
</div>
<div>
<div style="float:left; width:50px;"><label for="Text4">Looooooooong</label></div>
<div style="float:left;"><input id="Text4" type="text" /></div>
<br style="clear:left;" />
</div>
With this solution I need to use fixed size divs. Of cource I can set some big value for label divs width, but I want that my UI takes as much space as needed.
Any ideas?
The only way to really get a nice, adjustable layout similar to the one you get with an HTML table (which is semantically correct here, should someone care about this) is to use table layout in CSS, i.e. to use display: table, display: table-row, etc. It’s probably obvious how to do that. But it will have more limited browser support than an HTML table.
Any other approach has some rigidity where a guess on the widths of labels or the entire... construct has to be made.
This is what I came up with.
It's cleaner than yours, both the tabular and div approach.
The point of a so called "div layout" is to not have the not-semantic table stuck on your site like a pain in the neck. That doesn't necessarily means you need divs! A simple form and labels can do just fine.
The Code
HTML
<form>
<label>Short<input></label>
<label>Loooooooooooooooong<input></label>
</form>
CSS
form {
width: 50%;
}
label {
display: block;
}
label input {
float: right;
}
I've set the form to 50% so that you can easily resize the view port and see what happens when the width is not sufficient. This way, the input will be pushed down, but hte label won't be broken.
It's usually good to follow this rule of thumb: If a div only has one child nested inside of it, you can usually skip it. This rule works for simple designs like this (there are cases where extra divs are needed for complex design issues)
Although I am not completely clear as to what your layout needs are, I like to right-justify labels for readability:
<div>
<div style="float:left; width:104px; text-align:right; margin-right:4px;"><label for="Text3" >Short:</label></div>
<div style="float:left;"><input id="Text3" type="text" /></div>
<br style="clear:left;" />
</div>
<div>
<div style="float:left; width:104px; text-align:right; margin-right:4px;"><label for="Text4">Looooooooong:</label></div>
<div style="float:left; "><input id="Text4" type="text" /></div>
<br style="clear:left;" />
</div>
I don't know if this helps you, but after AVOIDING tables like the plague for the past 5 years I am coming to realize there are a lot of old school instances that work really well with tables. The past 2 of 5 form solutions have been inside tables. Like you said, it's "nice" and neat without a lot of extra code work.
If the table works, use it.
I have this HTML and CSS
http://jsbin.com/uciya5/3/edit
where the problem is that the radio buttons are treated as individual elements and therefore inherent the properties of class="cellData". Notice how wide the radio buttons are spaced vertically.
<div class="cellData">
<input name="ctype" value="individuel" type="radio" checked/> Individuel <br>
<input name="ctype" value="course" type="radio" /> Course </div>
</div>
Is it possible to control this vertical spacing of the radio buttons, or perhaps wrap a DIV around them to protect them?
Update
Removed template tags.
You could add another class to the div containing radio buttons:
<div class="cellData cellRadios">
with CSS (similar to this):
.cellRadios { line-height: 1 }
See: http://jsbin.com/uciya5/2
Provided that in your CSS you define .cellRadios after .cellData, the line-height from .cellRadios will be the one that's applied.
I'd probably also change .cellRadios to a better name.
If you prefer it, you could instead wrap the radio buttons in an extra div, as you suggested in your question.
<div class="cellData">
<div class="cellRadios">
<input name="ctype" value="individuel" type="radio" <TMPL_VAR IN>/> Individuel
<br>
<input name="ctype" value="course" type="radio" <TMPL_VAR CO>/> Course
</div>
</div>
You could delete this from the CellData stye: line-height:4em
You could also try using a table, it would be a lot simpler.
I have a very simple table that I would like to convert to div for example purposes. I am having no luck with this.
Here is my page: http://jsbin.com/equfo
Basically I want to convert it to div because I'm tired of having tables like these where I want the button to show in the middle of the table at hand. but since I am using tags. the middle is never middle of the TABLE but instead is the middle of the TD tag.
You just need <TD colspan="2"> for the button and it will be in the center of the table. If you have more columns in your table increase colspan appropriately.
To display this with DIVs;
<div class="searchTable">
<span>Enter SSN</span>
<div class="odd">
<span class="label">Enter Social Security <u>N</u>umber</b></span>
<input type="text" id="SearchFormerTenant_ssn1"/>-
<input type="text" id="SearchFormerTenant_ssn1"/>-
<input type="text" id="SearchFormerTenant_ssn1"/>
</div>
<div class="even" style="width: 100%; text-align:center;">
<input type="submit" id="SearchFormerTenant_0" value="Get Information"/>
</div>
</div>
Do you want to fix this particular problem or learn CSS Positioning?
If you just want a quick solution, Dave has hit the nail on the head. If you want to learn more, you could do worse than start with these tutorials:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
http://www.brainjar.com/css/positioning/
There are plenty more like them on them on the intertubes. And there are those specifically geared to form layouts:
http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml
http://designshack.co.uk/articles/10-css-form-examples
It's not that complicated, but there more to it than can be easily described here.
Hope this helps.
Although this is more suited for divs, an easy alternative would be to move the button out of the table and just text-align: center on it in its own div.