I want to make the three buttons span the entire page equally, does anybody know how?
<div class="mainNavigation">
<table>
<tr>
<td>
<form action="webPages/index.html">
<input type="submit" value="Purchase Used Cubes" />
</form>
</td>
<td>
<form action="webPages/index.html">
<input type="submit" value="Purchase Cube Products" />
</form>
</td>
<td>
<form action="webPages/index.html">
<input type="submit" value="Purchase Cube Repairs" />
</form>
</td>
</tr>
</table>
</div>
Here is the image of what the page looks like:
Set the width of table and input to 100%. A bit of explanation, setting the width of table to 100% makes it span across the page giving the input children of it equal width of (100/3)% (3 input elements) of the page width. Now setting the input width to 100% makes it span across the available space for it, which is (100/3)% of the page width.
table,
input {
width: 100%;
}
<div class="mainNavigation">
<table>
<tr>
<td>
<form action="webPages/index.html">
<input type="submit" value="Purchase Used Cubes" />
</form>
</td>
<td>
<form action="webPages/index.html">
<input type="submit" value="Purchase Cube Products" />
</form>
</td>
<td>
<form action="webPages/index.html">
<input type="submit" value="Purchase Cube Repairs" />
</form>
</td>
</tr>
</table>
</div>
Link to codepen: https://codepen.io/geekyquentin/pen/WNMEwQr
Try using this snippet it will do the job:
table,
input {
width: 100%;
}
But I suggest you use something like CSS grid, or flexbox for a better layout unless you have an engineering requirement.
If you want I can give you a good solution to it
Related
I have this registration with HTML:
<form class="registerForm" id="registerForm" action="./index_public.php?page=pilot_insert" method="post" enctype="multipart/form-data">
<table>
<tr>
<td><span>Name</span>
</td>
<td><span id="sprytextfield1">
<label>
<input type="text" name="name" id="name" tabindex="1" />
</label>
<span class="textfieldRequiredMsg">*Required</span></span>
</td>
</tr>
<tr>
<td class="style1">E-mail</td>
<td><span id="sprytextfield6">
<label>
<input type="text" name="email" id="email" tabindex="8"/>
</label>
<span class="textfieldRequiredMsg">*Required</span><span class="textfieldInvalidFormatMsg">Formato no válido.</span></span>
</td>
</tr>
</table>
<input class="btn" value=Apply name=apply type="submit" />
</form>
I want put an image next to the registration form. I tryed but I only can put it below the registration form and no next to. HELP!!!
Apply a specific width to your form and float:left and use float:right for the image
Put form and image in div and use "float" css property.
<div style="float:right">
<img src="http://assetprotectionsecured.com/wp-content/uploads/2010/12/alert_png.png"> </div>
Here is the working demo : http://jsfiddle.net/7uUK8/1/
You can try applying "display:inline-block;" to both the form and the image.
For example:
<form style="display:inline-block;"></form>
<img src="someimage" style="display:inline-block;"/>
Here's a fiddle example with your form and an image side by side: http://jsfiddle.net/VE66w/
Use div or span to make two container in body of the html one is use for form and other is use image. After that apply css according.
Just delete : "Formato no válido."
<div style="float:right"><img src="http://assetprotectionsecured.com/wp-content/uploads/2010/12/alert_png.png"></div>
If you want, image next to registration field ...
How do I align a button on the right of 2 textboxes, but vertically in the middle? (I'm going for a Windows 8 Metro feel.)
What I have:
What I want (mockup):
You can use the Table tag as follows
<table>
<tr>
<td>
<input type="text" name="textbox1">
<br>
<input type="text" name="textbox2">
</td>
<td>
<button name="abc" value="Submit" type="button">Submit</button>
</td>
<tr>
</table>
Hope it helps
I am not a HTML expert, just doing some fun coding once in a while. What I try to accomplish is to have the button in the "td" filling the remaining width, as simple as possible.
<table width="100%">
<tr>
<td>My Text</td>
<td>
<input name="x" id="y" type="text" size="4" maxlength="4" />
<input type="button" onclick="..." value="BlaBla" />
</td>
</tr>
<tr>
<td>Other Text</td>
<td>
<input name="xx" id="yy" type="text" size="20" />
<input type="button" onclick="..." value="MoreBlaBla" />
</td>
</tr>
</table>
I have tried width 100%, but this gives me an extra line. I have checked some answers such as Help with div - make div fit the remaining width here, but since I am not an expert in HTML it is getting too complex. Guess there is a very simple solution.
Well it can be done with JavaScript but it doesn't look that great.
A right-aligned, fixed width button looks better IMHO.
Try this
<td>
<input name="x" id="y" type="text" style="float:left;" size="4" maxlength="4" />
<input type="button" onclick="..." style="float:left;width:70%" value="BlaBla" />
</td>
Basically, there is no way to specify this using HTML+CSS. At some point pretty much everyone has wanted this, and it doesn't exist.
If you are sticking with HTML+CSS, if you have widths specified in some predictable way (either fixed lengths, or percentages), then you can calculate the right percentage (or other measure) to set for the button width. This is probably the best way.
If that is impossible, your next choice is javascript (which you should enhance with at least one of the many libraries that exist now to make javascript so much easier to use).
Try this:
<tr>
<td>My Text</td>
<td>
<input name="x" id="y" type="text" size="4" style="float:left;width:100px" maxlength="4" />
<div style="padding-left:100px"><input type="button" style="width:100%" value="BlaBla" /></div>
</td>
</tr>
I want to basically create this kind of layout:
What would be the best way to achieve this?
Your HTML:
<div id="login">
<div class="float_left">
Your input here <br/>
Your remember me checkbox and text
</div>
<div class="float_left">
Your second input here <br/>
And then your forget password link
</div>
<div class="float_left">
Login button here
</div>
<br style="clear:both;"/>
</div>
Your CSS:
#login {}
.float_left {float:left;}
Here's the semantically clean way to do it:
The HTML:
<form>
<fieldset>
<input id="username" placeholder="user name">
<label><input id="rememberme" type="checkbox"> Remember me</label>
</fieldset>
<fieldset>
<input id="password" type="password" placeholder="password">
Forgot your password?
</fieldset>
<input type="submit" value="Login">
</form>
The CSS:
fieldset {
display: block;
float: left;
margin-right: 8px;
}
#username, #password {
display: block;
width: 100%;
}
Or something like that. I would use labels instead of placeholders, but there weren't any labels in your mockup, so I didn't want to add extra elements.
The "best way" would be to use either flexible box model (display: box, if you have some specific sizes to give to the blocks so they'll align) or table layout (display: table). Unfortunately, Internet Explorer 6 and 7 have absolutely no support for any of them.
So I'd go with either (as this question is GWT-oriented):
a plain old <table> in an HTMLPanel (and use role=presentation for best accessibility)
FlexTable or Grid widget (which are backed by a table)
Look, I've turned Sam's answer above into UI:Binder template. (Errors are possible, I'm writing XML here by hand.)
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:style>
.float_left {float:left;}
</ui:style>
<g:HTMLPanel>
<g:HTMLPanel class='{style.float_left}'>
<g:TextBox ui:field='loginTextBox'/>
<br/>
<g:CheckBox ui:field='rememberMeCheckBox'>Remember me</g:CheckBox>
</g:HTMLPanel>
<g:FlowPanel class='{style.float_left}'>
<g:PasswordTextBox ui:field='passwordTextBox'/>
<br/>
<g:Hyperlink ui:field='passwordRestorationHyperlink'>Forgot your password?</g:Hyperlink>
</g:FlowPanel>
<g:FlowPanel class='{style.float_left}'>
<g:Button ui:field='loginButton' text='Login'>Login</g:Button>
</g:FlowPanel>
<br style="clear:both;"/>
</g:HTMLPanel>
</ui:UiBinder>
And the corresponding Java class. That should go with no surprise - #UiField and uiBinder.createAndBindUi(this) are your friends there.
I know it may sound bad, but I think tables is the best way to go in this case:
<table style="border: none;" cellspacing="0" cellpadding="0">
<tr>
<td>
<input name="login" />
</td>
<td>
<input name="password" type="password" />
</td>
<td>
<input name="login" type="submit" value="Login" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="keepMeLogged">
<label for="keepMeLogged">Keep me logged in</label>
</td>
<td>
Forgot your password?
</td>
<td>
</td>
</tr>
</table>
CSS
input[type=text] { width: 200px; }
span.keep { display: inline-block; width: 200px; }
HTML
<input type="text" /> <input type="text" /> <button>Login</button> <br />
<span class="keep"><input type="checkbox" />Keep me logged in</span>
Forgot your password?
See it live: http://jsfiddle.net/foghina/92E2a/
I'd like to be able to do something like this in HTML. It isn't valid HTML, but the intent is there:
<table>
<tr>
<th>Name</th>
<th>Favorite Color</th>
<th> </th>
<th> </th>
</tr>
<tr>
<form action="/updatePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<td><input name="name" value="John"/></td>
<td><input name="favorite_color" value="Green"/></td>
<td><input type="submit" value="Edit Person"/></td>
</form>
<td>
<form action="deletePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
<tr>
<form action="/updatePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<td><input name="name" value="Sally"/></td>
<td><input name="favorite_color" value="Blue"/></td>
<td><input type="submit" value="Edit Person"/></td>
</form>
<td>
<form action="deletePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
</table>
Obviously, I can't do this because I must not have a form tag immediately inside of of a <tr> element. The only alternatives I can see are to use nasty javascript or to change the behavior of my program.
What might be a solution that would allow me to have a form that spans multiple columns like this?
One option is to combine the columns with colspans like this:
<table>
<tr>
<th>
Name
</th>
<th>
Favorite Color
</th>
<th>
</th>
<th>
</th>
</tr>
<tr>
<td colspan="4">
<form action="/updatePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<input name="name" value="John"/>
<input name="favorite_color" value="Green"/>
<input type="submit" value="Edit Person"/>
</form>
<form action="deletePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
<tr>
<td colspan="4">
<form action="/updatePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<input name="name" value="Sally"/>
<input name="favorite_color" value="Blue"/>
<input type="submit" value="Edit Person"/>
</form>
<form action="deletePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
</table>
And style the form element's layout with CSS. Or you can go with a pure DIV based layout.
I'd vote for the nasty Javascript. It would allow to keep the layout as it is.
Use table-less design with Div's and CSS.
Eg.
<html>
<head>
<style type="text/css">
#wrapper
{
width: 600px;
}
#header
{
width: 600px;
height:30px;
}
#person
{
clear:both;
width:600px; }
.name
{
clear:both;
width: 200px;
float: left;
text-align: center;
}
.color
{
width: 200px;
float: left;
text-align: center;
}
.submit
{
width: 200px;
float: left;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="name">
<b>Name</b></div>
<div class="color">
<b>Favorite Color</b></div>
</div>
<div id="Person">
<form action="/updatePerson" method="post">
<div class="name">
<input name="name" value="John" /></div>
<div class="color">
<input name="favorite_color" value="Green" /></div>
<div class="submit">
<input type="submit" value="Edit Person" /></div>
</form>
</div>
</div>
</body>
</html>
Old posting I know, but for anyone else looking this up...
It seems to be that all responses to now are so determined to answer your question, that they're forgetting to consider there might be a much simpler way.
There may be that hidden behind your question, there's a reason you can't do this. But the "correct" HTML-valid way to do what you're trying to do is to place the entire table inside a single form. Why do you need one form to edit, and another to delete?
<form action="/updatePerson" method="post">
<table>
<thead>
<tr><th>Person Name</th><th>Fave Color</th><th> </th><th> </th></tr>
</thead>
<tbody>
<tr>
<td><input type="text" size="30" value="John" name="name_1"></td>
<td><input name="favorite_color_1" value="Green"/></td>
<td><input type="submit" value="Update" name="submit_update_1"></td>
<td><input type="submit" value="Delete" name="submit_delete_1"></td>
</tr><tr>
<td><input type="text" size="30" value="James" name="name_2"></td>
<td><input name="favorite_color_2" value="Orange"/></td>
<td><input type="submit" value="Update" name="submit_update_2"></td>
<td><input type="submit" value="Delete" name="submit_delete_2"></td>
</tr>
</tbody>
</table>
</form>
You need a bit of logic in your ASP/PHP/server-code to calculate which button-name was pushed, but you need that anyway using your proposed solution.
One solution would be if your multiple columns were actually created in DIVs instead of tables.
You could
a) combine entire table row in one form and handle it with one server-side script.
or
b) set form.action with javascript.
Nope, there isn't such form.
But, in many browsers, your usage is working like you expected, except for when you dynamicly creat DOM elements with such structure in FireFox.
Maybe you can throw away the <form> tag, use javascript to do the submit;
Or you can use <div> to do the table layout thing.
If you are using jQuery, you can do this:
<script type="text/javascript">
$(function() {
$('.rowForm').submit(function() {
//console.log($(':input',$(this).closest('tr')));
//Because u cant span a form across a table row, we need to take all the inputs, move it to hidden div and submit
var rowFormContent = $('.rowFormContent',$(this));
rowFormContent.html(''); //Clear out anything that may be in here
$(':input',$(this).closest('tr')).clone().appendTo(rowFormContent);
return true;
});
});
</script>
<tr>
...
<td>
<form action="/cool" method="post" class="rowForm" id="form_row_1">
<div class="rowFormContent" style="display: none;"></div>
<input type="submit" value="save">
</form>
</td>
</tr>
The side effect is you'll get an extra submit input type in your form, but it will be hidden and should not hurt anything. A subtle note here, is the use of ':input'. This is jQuery shorthand for all input types (select,textarea etc). Watch out for select vals not being copied. You'll have to do some trickery (hidden field) to submit the current selected val of a clone()d select.
I've tried numerous ways to solve the same issue; multiple forms within a single html table. FF & Chrome will automagically close if is placed before or within a or because its not semantically correct html. I appreciate based layout would solve the problem but if you 'need' to stick with the table based layout you'll need to use multiple tables and wrap the & immediately before and after the & tags. In my case I then made some small inline CSS adjustments to remove a border or two and then the table butts up against each other as if they were rows.
Example at: http://jsfiddle.net/chopstik/ve9FP/
I encountered the same issue, solved it using Javascript/jQuery.
The problem here is that form can't stretch across multiple columns in a table, however if the form has id <form id="unique_per_page"...></form> each of the stand-alone form elements like input, select or even textarea can be assigned to that form using form attribute <input type="text" name="userName" form="specific_form_id">
The jquery/javascript to assign these things will need to have a random string generator, which I grabbed from the following Stackoverflow answer
So overall the code will look like this:
$("table tr").each(function(i, el){
if(!$(el).find("form[name='updatePerson']").attr("id"))
{ //if the form does not have id attribute yet, assign a 10-character random string
var fname = (Math.random().toString(36)+'00000000000000000').slice(2, 10+2);
$(el).find("form[name='updatePerson']").attr("id",fname); //assign id to a chosen form
$(el).find("input").attr("form",fname); //assign form attribute to all inputs on this line
$(el).find("form[name='deletePerson'] > input").removeAttr("form"); //remove form attribute from inputs that are children of the other form
}
});
The HTML code you included will need to be updated with the proper name attributes for the forms
<table>
<tr>
<th>Name</th>
<th>Favorite Color</th>
<th> </th>
<th> </th>
</tr>
<tr>
<form action="/updatePerson" name="updatePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<td><input name="name" value="John"/></td>
<td><input name="favorite_color" value="Green"/></td>
<td><input type="submit" value="Edit Person"/></td>
</form>
<td>
<form action="deletePerson" name="deletePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
<tr>
<form action="/updatePerson" name="updatePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<td><input name="name" value="Sally"/></td>
<td><input name="favorite_color" value="Blue"/></td>
<td><input type="submit" value="Edit Person"/></td>
</form>
<td>
<form action="deletePerson" name="deletePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
</table>
The way I've always done it is:
<tr>
<td><form><input name=1></td>
<td><input name=2></td>
<td><input type=submit></form></td>
</tr>
Include the form inside the first and last td, so it's in an actual text area. It's possible that really old browsers will close the form at the /td, but none today.
With your example:
<tr>
<td>
<form action="/updatePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
</td>
<td> <input name="name" value="John"/></td>
<td> <input name="favorite_color" value="Green"/></td>
<td>
<input type="submit" value="Edit Person"/>
</form>
</td>
<td>
<form action="deletePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>