I am trying to float the submit button to the right in the form but I am facing problem the float is not being applied on the submit button Login. I have added some of server-side generated code.
Code
#login-form{
width: 400px;
background-color: #6B0000;
color: white;
}
#loginButton{
color: #6B0000;
border: 1px solid;
padding: 5px 30px 5px 30px;
background-color: white;
border-radius: 3px;
/*This one here does not work */
float: right;
}
<body>
<header id="header">
<h1>
Google Maps & Yahoo Mashup
</h1>
</header>
<DIV id="content">
<form id="login-form" name="login-form" method="post" onSubmit='return false'>
<input type="hidden" name="login-form" value="login-form" />
<table>
<tbody>
<tr>
<td><label>Email</label></td>
<td><input id="login-form:email" type="text" name="login-form:email" /></td>
</tr>
<tr>
<td><label>Password</label></td>
<td><input id="login-form:pwd" type="text" name="login-form:pwd" /></td>
</tr>
<tr>
<td><input type="submit" value="Login" id="loginButton" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" />
</form>
</DIV>
</body>
Try this one. I set a colspan of 2 to the input button and gave its parent td a width of 100%, this along with the float right should shift it to the right.
#login-form{
width: 400px;
background-color: #6B0000;
color: white;
}
#loginButton{
color: #6B0000;
border: 1px solid;
padding: 5px 30px 5px 30px;
background-color: white;
border-radius: 3px;
/*This one here does not work */
float: right;
}
/* Make the input's parent td 100%, you may want
a class here instead for browser support */
td:last-child {
width: 100%;
}
<body>
<header id="header">
<h1>
Google Maps & Yahoo Mashup
</h1>
</header>
<DIV id="content">
<form id="login-form" name="login-form" method="post" >
<input type="hidden" name="login-form" value="login-form" />
<table>
<tbody>
<tr>
<td><label>Email</label></td>
<td><input id="login-form:email" type="text" name="login-form:email" /></td>
</tr>
<tr>
<td><label>Password</label></td>
<td><input id="login-form:pwd" type="text" name="login-form:pwd" /></td>
</tr>
<tr>
<!-- setting a colspan of two -->
<td colspan="2"><input type="submit" value="Login" id="loginButton" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" />
</form>
</DIV>
</body>
Related
At the zoom level showed in the screenshot below, the Wired site displays normally:
But as I zoomed out I could see that everything is at the center. When I made a web page similar to the web site in the image and zoomed out, mine did not look like the image below.
This web page is still centered but mine was left-aligned:
I want to know how to make my web page stay centered when zoomed out.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
width: 1350px;
background-image: url("Images/background.png");
background-repeat: repeat-x;
background-size: 1366;
}
.flex-container {
display: flex;
background-color: #3B5998;
margin-left: -10px;
margin-top: -20px;
margin-right: -8px;
border-bottom: 1px solid #133783;
}
.flex-container > div {
background-color: #3B5998;
padding: 10px;
font-size: 13px;
}
input {
border: 1px solid #1D2A5B;
padding-bottom: 3px;
padding-top: 3px;
}
a {
text-decoration: none;
color: #9CB4D8;
}
a:hover {
text-decoration: underline;
}
.column {
float: left;
width: 450px;
padding: 10px;
height: 300px;
}
.big-input {
padding-bottom: 12px;
padding-top: 12px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div style="margin-left: 169px; margin-top: 10px;">
<img id="logo" style="margin-top: 16px;" src="Images/Facebook-img1.png" alt="LOGO" />
</div>
<div style="display: flex; margin-left: 30%; font-family: helvetica; color: white;">
<td>
<form action="redirect.html">
<table style="margin-top: 15px;">
<tr>
<td>Email or Phone</td>
<td style="display: flex; margin-left: 10px;">Password</td>
<td></td>
</tr>
<tr>
<td><input type="text" /></td>
<td style="display: flex; margin-left: 10px; margin-right: 10px;"><input type="password" /></td>
<td><input type="submit" value="Log In" /></td>
</tr>
<tr>
<td></td>
<td style="display: flex; margin-left: 10px;">Forgotten Account?</td>
<td></td>
</tr>
</table>
</form>
</div>
</div>
<div class="middle">
<div style="margin-left: 169px; margin-top: 5px;">
<div class="column" style="margin-right: 115px;">
<h2>Facebook helps you connect and share with the people in your life.</h2>
<img src="Images/Facebook-img2.png" alt="We are Connected" />
</div>
<div class="column">
<form action="redirect.html">
<h1>Creat an Account</h1>
<p>It's free and always will be.</p>
<table>
<tr>
<td style="display: flex; padding-right: 12px;"><input style="width: 170px;" type="text" class="big-input"/></td>
<td><input style="width: 170px;"type="text" class="big-input"/></td>
</tr>
<tr>
<td colspan="2"><input style="width: 358px;" class="dual big-input" type="text" /></td>
</tr>
<tr>
<td colspan="2"><input style="width: 358px;" class="dual big-input" type="text" /><td>
</tr>
</table>
<p>Birthday</p>
<label for="day">Date</label>
<input type="number" id="day" />
<label for="month">Month</label>
<input type="number" id="month" />
<label for="year">Year</label>
<input type="number" id="year" />
<span>Why do I need to provide my Date of birth?</span>
<input type="radio" id="male" />
<label for="female">Female</label>
<input type="radio" id="male" />
<label for="male">Male</label>
<p>By clicking Sign Up, you agree to our Terms, Data Policy and Cookie Policy. You may receive SMS notifications from us and can opt out at any time.</p>
<input type="submit" value="Sign Up" />
<p>Create a Page for a celebrity, band or business.</p>
</form>
</div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<img style="display: flex; width: 1300px;" src="Images/last.png" alt="Last pic" />
</body>
</html>
try
body {
margin: 0 auto;
}
This will make your website center aligned, i think that is what you want to do.
They aligned that part to center.
<h1 align="center">Some text.......</h1>
This is center aligned so even if you zoom out, it will stay in the center.
I think you should have added spaces for aligning in the center in your website.
Their shell container most likely has a margin-left: auto; margin-right: auto; attribute with a max-width added.
This is what I have on my site to make it behave this way.
I am trying to achieve the below format design in HTML. I tried using multiple TR inside TD but i was not successful in getting the below design.
Please find the below code i have been trying:
#content {
position: absolute;
top: 110px;
left: 350px;
width: 775px;
height: 605px;
}
#content label {
display: block;
float: left;
margin-right: 4px;
vertical-align: top;
}
<div id="content">
<label>
Date Range
</label>
<label>
(Past)
<br />
<input id="myDatePast" type="text" style="width:31px;" />
</label>
<label>
(Future)
<br />
<input id="myDateFuture" type="text" style="width:31px;" />
</label>
<label>
<br />Total
<input id="myDateFuture" type="text" style="width:31px;" />Days
</label>
</div>
Well you can try something like this. I used table and css to style them.
table {
border: 1px solid #666;
border-collapse: collapse;
}
th,tr {width: 150px;}
th input {width: 50px;}
.th1-main {
border-right: 1px solid #666;
}
.th1-modify {margin-left: 60px;}
.th1-modify2 {margin-right: 60px;}
<div id="content">
<table>
<tr>
<th class="th1-main">
<span class="th1-modify">Date</span> <br>
<span class="th1-modify2">Range</span>
</th>
<th>
Past<br>
<input type="text" value="60"><br>
Date
</th>
<th>
Future<br>
<input type="text" value="360"><br>
Date
</th>
<th>
Total - <input type="text" value="420"> days
</th>
</tr>
</table>
</div>
Hope this was helpful.
table,#cell1{
border:2px solid gray;
border-collapse: collapse;
}
#total{
width:auto;height:50px;
}
#cell1{
width:100px;
height:75px;
}
td:not(.empty){
width:100px;
height:50px;
}
<div id="content">
<table>
<tr>
<td id="cell1">
<span style="float:right"><b>Date</b></span><br/><br/>
<span style="float:left"><b>Range</b></span> </td>
<td class="empty"></td>
<td>
(Past)
<br/>
<input id="myDatePast" type="text" value="60" style="width:31px;" /><br/><b>Date</b>
</td>
<td>
(Future)<br/>
<input id="myDateFuture" type="text" value="360" style="width:31px;" /><br/><b>Date</b>
</td>
<td id="total">
Total-
<input id="myDateFuture" type="text" value="420" style="width:31px;"/><b> Days</b>
</td>
</table>
</div>
A good setup would be
<table>
<tr>
<td>2</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
<tr>
<td>5</td><td>6</td>
</tr>
</table>
I want to make this form in HTML/CSS:
Unfortunately I can't seem to get the right style and alignment. I've been at it for hours now and whatever avenue I seem to take seems to get me nothing but garbage. Below is my best code, not very good, but it is what it is. Can anybody please help fix the code to reflect the above picture? I would truly appreciate it.
<style> * {
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.group:after {
content: "";
display: table;
clear: both;
}
.containerANE {
overflow: hidden;
background: #C6DEFF;
width: 992px;
}
.rightANE {
float: right;
width: 30px;
outline: 1px solid #8191a6;
}
.leftANE {
float: left;
width: 152px;
outline: 1px solid #8191a6;
}
.middleANE {
width:717px;
outline: 1px solid #8191a6;
}
</style>
<h1>E-mail US</h1>
<form action="file:///C:/Users/Owner/Desktop/confirmed.php" method="get">
<div class="group containerANE">
<div class="group rightANE">
<img width="25" src="http://i.imgur.com/881g5D7.png">
</div>
<div class="group leftANE">
Name
</div>
<div class="group middleANE">
<input type="text">
</div>
<div class="group rightANE">
<img width="25" src="http://i.imgur.com/881g5D7.png">
</div>
<div class="group leftANE">
Description
</div>
<div class=middleANE>
<textarea rows="4" cols="50">
</textarea>
</div>
<div class=rightANE>
<img width="25" src="http://i.imgur.com/881g5D7.png">
</div>
<div class=leftANE>
E-mail<br><br>Phone
</div>
<div class=middleANE>
<input type="text">
<br> OR <BR>
<input type="text">
</div>
<input type="submit" value="SUBMIT">
This is a representation of the code in JSFiddle.
This FIDDLE will give you a start.
HTML
<table class='holder'>
<tr>
<td>Name:</td>
<td><input type='text' size=40></input></td>
<td><div class='icondiv'></div></td>
</tr>
<tr>
<td>Desscription:</td>
<td><textarea rows=6 cols=31></textarea></td>
<td><div class='icondiv'></div></td>
</tr>
<tr>
<td>Email:</td>
<td><input type='text' size=40></input></td>
<td></td>
</tr>
<tr>
<td colspan='3' id='single'>or<div id='singlediv' class='icondiv'></div></td>
</tr>
<tr>
<td>Phone:</td>
<td><input type='text' size=40></input></td>
<td></td>
</tr>
<tr>
<td colspan='3' id='single'><input type='submit'></input></td>
</tr>
</table>
The CSS is a bit long, and it's in the fiddle in any case.
Play with the CSS to refine it to your needs.
I'm trying to right-align a dropdownlist similar to my textfields.
It works in firefox and IE, but I can't figure it out why it wont align properly in chrome.
HTML
<div id="metaDataEditInner">
<label>Document name</label>
<input class="field"></input>
<label>Document description</label>
<input class="field"></input>
<label>Document remarks</label>
<input class="field"></input>
<label>Document type</label>
<select class="dropdownfield">
</select>
<br />
<div style="clear:both">
<button id="test" class="defaultButton">Save metadata
</button>
</div>
</div>
CSS
#metaDataEditInner
{
margin: .5em 5px;
text-align: right;
width: 550px;
}
#metaDataEditInner label
{
float: left;
line-height: 1em;
margin-top: 3px;
}
#metaDataEditInner .field
{
border: 1px solid black;
width: 350px;
font-size: 12px;
line-height: 1em;
padding: 4px;
margin-bottom: 10px;
}
#metaDataEditInner .dropdownfield
{
border: 1px solid black;
width: 360px;
font-size: 12px;
line-height: 1em;
padding: 4px;
margin-bottom: 10px;
color:Black;
}
Any idea's ?
I've made a fiddle to illustrate the problem
http://jsfiddle.net/ZE5ss/2/
Thx!
I didn't want a say but if i saw you markup it's totally wrong.
1) Always put form element inside <form>.
2) input & button is an self closing element. Write like this:
<input class="field" />
<button id="test" class="defaultButton" value="Save metadata" />
3) select is not work without option Tag. Write like this:
<select class="dropdownfield">
<option></option>
</select>
Just remove the <br /> after the </select>. Works for me on chrome, see this fiddle.
Try this code its working fine in all the browsers:
<div id="metaDataEditInner">
<table>
<tr>
<td>
<label>Document name</label>
</td>
<td>
<input class="field"></input>
<tr>
<td>
<label>Document description</label>
</td>
<td>
<input class="field"></input>.
<tr>
<td>
<label>Document remarks</label>
</td>
<td>
<input class="field"></input>
<tr>
<td>
<label>Document type</label>
</td>
<td>
<select class="dropdownfield">
</select>
<tr>
<td> </td>
<td>
<button id="test" class="defaultButton">Save metadata
</button>
</tr>
</table>
</div>
I want to create a box like this with title:
Can any one please let me know if there is a default CSS tag to do this? Or do I need to create my custom style?
I believe you are looking for the fieldset HTML tag, which you can then style with CSS. E.g.,
<fieldset style="border: 1px black solid">
<legend style="border: 1px black solid;margin-left: 1em; padding: 0.2em 0.8em ">title</legend>
Text within the box <br />
Etc
</fieldset>
If you are not using it in forms, and instead want to use it in an non-editable form, you can do this via the following code -
.title_box {
border: #3c5a86 1px dotted;
}
.title_box #title {
position: relative;
top: -0.5em;
margin-left: 1em;
display: inline;
background-color: white;
}
.title_box #content {}
<div class="title_box" id="bill_to">
<div id="title">Bill To</div>
<div id="content">
Stuff goes here.<br> For example, a bill-to address
</div>
</div>
from http://www.pixy.cz/blogg/clanky/css-fieldsetandlabels.html
fieldset {
border: 1px solid green
}
legend {
padding: 0.2em 0.5em;
border: 1px solid green;
color: green;
font-size: 90%;
text-align: right;
}
<form>
<fieldset>
<legend>Subscription info</legend>
<label for="name">Username:</label>
<input type="text" name="name" id="name" />
<br />
<label for="mail">E-mail:</label>
<input type="text" name="mail" id="mail" />
<br />
<label for="address">Address:</label>
<input type="text" name="address" id="address" size="40" />
</fieldset>
</form>
This will give you what you want
<head>
<title></title>
<style type="text/css">
legend {border:solid 1px;}
</style>
</head>
<body>
<fieldset>
<legend>Test</legend>
<br /><br />
</fieldset>
</body>
As far as I know (correct me if I'm wrong!), there isn't.
I'd recommend you to use a div with a negative-margin-h1 inside. Depending on the semantic structure of your document, you could also use a fieldset (HTML) with one legend (HTML) inside which approximately looks like this by default.
I think this example can also be useful to someone:
.fldset-class {
border: 1px solid #0099dd;
margin: 3pt;
border-top: 15px solid #0099dd
}
.legend-class {
color: #0099dd;
}
<fieldset class="fldset-class">
<legend class="legend-class">Your Personal Information</legend>
<table>
<tr>
<td><label>Name</label></td>
<td><input type='text' name='name'></td>
</tr>
<tr>
<td><label>Address</label></td>
<td><input type='text' name='Address'></td>
</tr>
<tr>
<td><label>City</label></td>
<td><input type='text' name='City'></td>
</tr>
</table>
</fieldset>
You can try this out.
<fieldset class="fldset-class">
<legend class="legend-class">Your Personal Information</legend>
<table>
<tr>
<td><label>Name</label></td>
<td><input type='text' name='name'></td>
</tr>
<tr>
<td><label>Address</label></td>
<td><input type='text' name='Address'></td>
</tr>
<tr>
<td><label>City</label></td>
<td><input type='text' name='City'></td>
</tr>
</table>
</fieldset>
DEMO