I've got a FORM which contains a 32*50 TEXTAREA and a Submit button.
Now I'd like to align horizontally two text areas that contains additional information. Ideally the three text areas (the one in which the user can type/paste and the two others) should have the same width and appear in three aligned columns.
If I wanted to do that, should I use only HTML? If so, how? A table with one row and three td? (Sample code would be most welcome).
Or would you rather suggest CSS?
textarea is inline element and they would be horizontally aligned if the container is larger enough in width. So, see http://jsfiddle.net/FATfJ/ I don't know if this is the exact one you need.
code:
<form id="a-form">
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>
</form>
#a-form textarea {width: 100px;}
Since textarea is an inline element, you can just put such elements after another. They will then appear in one line if they fit it but wrap to two or three lines if needed.
If you would rather force horizontal scrolling when there is not enough horizontal space, you can use a one-row table. There would be nothing special with the markup:
<table><tr><td><textarea ...></textarea>
<td><textarea ...></textarea>
<td><textarea ...></textarea>
</table>
But if you wish to fine-tune the rendering, then that’s best done with CSS.
If the textarea elements need labels, as they usually do, you can place them in another row of the table (at its start).
Ideally you need a nice combination on CSS and HTML. You could perhaps use fieldsets to put your fields in and then float them next to each other using CSS. You can set widths and margins etc using CSS and you should be able to line everything up this way.
You could use tables to do this but I find that they can add more code than is really required.
Related
I've got a table row which has 3 columns now. text text image(with cellspan=2 and rowspan=2)
How can I remove that padding from the right inside the td.
Basically I want to push the image to the left.
img is inside td too
the problem here is, Verticle- align try to change the values as you wanted
example code
vertical-align:baseline;
assigned generally applies to common html elements. with this change, Now everything works as supposed to.
If you want to effect the entire table, you can remove explicit width from all <td>s, and then the text will take as much space as it actually needs.
If you want to effect only one row, you can put the text and the image inside the same <td colspan=2> instead of two separate <td>s
I am building a web page that displays user information. It looks like this:
As shown in the colored legend, the form contains a label and an ordered list. CSS has been used to give both display: inline and make the list appear as a comma-separated list of group names. Here's the relevant HTML fragment:
<label>Group membership</label>
<ol>
<li>domain users</li>
<li>denied rodc password replication group</li>
</ol>
The problem
The form's width as a whole is unknown (it's fluid). The label has a fixed width in order to support right-aligned text, but the ordered list is free to consume the rest of the available space horizontally.
However, this is what happens when the list of groups becomes large:
The list needs more space than is available horizontally, so it moves down and appears detached from the label and the label/display element alignment goes out the window. This looks really bad.
What I want to achieve
The list should expand downwards as necessary, but it should remain anchored next to the label (as would happen in a table-based layout where the two cells would have vertical-align: top).
Is there a CSS technique that will allow this easily? What would be the least invasive method to achieve the goal? There are tons of forms styled in the same manner throughout the app, so radically changing the CSS could easily impact some other form and for this reason would be impractical.
Surgically targeting the HTML for the list is possible, so feel free to recommend an alternative if that would help.
Here is a fiddle of a mockup with all the relevant styles that you can use as reference.
Instead of using inline-block, float that particular label to the left, and make the list block with a margin-left – see http://jsfiddle.net/8tx24/1/
(I made the LI inline as well, because as inline-block the long value in the second LI might make it break into a new line, which looks kinda weird. But if you want that behavior, you can keep your inline-block.)
I just want a basic html box that is completely position to the left side of the webpage and overlays everything, and just to be a certain color with vertical text as demonstrated in this picture: http://postimg.org/image/l12q7hxqn/
Can this be done with HTML? I assume it would be a very basic code but I dont know what. If someone could make the code, I could figure out how to adjust the dimensions & color.
Thanks
you can use vertical-align: middle; and float:left properties in css
You can do the formatting by putting the html box inside <td> and <tr> tags and another set of <td>,<tr> tags with nothing inside them. With this, a table with one row and two table data will be created and the html box will be treated as a left-most table data of that particular table.
I have a table and a form one next to the other with Bootstrap. I have applied the well class to the form, to make it stand out. However, the well and the contained form are not aligned?
Please see my fiddle here.
How can I align the well and the form? (Notice that when both the table and form have the class span6, then all is good. However, I want span7 and span5 respectively.)
The form element's width is greater than the width defined by Bootstrap for span5, and thus some rendering engines will force the element to break out of the well.
If you absolutely have to use span5, try reducing the width of the labels, and margins of the input elements within the form.
I'm rendering a form in a table with the labels in tags (left) and text inputs in tags (right of labels).
For the sake of flexibility, I'd like to write as little css as possible and have everything magically fall into place, such that:
the cells expand to accomodate the width of the longest label
the fields on the right expand to fill the whole width of the cell
I've been trying various combinations of width:100% and width:auto on these various elements but to no avail. Is doing this possible, or should I just give up and specify hard widths like width:Npx?
Not sure what your code looks like (if you post, answers are so much better...).
Anyway: cells will expand naturally to the width of the longest element if no width is specified, BUT you can't have the element expand to the width of the cell at the same time! That would make the calculation of the width impossible. So I'd recommend fixing the inner content somehow. Input fields look great when they are all the same length...
You have two options as far as I'm concerned. Either you implement a solution with tables that allows you to have fluid lengths for your labels, or you set them as fixed widths and use table-less markup. I personally see no compelling reason to choose one solution over the other, although some web developers will do almost anything to avoid using <table> elements in their markup.
That being said, this solution is quite easy if you are using tables: http://jsfiddle.net/Wexcode/VcSXU/
td:first-child {
white-space: nowrap; /* don't allow text to wrap to the next line */
}