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
Related
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
I am new to html, so please try to understand if i am making any silly mistake.
I am trying to create a login window like face book. i have created a login window which looks like following:
Here i have taken a table of 2 rows first row renders 2 text boxes and a login button. second consists of 'remember me' and 'forgor password' link.
Problem is that i want 2nd row of height 12px and text "remember me " to be shown in exact center of check box not as its looking a bit down in above image.
I have written some temporary inline cssto check out look:
following is my code for this section:
<table style="float:left;margin-top:1%">
<tbody>
<tr>
<td style="padding-right: 0px;background:blue;">
<div class="uiStickyPlaceholderInput uiStickyPlaceholderEmptyInput">
<input type="text" style=" width:110px;text-align:center;"class="inputtext _5aju" id="email" name="email" placeholder="E-mail" tabindex="1" value="" aria-label="Email or Phone">
</div>
</td>
<td style="padding-right: 0px;background:red">
<div class="uiStickyPlaceholderInput">
<input type="password" style=" width:105px;text-align:center;float:right;" class="inputtext _5aju" id="pass" name="pass" placeholder="Password" tabindex="2" value="" aria-label="Password">
</div>
</td>
<td >
<button value="1" class="_42ft _42fu _5ajv selected _42g- btn btn-primary btn-small" id="loginbutton" tabindex="4" type="submit">Log In</button>
</td>
</tr>
<tr height="12" style="background:pink;">
<td height="10">
<span class="_5ajw">
<div>
<label class="_5bb4">
<input id="persist_box" style="height:10px;background:yellow" type="checkbox" name="persistent" value="1" tabindex="3">
<span style="font-size:10px;margin-top:-5px;background:yellow">Remember me</span>
</label>
<input type="hidden" name="default_persistent" value="0">
</div>
</span>
</td>
<td style="margin-top:-1%;">
<a class="_5ajx" rel="nofollow" href="https://www.google.com"
style="font-size:10px;paddig-left:2px;margin-top:-1%;background:yellow;">Forgot your password?</a>
</td>
</tr>
</tbody>
</table>
So,please can any one tell me how to adjust css to achive above mentioned.
thanks in advance. . .
Try vertical-align:middle on the span containing the Remember me text.
On a side note, I would advice you to avoid tables for this kind of layout and achieve the same layout using divs.
Ideally, you shouldn't use a table for layout purposes.
In your example, I would try removing the margins around the checkbox, leaving only the right margin like so:
<input type="hidden" name="default_persistent" value="0" style="margin: 0 5px 0 0;>
That should do the trick.
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 ...
I am using radio buttons, but I am not sure how to align them how I want. I want them to be on the same line like this :
Option 1 o Option 2 o
But they appear like this :
Option 1 o
Option 2 o
Here is my HTML, can anybody advise?
<table>
<tr>
<td>
<label for="lblMeterName" />
</td>
</tr>
<tr>
<td>
Input/Output Group :
</td>
<td>
<input type="radio" name="rdoInput" value="Yes"/> Yes
<input type="radio" name="rdoInput" value="No"/> No
</td>
</tr>
<tr>
<td>
<input type="button" id="dialogButton" name="dialogButton" value="Submit" />
</td>
</tr>
</table>
Give your radio buttons and labels a class as follows:
<input type="radio" id="radioYes" class="inline-radio" name="radioGroup" value="Yes" />
<label for="radioYes" class="inline-radio">Yes</label>
<input type="radio" id="radioNo" class="inline-radio" name="radioGroup" value="No" />
<label for="radioNo" class="inline-radio">No</label>
Then apply the following CSS:
.inline-radio {
display: inline-block;
}
This is an improvement over the float method because float often requires additional semantics to prevent undesired rendering, whereas inline-block does not.
Put them in a table like this:
<td>
<table><tr><td>
<input type="radio" name="rdoInput" value="Yes"/> Yes
</td><td>
<input type="radio" name="rdoInput" value="No"/> No
</td></tr></table>
</td>
This gives you the most flexibility concerning space in between or alignment with parent object.
You can wrap input and text into div and set float css property for div.
There are multiple solutions for this:
You could wrap another table around the radiobuttons and add each one to a table cell.
Add a <br/> after each option.
You could float the radiobuttons.
You could add a display:inline or display:inline-block to the radiobuttons.
I would prefer wrapping both the radiobutton and it's label in a <label> tag and applying float, since this would make the label clickable as well and provide you with more flexibility:
<label class="radio-label"><input type="radio" name="rdoInput" value="Yes"/> Yes</label>
<label class="radio-label"><input type="radio" name="rdoInput" value="No"/> No</label>
And the CSS:
label.radio-label {
float: left;
margin-right: 10px;
}
Add non-breaking spaces between radio buttons;
Use this:
<table>
<tr>
<td><input type="radio" name="rdoInput" value="Yes"/> Yes</td>
<td><input type="radio" name="rdoInput" value="No"/> No</td>
</tr>
<tr>
<td colspan=2><input type="button" id="dialogButton" name="dialogButton" value="Submit" />
</td>
</tr>
</table>
I have form with 2 radio buttons but both of the radio buttons can be selected,
<form class="descriptions" id="collection" method="post" action="">
<table width="200">
<tr>
<td>
<label>Collection</label>
<input type="radio" value="collection" />
</td>
<td>
<label>Delivery</label>
<input type="radio" value="delivery" />
</td>
</tr>
</table>
</form>
I know this is very easy but I can't seem to find the answer,
any help would be appreciated.
Give them the same name.
Description of the radio button control type in the HTML 4.01 specification:
Radio buttons are like checkboxes except that when several share the same control name, they are mutually exclusive: when one is switched "on", all others with the same name are switched "off".
<form class="descriptions" id="collection" method="post" action="">
<table width="200">
<tr>
<td>
<label>Collection</label>
<input type="radio" name="samename" value="collection" />
</td>
<td>
<label>Delivery</label>
<input type="radio" name="samename" value="delivery" />
</td>
</tr>
</table>
</form>
// this is the correct answer for ur following problem //