I have a text input field and 2 buttons on the next line within a dialog box.
How may I line up the input field in the center of the dialog and align the buttons to the right hand edge of the input field?
I have managed to achieve the results I'm after with the following code, but it feels like there must be a better way as this aligns the text input to the right also:
<style>
.container
{
border: 1px solid #ccc;
text-align: right;
width: 100%;
padding-right: 20px;
}
</style>
<div class="container">
<p><input id="selContactLists" name="selContactLists" type="text" class="textbox" id="textbox" /></p>
<input name="" type="button" value="Button"/>
<input name="" type="button" value="Button"/>
CSS:
.container {
display: inline-block;
}
input.text {
width: 150px;
display: block;
}
.right {
float: right;
}
HTML:
<div class="container" >
<input type="text" class="text" />
<span class="right">
<input type="button" value="button" />
<input type="button" value="button" />
</span>
</div>
Working example: http://jsfiddle.net/GTTFY/
<style>
.container
{
margin-left:auto;
margin-right:auto;
width:150px;
}
</style>
<div class="container" >
<input name="" type="text" class="textbox" id="textbox" />
<input name="" type="button" style="float:right;" value="Button"/>
<input name="" type="button" style="float:right;" value="Button"/>
</div>
<style>
.test
{
margin-left:auto;
margin-right:auto;
}
.test td
{
float:right;
}
</style>
<table class="test">
<tr>
<td colspan=2><input name="" type="text" class="textbox" id="textbox" /></td>
</tr>
<tr>
<td><input name="" type="button" value="Button"/> </td>
<td><input name="" type="button" value="Button"/> </td>
</tr>
</table>
Related
How can I do that?
My HTML code is
<p> <input type="text" name="Usuari" size="20" maxlength="60"/>
<p>CLAU:</label> <input type="text" name="Clau" size="20" maxlength="20" /></p>
<p><input type="submit" name="submit" value="ACCÉS" /></p>-->
and my CSS code is
input {
padding: 5px;
font-weight: bold;
font-size: 1em;
color: #008040;
background: #FFFFFF;
border:1px dotted #004080;
}
I would place "USUARI:" and "CLAU:" into div with class and give them fixed size.
<div>
<div>
<div class="hints">
USUARI:
</div>
</div><input type="text" name="Usuari" size="20" maxlength="60"/>
</div>
<div>
<div class="hints">CLAU:
</div>
<input type="text" name="Clau" size="20" maxlength="20" />
</div>
</div>
<input type="submit" name="submit" value="ACCÉS" />
<style>
input {
padding: 5px;
font-weight: bold;
font-size: 1em;
color: #008040;
background: #FFFFFF;
border:1px dotted #004080;
}
.hints
{
width: 80px;
float: left;
}
</style>
https://jsfiddle.net/gm5wtw1e/
There are several ways to do that.
You can either use flex or with just a plain table:
<table>
<tr>
<td>Name:</td>
<td><input name="name"></td>
</tr>
<tr>
<td>Sur Name:</td>
<td><input name="surname"></td>
</tr>
</table>
---
<table>
<tr>
<td style="text-align: right;">Name:</td>
<td><input name="name"></td>
</tr>
<tr>
<td>Sur Name:</td>
<td><input name="surname"></td>
</tr>
</table>
p{
display: table-cell;
text-align: right;
}
input {
display: table-cell;
}
div.row{
display:table-row;
}
<div class="row"><p> <input type="text" name="Usuari" size="20" maxlength="60"/></div>
<div class="row"><p>CLAU:</label> <input type="text" name="Clau" size="20" maxlength="20" /></p></div>
<p><input type="submit" name="submit" value="ACCÉS" /></p>
label
{
display: block;
}
label span
{
display: inline-block;
text-align: left;
width: 100px;
}
<label>
<span>USARI:</span>
<input type="text" />
</label>
<label>
<span>CLAU:</span>
<input type="text" />
</label>
<label>
<span></span>
<input type="password" />
</label>
there are few error in your HTML code, you close the tag label but you never open it.
You should also wrap your fields in tag and wrap your label in tag .
You don't need to open the tag all the time, you can open it and close it at the beginning and at the end of the form.
There is also a --> at the end of the code, I assume that's another mistake.
Here is my solution to your question:
HTML
<label>
<span>USARI:</span>
<input type="text" />
</label>
<label>
<span>CLAU:</span>
<input type="text" />
</label>
<label>
<span></span>
<input type="password" />
</label>
And here is my css code:
CSS
label
{
display: block;
}
label span
{
display: inline-block;
text-align: left;
width: 100px;
}
You can now play with the CSS code in order to find the design that you like the most.
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 have two queries as stated below:-
1) I want to move the blue colored rectangular box (containing username and password text fields) to the center of the page. I tried using   to change the location of the rectangular box but strange, it is not moving at all.Is there any parameter in HTML which can help me shift this box to the center of the page? Can anyone suggest me how can I achieve this?
2) The BORDER = 8 parameter is not working as here I want to set a dark black colored border around my rectangular box. Can anyone suggest what can be the cause of this issue?
To replicate the issue which I am facing, copy the below codes in a .TXT file and save it as .HTML file. Open in IE or Firefox browser to see the issue which I am getting.
Code:
<html>
<form id="login" action="index.html">
<div style="width: 450px; height: 250px; background: blue;BORDER=8"><br/><br/><br/>
<strong>Username: </strong> <input type="text" name="userid" size="18" maxlength="18"/><br/> <br/>
<strong>Password : </strong> <input type="password" name="pswrd" size="18" maxlength="18"/> <br/><br/><br/>
<input type="submit" value="Submit">
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form"/>  
</div><br/><br/>
</form>
</html>
if you only want to center horizontally try with: margin:0 auto;
http://jsfiddle.net/P2rQK/
<div style="width: 450px; height: 250px; background: blue;margin:0 auto;">
<form id="login" action="index.html">
<strong>Username: </strong> <input type="text" name="userid" size="18" maxlength="18"/>
<strong>Password : </strong> <input type="password" name="pswrd" size="18" maxlength="18" />
<input type="submit" value="Submit" />
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form" />
</form>
</div>
It is bad to use to position elements. also <br /> is not a "clean" way.
If you want truly dynamic positioning, use the below which is not reliant on specifying dimensions. Critically it uses a CSS tabulated layout to do the position calculations. The border can be achieved by giving your form a border:8px solid black;
You should also move your styles out from being specified inline- and use CSS to control your layout instead of reliance on so much HTML (such as ).
Demo Fiddle
HTML
<div class='table'>
<div class='cell'>
<form id="login" action="index.html">
<label>Username:</label>
<input type="text" name="userid" size="18" maxlength="18" />
<br />
<label>Password :</label>
<input type="password" name="pswrd" size="18" maxlength="18" />
<br />
<input type="submit" value="Submit" />
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form" />
</form>
</div>
</div>
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
label {
font-weight:bold;
margin-right:10px;
}
.table {
display:table;
text-align:center;
width:100%;
height:100%;
table-layout:fixed;
}
.cell {
display:table-cell;
vertical-align:middle;
}
form {
display:inline-block;
border:8px solid black;
width: 450px;
padding:50px 0;
background: blue;
}
input {
margin-bottom:15px;
}
although this is not a js-question:
<div style="position: absolute; left: 50%; margin-left: 225px; width: 450px; height: 250px; background: blue; border: 8px solid black"> content </div>
position absolute, left 50% and margin-left: -225px (half width) will position the box in the middle of the screen.
border: 8px solid black is the right way to define a border of 8px width
You will need to add margin: 0 auto; to your blue box.
Look at this Demo
<div style="border-width:8px;border-color:red;border-style:solid;width:450px;height:1050px;background-color:gold;"> content </div>
I would advise using a lot more CSS and less use of the and <br>.
` <html>
<style>
#login {
left: 50%;
width: 200px;
margin-left: -225px;
position: relative;
}
div {
width: 450px;
height: 250px;
background: blue;
border:8px solid #000;
padding:20px;
}
</style>
<form id="login" action="index.html">
<div>
<strong>Username: </strong> <input type="text" name="userid" size="18" maxlength="18"/><br>
<strong>Password : </strong> <input type="password" name="pswrd" size="18" maxlength="18"/><br>
<input type="submit" value="Submit"><br>
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form" />
</div>
</form>
</html>`
Try playing around with margins to get the positioning correct.
Below is my code, first of all:
How do I get rid of the big margin to the right that occurs between the labels and the input fields? I tried setting the margin-right to -150px which made it smaller but that just seems like an idiotic solution..
How can I remove the need to write <br /> to make them hop down a line automatically? I was told never to use <br />, it also seems messy.
HTML:
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<label>In-game username:</label>
<input name="username" type="text"></input><br />
<label>Email:</label>
<input name="email" type="text"></input><br />
<label>Game:</label>
<input name="game" type="text"></input><br />
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
CSS:
label {
display: block;
float: left;
width: 120px;
margin-right: 5px;
text-align: right;
}
You can try something like this
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<p>
<label>In-game username:</label>
<input name="username" type="text"></input>
</p>
<p>
<label>Email:</label>
<input name="email" type="text"></input>
</p>
<p>
<label>Game:</label>
<input name="game" type="text"></input>
</p>
<p></p>
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
and then the css
p label {
display: block;
float: left;
width: 120px;
margin-right: 5px;
}
p input{
float:right;
}
p{
clear:both;
}
form{
width:20em;
}
http://jsfiddle.net/V92PT/1/
But the fields part on table
like this
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<table><tr><td><label>In-game username:</label></td>
<td> <input name="username" type="text"></input></td ></tr>
<tr><td> <label>Email:</label></td>
<td> <input name="email" type="text"></input></td></tr>
<tr><td> <label>Game:</label></td>
<td>
<input name="game" type="text"></input>
</td></tr>
</table>
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
or add another <br/> after <label>In-game username:</label>
or use <p></P> for each row
I created a table to display a shopping cart. My first two rows line up perfectly, but the last row doesn't. I tried recreating it and still can't figure out what I'm doing wrong. Any ideas?
To make it more readable, I took out the first two rows and just left the last row that is causing the problems.:
CSS
.gallery-list
{
}
.gallery-list .container
{
clear:both;
width:100%;
padding-top:10px;
padding-bottom:10px;
}
.gallery-list .container .imgContainer
{
width:25%;
float:left;
padding-top:5px;
}
.gallery-list .container .imgContainer img
{
width:98%;
}
.gallery-list .container .descContainer
{
width:74%;
float:left;
padding-left:5px;
}
.gallery-grid
{
}
.gallery-grid .container
{
width:33%;
padding-top:10px;
padding-bottom:10px;
float:left;
}
.gallery-grid .container .imgContainer
{
}
.gallery-grid .container .imgContainer img
{
width:98%;
}
.gallery-grid .container .descContainer
{
display: none;
}
ul.pager
{
list-style-type: none;
margin:0px;
padding:0px;
}
.pager li {display: inline; }
.pager li a {padding:5px; border:solid 1px #ccc;margin:2px;}
.current
{
color:black;
}
.current:hover
{
text-decoration:none;
}
#pager
{
clear:both;
}
html
<tr>
<td>
<div class="gallery-list">
<div class="container">
<div class="imgContainer">
<img src=""/>
</div>
<div class="descContainer">
<div class="name">
<h2 style="color:#000;text-transform:uppercase;margin:0;">Friday Night and Saturday Activities (Single)</h2>
</div>
<div class="desc">
</div>
<div class="shortcode">
<object class="simpleecommcartAddToCartButton">
<form id='cartButtonForm_1' class="SimpleEcommCartCartButton" method="post" action="http://beauwaldrop.com/ahs83/store/cart/" >
<input type='hidden' name='task' id="task_1" value='addToCart' />
<input type='hidden' name='simpleecommcartItemId' value='1' />
<input type='hidden' name='hascartwidget' class="hascartwidget" value='no' />
<span style="color:#666;font-size:1.1em;"><em></em></span>
<span style="font-weight:bold;font-size:1.01em;">Price: $89.00</span>
<input type="hidden" name="item_quantity" class="SimpleEcommCartItemQuantityInput" value="1">
<br><input type='submit' value='Add To Cart' name='addToCart_1' id='addToCart_1' />
<input type="hidden" name="action" value="check_inventory_on_add_to_cart" />
<div id="stock_message_box_1" class="SimpleEcommCartUnavailable" style="display: none;">
<h2>We're Sorry</h2>
<p id="stock_message_1"></p>
<input type="button" name="close" value="Ok" id="close" class="modalClose" />
</div>
</form>
</object>
</div>
</div>
</div>
</td>
<td>
<div class="container">
<div class="imgContainer">
<img src=""/>
</div>
<div class="descContainer">
<div class="name">
<h2 style="color:#000;text-transform:uppercase;margin:0;">Friday Night and Saturday Activities (Couple)</h2>
</div>
<div class="desc">
</div>
<div class="shortcode">
<object class="simpleecommcartAddToCartButton">
<form id='cartButtonForm_2' class="SimpleEcommCartCartButton" method="post" action="http://beauwaldrop.com/ahs83/store/cart/" >
<input type='hidden' name='task' id="task_2" value='addToCart' />
<input type='hidden' name='simpleecommcartItemId' value='2' />
<input type='hidden' name='hascartwidget' class="hascartwidget" value='no' />
<span style="color:#666;font-size:1.1em;"><em></em></span>
<span style="font-weight:bold;font-size:1.01em;">Price: $129.00</span>
<input type="hidden" name="item_quantity" class="SimpleEcommCartItemQuantityInput" value="1">
<br><input type='submit' value='Add To Cart' name='addToCart_2' id='addToCart_2' />
<input type="hidden" name="action" value="check_inventory_on_add_to_cart" />
<div id="stock_message_box_2" class="SimpleEcommCartUnavailable" style="display: none;">
<h2>We're Sorry</h2>
<p id="stock_message_2"></p>
<input type="button" name="close" value="Ok" id="close" class="modalClose" />
</div>
</form>
</object>
</div>
</div>
</div>
</td>
</tr>
</table>
If you inspect the source of the page, you have closed and reopened the tr before your last column which is causing the last two columns to be split like that
Having looked at the posted code there is nothing wrong and it works perfectly:
http://jsfiddle.net/9pPXq/