I'm trying to align multiple form inputs as well as some text on one line in two scenarios (vertical-align:bottom, and not specific alignment) Please see the attached code where you can see how just about all elements aligns differently.
What is the best/proper way to solve this? Would really appreciate if someone could modify the code so all the elements aligns properly.
Thank you.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Sample 1, with vertical align bottom:<br>
<font style="font-size:45px;vertical-align:bottom">🔍</font>
<input type="text" style="width:100px;height:45px;font-size:45px;vertical-align:bottom">
<input type="checkbox" style="width:45px;height:45px;vertical-align:bottom">
<input type="button" value="Search" style="height:45px;vertical-align:bottom">
<br><br>
Sample 2, without vertical align bottom:<br>
<font style="font-size:45px">🔍</font>
<input type="text" style="width:100px;height:45px;font-size:45px">
<input type="checkbox" style="width:45px;height:45px">
<input type="button" value="Search" style="height:45px">
</body>
</html>
It's because all inputs have different margins. Try setting the margin of all inputs to the same value.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Sample 1, with vertical align bottom:<br>
<font style="font-size:45px;vertical-align:bottom; margin: 10px;">🔍</font>
<input type="text" style="width:100px;height:45px;font-size:45px;vertical-align:bottom; margin: 10px;">
<input type="checkbox" style="width:45px;height:45px;vertical-align:bottom; margin: 10px;">
<input type="button" value="Search" style="height:45px;vertical-align:bottom; margin: 10px;">
Related
I want to put a text box in the right corner of the page, in the bottom using html.
I wrote this code, it works, but i'm not sure if it's correct.
<html>
<head>
<title> Test </title>
<style type="text/css">
.poz
{
position:absolute;bottom:15px; right:10px;
}
</style>
</head>
<body>
<form>
<input type="text" name="email"; div class="poz"/></div>
</form>
</body>
</html>
I mean, i am not sure if it's ok to put this part of code "div class="poz"/>" .
.poz{
position: absolute;
bottom: 5px;
right: 10px;
}
<input type="text" class="poz">
Tidying your code a little bit.
<html>
<head>
<title> Test </title>
<style type="text/css">
.poz
{
position:absolute;bottom:15px; right:10px;
}
</style>
</head>
<body>
<form>
<input type="text" name="email" class="poz">
</form>
</body>
</html>
Definitely not valid HTML. I would place the class on the form element and remove the closing </div> (which makes it invalid HTML).
<form class="poz">
<input type="text" name="email"/>
</form>
I want to adjust checkboxes in the middle of screen.
My html code:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Test</title>
</head>
<body>
<form method="get" style="text-align: center">
<input name="check1" type="checkbox">short text<br>
<input name="check2" type="checkbox">medium-length text__________<br>
<input name="check3" type="checkbox">long text________________________________<br>
<input name="Submit1" type="submit" value="submit"></form>
</body>
</html>
The checkboxes are on different positions because of different text length.
What's the best way to adjust them to a vertical line roughly to the position of the checkbox of the longest text ("check3")?
I'm sorry for this probably simple question.
You can change it to this which I believe will get you what you want:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Test</title>
</head>
<body>
<form method="get" style="text-align: center;">
<div style="display: inline-block; text-align: left;">
<input name="check1" type="checkbox">short text<br>
<input name="check2" type="checkbox">medium-length text__________<br>
<input name="check3" type="checkbox">long text________________________________
</div>
<br>
<input name="Submit1" type="submit" value="submit">
</form>
</body>
</html>
This way you don't need to know the width of your text beforehand.
Use div tag and then u can use margin attribute and remove
style="text-align: center"
form form tag
#checkbox {
float:left
margin-left:70px;
}
<div id="checkbox">
<form method="get" >
<input name="check1" type="checkbox">short text<br>
<input name="check2" type="checkbox">medium-length text__________<br>
<input name="check3" type="checkbox">long text________________________________<br>
<input name="Submit1" type="submit" value="submit"></form>
</div>
http://jsfiddle.net/48fwg/
You can go with something as simple as setting a width to your form and then setting margin: 0 auto like so:
HTML
<form method="get">
<input name="check1" type="checkbox" />short text<br>
<input name="check2" type="checkbox" />medium-length text__________<br>
<input name="check3" type="checkbox" />long text________________________________<br>
<input name="Submit1" type="submit" value="submit" />
</form>
CSS
form { display: block; margin: 0 auto; width: 400px; }
jsFiddle
!OR!
If you don't want to set the width, you can set the display of the form to table and get the same result, but with an auto width:
HTML -> the same
CSS
form { display: table; margin: 0 auto; }
jsFiddle
!OR!
If you want it fully centered, horizontal and vertical, you can use a variation of the following:
HTML
<table>
<tbody>
<tr>
<td>
<form method="get">
<input name="check1" type="checkbox" />short text<br />
<input name="check2" type="checkbox" />medium-length text__________<br />
<input name="check3" type="checkbox" />long text________________________________<br />
<input name="Submit1" type="submit" value="submit" />
</form>
</td>
</tr>
</tbody>
</table>
CSS
html, body { margin: 0; height: 100%; width: 100%; }
table { height: 100%; margin: 0 auto; }
td { vertical-align: middle; }
jsFiddle
The form is displayed on the browser, but when I roll my cursor over the text fields, it just doesn't take the input. How is this caused and how can I solve it?
<html>
<head>
<title>Chemicals.ltd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<!--> <div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
<img src='C:\Users\Dell\Downloads\chem.jpg' style='width:100%;height:100%' alt='[]' />
</div><!-->
<h2> Welcome to TOXIC TRADERS ! </h2>
<p>We trade chemicals , for industrial or lab use.<br> Please enter Relevant info in the form </p>
<form name="Details" action="/ChemControl" method="POST">
Chemical Name: <input type="text" name="Chemical"><br>
Hazard Level(No.): <input type="text" name="Hazard type"><br>
Lab/Company Name: <input type="text" name="Lab Name" ><br>
Serial No.: <input type="text" name="Serial No."><br>
<input type="submit" value="Send Info">
</form>
</body>
</html>
You are overlaying your form with a div, that blocks the input. Remove it:
<html>
<head>
<title>Chemicals.ltd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<h2> Welcome to TOXIC TRADERS ! </h2>
<p>We trade chemicals , for industrial or lab use.<br> Please enter Relevant info in the form </p>
<form name="Details" action="/ChemControl" method="POST">
Chemical Name: <input type="text" name="Chemical"><br>
Hazard Level(No.): <input type="text" name="Hazard type"><br>
Lab/Company Name: <input type="text" name="Lab Name" ><br>
Serial No.: <input type="text" name="Serial No."><br>
<input type="submit" value="Send Info">
</form>
</body>
Your html comments are invalid
should be
<!-- <html not displayed> -->
Not
<!--> <html not displayed> <!-->
Result is the html that it appears you are trying to comment out is masking the form
Your div tag with 100% height and 100% width has covered the entire view port like a modal form, hence the area beneath it has become non-clickable. Remove the height and width from tag like below:
<div style='position:absolute;z-index:0;left:0;top:0;'>
<img src='C:\Users\Dell\Downloads\chem.jpg' style='width:100%;height:100%' alt='[]' />
</div>
Your font size is probably set to zero.
Add this to your css style file:
input {
font-size: 10pt;
}
Or add the style directly on the HTML tag:
<input style="font-size: 10pt;" type="submit" value="Send Info">
EDIT 5/21/13 13:40 EST: Added inline-block styling.
Considering the following page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
form { display: inline-block; }
</style>
<title>Log in </title>
</head>
<body>
<form action="/login" method="post">
<label for="username">Username: </label><input type="text" name="username" id="username">
<label for="password">Password: </label><input type="password" name="password" id="password">
<input type="submit" value="Log in">
</form>
</body>
</html>
Is there any way in CSS to center the form without
Adding extra divs à la the bootstrap grid
Guessing what the width of the form will be in percentage or px
Center-aligning the text inside the form
Basically, I want the block that contains the form to have its width determined automatically by its contents, then have the center of that block lined up with the center of the page.
What you're looking for is display: table, not display: inline-block. Both display types have that shrink to fit behavior you're looking for, but table allows you to use margins for the purpose of centering.
http://cssdeck.com/labs/slpqdfct
form {
display: table;
margin: 0 auto;
}
I have 3 radio buttons on the same line in a td of the table like that:
<td align="left">
CHF <input type="radio" name="currency" id="chf_currency" checked="checked" onChange="currencyChanged()" />
USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/>
EUR <input type="radio" name="currency" onChange="currencyChanged()"/>
</td>
Now I would like to add some spaces between those radio buttons and I don't know how to do it.
I tryed to use width attribute, margin attribute but nothing changes.
Thank you very much.
Check working example on jsbin
Also, here is the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<td align="left">
CHF <input type="radio" name="currency" id="chf_currency" checked="checked" onChange="currencyChanged()" />
USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/>
EUR <input type="radio" name="currency" onChange="currencyChanged()"/>
</td>
</body>
</html>
CSS:
input[type="radio"]{
margin: 0 10px 0 10px;
}
Use like this in CSS
input[type="radio"]{
//padding: or margin or line-height for better spaces bettween radio button according to your need and design;
}
Try this:
input[type="radio"]{margin:10px 0};}
put this in the css folder or in the header section of your html file. If your putting this in your html file in your header section, it should look like this:
<style type="text/css">
input[type="radio"]{margin: 10px 0};}
</style>
Hope this helped!
If you don't want to use fixed padding to the buttons, then consider wrapping each one with <label> tag, this will make the labels clickable too.
HTML:
<label>CHF <input type="radio" name="currency" id="chf_currency" checked="checked" onChange="currencyChanged()" /></label>
<label>USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/></label>
<label>EUR <input type="radio" name="currency" id="eur_currency" onChange="currencyChanged()"/></label>
CSS:
<style type="text/css">
label + label {
margin-left: 20px;
}
</style>
http://jsfiddle.net/9cJJ9/