IE 7 and 9 are displaying #logon on the right hand side of #wrapper.
Live page is here: http://lalabs.hiv411.org/logout.php
CSS:
#wrapper {
position:absolute;
width:960px;
min-height:680px;
background:url(../g/bg.jpg) no-repeat #6CB8D2;
top:0;
left: 50%;
margin-left: -480px;
}
#logon {
position:relative;
background:url(../g/login_bg.png) no-repeat;
width:656px;
height:484px;
margin: 135px auto;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
#logonInner {
text-align:center;
padding: 66px 0 0 0;
font-size:14px;
}
HTML is dead simple...
<div id="wrapper">
<div id="logon">
<div id="logonInner">
<img src="g/welcome.gif" alt="Welcome to the Louisiana Office of Public Health Survey of Laboratories and Facilities" name="welcome" width="397" height="110" id="welcome" />
<p>Please login using the username and password you were assigned.</p>
<form id="logonForm" method="post" action="">
<label class="logonFormLabel"><input type="text" name="email" id="email" value="<?=$_POST['email']?>" class="required email logonFormText "/><br />
USER NAME</label>
<label class="logonFormLabel"><input type="password" name="Password" id="Password" value="" class="required logonFormText"/><br />
PASSWORD</label>
<p style="padding:30px 0 0 0">Lookup Your Laboratory or Facility Request Login Information Forgot Your Password?</p>
<p style="padding:20px 0 0 0"><input type="submit" class="button" name="submit" id="submit" value="SUBMIT" /></p>
</form>
</div><!--logonInner-->
</div><!--logon-->
</div><!--wrapper-->
What's wrong with my CSS?
Make sure you clear; both after the Floated Elements and make sure... If you ever have a absolutely positioned element to have the parent element with the position of relative.
#parent {
position: relative;}
#child {
position: absolute;}
Then of course after you declare your floated elements, make sure you add a clear after them.
#element {
clear: both;}
Hope that helps!
I added text-align:center to #wrapper.
Related
This question already has answers here:
Center form submit buttons HTML / CSS
(11 answers)
Closed 5 years ago.
Very odd and I spent an hour today trying to figure out what I'm doing wrong. Have a email signup form. Four input fields and a submit button. In my design, the submit button should be centered under the four fields. However, instead the button is flush left aligned no matter whether I use or don't use float:left; or clear:both; or margin:0 auto; In other words, the usual suspects.
Here's the site. The form is on the bottom: http://ellismarsalis2017.jasonmarsalis.com/
Here's the code:
#footerForm {
position: relative;
float: none;
width: 728px;
height: auto;
margin: 0 auto;
padding: 18px auto 0;
}
footer form input {
float: left;
color: #2a358f;
width: 44%;
background: #edc53e;
border-radius: 8px;
margin: 0 2% 14px;
font-size: 18px;
padding: 0 .5%;
border: none;
}
footer form input.signUp {
font-family: "clarendon-urw", serif;
float: none!important;
clear: both;
background: #2a358f;
color: #edc53e;
margin: 0 auto;
font-size: 18px;
padding: 8px 24px;
border: none;
text-align: center;
}
footer p {
padding: 28px 0;
}
<div id="footerForm">
<form name="" method="post" action="http://www.yoursite.com/box.php">
<input name="name" type="text" id="name" value="Your Name">
<input name="field1" type="text" id="field1" value="Your City">
<input name="email" type="text" id="email" value="Your Email Address">
<input name="field2" type="text" id="field2" value="Your State">
<input name="p" type="hidden" id="p" value="7">
<input type="hidden" name="nlbox[1]" value="1">
<input type="submit" name="Submit" class="signUp" value="Sign me up for the Email List!">
</form>
</div>
You should put it on DIV section and make it's style text-align:center like that:
<div style="text-align:center;">
<input type="submit" name="Submit" class="signUp" value="Sign me up for the Email List!">
</div>
or with a class and css code :
HTML
<div class="submitsection">
<input type="submit" name="Submit" class="signUp" value="Sign me up for the Email List!">
</div>
CSS
.submitsection {
text-align:center;
}
I want to center the div box im making here but i dont want to center the text in the box and i cant seem to find how to do this. For now what i have is this:
.box {
text-align: left;
background-color:#3F48CC;
color:white;
font-weight:bold;
margin:120px auto;
height:150px;
display: inline-block;
width: 200px;
}
and
<div class=box>
Login
<form method ="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name"/>
<label for="password">Password:</label>
<input name="password"/>
<p>
<input name="submit" type="Submit" value="Register"/>
<input name="reset" type="reset" value="Clear Form">
</form>
</div>
Thanks in advance!
Remove display: inline-block; & text-align:center
inline-block is not necessary when you are defining the width/height for the div.
By default div is a block element.
.box {
background-color:#3F48CC;
color:white;
font-weight:bold;
margin:120px auto;
height:150px;
width: 200px;
}
DEMO
Use dead centre...
.box {
text-align: left;
background-color:#3F48CC;
color:white;
font-weight:bold;
height:150px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -75px;
}
Note: Negative margins are exactly half the height and width, which pull the element back into perfect center. Only works with elements of a fixed height/width.
More info:
CSS Tricks Example
jsFiddle Demo
jsFiddle DEMO
Alternate jsFiddle DEMO with Centered Form and also this CSS3 Version.
The key to making the form look correct is to use padding, which is part of box model. Doing so allows you to fill in the sides, and keeps the text left-hand aligned.
HTML
<div class=box>Login
<form method="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name" />
<label for="password">Password:</label>
<input name="password" />
<div class="buttons">
<input name="submit" type="Submit" value="Register" />
<input name="reset" type="reset" value="Clear Form" />
</div>
</form>
</div>
CSS:
.box {
background-color:#3F48CC;
color:white;
font-weight:bold;
height:150px;
width: 150px;
padding: 10px;
}
.buttons{
padding-top: 20px;
}
Screenshot:
I've got a website that has a big image covering the screen. In its image there are several DIVs (Text, Forms, Images) (see picture 2). The big image container is made displaying always the center of the image regardless of window size, so when you make your windows smaller, the very center stays visible.
The problem now is that the DIVs are collapsing, when I scale down the window size (see picture 3).
Picture number 2 depicts what it is intended to be look like!
#div1 {
width:25%;
left: 32%;
top:7.5%;
position: relative;
float:left;
}
#div2 {
position:relative;
left:37.5%;
clear:both;
width:14%;
height:20%;
}
#div2 h2 {
width:10%;
left:15%;
margin-top:11%;
position: relative;
float: left;
}
#div3 {
left: 64.4%;
top:-2.5%;
width:111px;
position: relative;
}
#div4{
left: 93%;
top:-18.0%;
width:111px;
position: relative;
}
And HTML:
<body>
<div id="wrapper"\>
<div id="div1">
<h1>Seite nicht gefunden!</h1>
</div>
<h2>Bug melden</h2>
<div id="div2">
<form>
<label>Titel</label>
<input type="text" id="form_title" name="title" placeholder="Ich will einen Bug melden!" required>
<label>URL</label>
<input type="url" id="form_url" name="URL" placeholder="###" >
<label>Beschreibung</label>
<textarea type="text" id="form_whathappened" name="happened" placeholder="Was ist passiert?" required></textarea>
<input type="submit" value="Absenden" />
</form>
</div>
<div id="div3">
<img src="logo.png" alt="Logo" />
</div>
<div id="div4">
<p>Jetzt<br/ >Tester<br />werden!<br /></p>
</div>
</div>
</body>
Can you please help me what I'm doing wrong? Thank you very much in advance!
Christoph
This is probably way far from perfect, but it's worth trying.
The html code:
<head>
<meta charset="utf-8">
<title>404</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="error">
<h1>Seite nicht gefunden!</h1>
</div>
<form id="form">
<h2>Bug melden</h2>
<label>Titel</label>
<input type="text" id="form_title" name="title" placeholder="Ich will einen Bug melden!" required>
<label>URL</label>
<input type="url" id="form_url" name="URL" placeholder="http://www.###/???" >
<label>Beschreibung</label>
<textarea type="text" id="form_whathappened" name="happened" placeholder="Was ist passiert?" required></textarea>
<input type="submit" value="Absenden" />
</form>
... //other code goes here</div>
and this is the edited section of the css code:
#wrapper { width: 640px; height: auto; margin: 0 auto; }
#error { font-size: 120%; margin: 65px 0 0 60px; float:left; }
#error h1 { font-size: 150%; text-align:center; }
#form { margin: 15px 86px; width:260px; height: 40%; float: left; background: green; }
Check the working example here: example
Hope that helps as a start.
I'm asking as a last-ditch effort to comply with my conscience and do this with CSS. I want to layout this simple form using CSS, but I've spent two hours trying to get it and always end up with alignment issues. I did it in ten minutes using tables.
I need labels right-justified, the name row split in two, the labels properly vertically aligned with the input text, and all the right edges of the inputs to line up. What does it take to do this in CSS?
EDIT: Adding my CSS to see where I'm going wrong.
Here's as far as I got with the CSS:
.form_row {
width: 500px;
}
.form_row label {
text-align: right;
width: 150px;
float: left;
margin-top: 6px;
padding-right: 6px;
}
#id_first_name, #id_last_name {
width: 130px;
}
#id_email, #id_password {
width: 300px;
}
The Markup:
<div class="form_row">
<label for="id_first_name">Name:</label>
<input id="id_first_name" type="text" name="first_name" />
<input id="id_first_name" type="text" name="last_name" />
</div>
<div class="form_row">
<label for="id_email">Email:</label>
<input type="text" name="email" id="id_email"/>
</div>
<div class="form_row">
<label for="id_password">Password:</label>
<input id="id_password" type="password" name="password" />
</div>
And the result:
You tempted me into taking up the challenge :) I just about did it in 10 minutes using CSS.
As long as you're ok with tweaking line-height's and settings dimensions in px for some elements I think its achievable.
Other things to note are how font-size, padding and line-height's affect textboxes and their dimensions.
Have a look at this: http://jsbin.com/osibu3/4
Tested in IE6+, FF3.6+, Chrome, Safari
Pasting for reference as well:
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
html,body,h1,h2,h3,h4,h5,p,ul,li,form,button,fieldset { margin:0; padding:0 }
body { font:normal 62.5% lucida grande, lucida sans unicode }
#my-form { font-size:1.1em; width:500px; padding:20px; background:#E9E9E9;}
#my-form fieldset { border:0; margin-bottom:2px; height:20px; line-height:18px; }
#my-form fieldset label { width:70px; display:block; float:left; text-align:right; padding-right:5px; color:#61515C; }
input.text { border:1px solid #ddd; font:inherit; font-size:11px; line-height:14px; height:14px; padding:2px;
border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;}
.text.long { width:395px }
.text.short { width:193px }
</style>
</head>
<body>
<form action="" id="my-form">
<fieldset class="name">
<label for="first"><strong>Name:</strong></label>
<input type="text" name="first" value="first" class="text short"/>
<input type="text" name="last" value="last" class="text short"/>
</fieldset>
<fieldset>
<label for="email"><strong>Email:</strong></label>
<input type="text" name="email" class="text long"/>
</fieldset>
<fieldset>
<label for="password"><strong>Password:</strong></label>
<input type="text" name="password" class="text long"/>
</fieldset>
</form>
</body>
</html>
http://www.blueprintcss.org/
The blueprint css framework can help you with tabular layout with divs. It has simple usage and good documentation.
It's hard to give another answer with such little information in your question.
How to position a complex form with multiple fields in line across the screen?
Why are people so hell-bent on avoiding tables?
Tables are not deprecated and should be used when displaying content which logically belongs in a table.
If your form is logically grouped such that a table would be intuitive, please use a table.
Always be thinking: "What's the cleanest, simplest, most maintainable way to achieve this result."
If you want a fluid form with a variable number columns, then disregard this.
I prefer the slightly-more-semantic way, using a definition list:
<dl class="form">
<dt><label for="input1">One:</label></dt>
<dd><input type="text" name="input1" id="input1"></dd>
<dt><label for="input2">Two:</label></dt>
<dd><input type="text" name="input2" id="input2"></dd>
</dl>
Then your CSS:
dl.form {
width:100%;
float:left;
clear:both;
}
dl.form dt {
width:50%;
float:left;
clear:left;
text-align:right;
}
dl.form dd {
width:50%;
float:left;
clear:right;
text-align:left;
}
This should produce a form centered in the page, with the labels in the left column and the inputs in the right
There are many different ways to do this. It's all a matter of preference. What I typically do is have a wrapper div that contains all of the rows, and then a div block per row that contains the label, input, and validator. You can use the line-height CSS property to help you with vertical alignment. Example:
<div class="formWrapper">
<form>
<div class="formItem">
<label for="firstName">First Name:</label>
<input name="firstName" id="firstName" class="required" type="text" />
<span class="validator" style="display: none;">*</>
</div>
... <!-- Rinse repeat -->
</form>
</div>
<style type="text/css">
.formWrapper { width: 400px }
.formWrapper .formItem { line-height: 35px; height: 35px; }
.formWrapper label { width: 50px; }
.formWrapper input { width: 100px; border: 1px solid #000; }
.formWrapper .validator { padding-left: 10px; color: #FF0000; }
</style>
Hope that helps.
After looking at many many different solutions, I found the examples on this page (particularly the one from 'Fatal'?) some of the most helpful. But the extensive and tags did bother me a bit. So here is a little bit of a modification that some may like. Also, you find some sort of 'wrapper' or 'fieldset' style very necessary to keep the float from affecting other HTML. Refer to examples above.
<style>
.formcol{
float: left;
padding: 2px;
}
.formcol label {
font-weight: bold;
display:block;}
</style>
<div class="formcol">
<label for="org">organization</label>
<input type="text" id="org" size="24" name="org" />
</div>
<div class="formcol">
<label for="fax">fax</label>
<input type="text" id="fax" name="fax" size="2" />
</div>
<div class="formcol">
<label for="3">three</label>
<input type="text" id="3" name="3" />
<label for="4">four</label>
<input type="text" id="4" name="4" />
<label for="5">five</label>
<input type="text" id="5" name="5" />
</div>
<div class="formcol">
<label for="6">six</label>
<input type="text" id="6" name="6" />
</div>
That would be done using CSS by setting the "display" property to "inline" (since form elements are, by default, block level elements).
Do a search for "layouts without tables". Many sites describe formatting with CSS. Here is a simple intro: http://www.htmlgoodies.com/beyond/css/article.php/3642151
I suggest you blueprint CSS framework. Have a quick look at the demo page.
This is what I usually use when I need to design pretty complex forms.
HTML:
<fieldset> <legend>Consent group</legend> <form> <fieldset class="nolegend"> <p><label><span>Title</span> <input type="text" name="title" size="40" value="" /></label></p> <p><label><span>Short name</span> <input type="text" name="sname" size="20" value="" /></label></p> <p><label><br /><input type="checkbox" name="approval"> This consent group requires approval</label></p> </fieldset> <fieldset class="nolegend"> <p><label><span>Data use limitations</span> <textarea name="dul" cols="64" rows="4"></textarea></label></p> </fieldset> <input type="submit" value="Submit" /> </form></fieldset>
CSS:
body, input, textarea, select { font: 1em Arial, Helvetica, sans-serif;}input, textarea, select { font-size: .8em }fieldset,fieldset legend { background-color: #EEE;}fieldset { border: none; margin: 0; padding: 0 0 .5em .01em; top: 1.25em; position: relative; margin-bottom: 2em;}fieldset fieldset { margin: 0 0 1em 0;}fieldset legend { padding: .25em .5em 0 .5em; border-bottom: none; font-weight: bold; margin-top: -1.25em; position: relative; *left: -.5em; color: #666;}fieldset form,fieldset .fieldset { margin: 0; padding: 1em .5em 0 .5em; overflow: hidden;}fieldset.nolegend { position: static; margin-bottom: 1em; background-color: transparent; padding: 0; overflow: hidden;}fieldset.nolegend p,fieldset.nolegend div { float: left; margin: 0 1em 0 0;}fieldset.nolegend p:last-child,fieldset.nolegend div:last-child { margin-right: 0;}fieldset.nolegend label>span { display: block;}fieldset.nolegend label span { _display: block;}
I omitted couple lines of CSS with Safari hacks. You can check out live version of this code.
Pace KyleFarris but I just had to give Ben S a vote for having the guts to mention tables. Just look at the variety of CSS solutions on this page and around the internet for a ridiculously simple problem. CSS may one day become a good solution, but for the time being replicating the simple row and column grid that the table tag provides is extremely complex. I have spent countless fruitless hours with this prejudice against tables for things like a form. Why do we do this to ourselves?
input fields, by default, are inline. Therefore, you can simply use line them up without Another option if you want them lined up correctly is as follows:
<div id="col1" style="float: left;>
<input type="text" name="field1" />
<br />
<input type="text" name="field3" />
</div>
<div id="col2" style="float: left;>
<input type="text" name="field2" />
<br />
<input type="text" name="field4" />
</div>
I prefer to use fieldset to group all elements and p for each form field.
<html>
<head>
<style type="text/css">
fieldset {
width: 500px;
background-color: lightblue;
}
fieldset legend {
font-weight: bold;
}
fieldset p {
clear:both;
padding: 5px;
}
fieldset label {
text-align: left;
width: 100px;
float: left;
font-weight: bold;
}
fieldset .Validator {
color: red !important;
font-weight: bold;
}
</style>
<head>
<body>
<form>
<fieldset>
<legend>Data</legend>
<p>
<label for="firstName">First Name:</label>
<input name="firstName" id="firstName" class="required" type="text" />
<span class="Validator" style="display: none;">*</span>
</p>
<p>
<label for="lastName">Last Name:</label>
<input name="lastName" id="lastName" class="required" type="text" />
<span class="Validator">*</span>
</p>
</fieldset>
</form>
</body>
</html>