Hi guys, I want to center this form with minimal HTML and CSS code possible. How do I do it without giving the form a class name to center it. HTML: <div id=container><div id=wrapper> <form method=post action='load.php'> <fieldset> <legend>Register</legend> <input type=text name=name placeholder='Your Name' title='Username' autofocus required /><br> <input type=text name=mail placeholder='Email' title='Email' required /><br> <input type=password name=password placeholder='Password' title='Password' required /><br> <input type=submit name=submit value='Sign up' /> </fieldset> </form> </div></div> Code (markup): CSS: #container { clear:both; -webkit-flex:1 0 auto; -ms-flex:1 0 auto; flex:1 0 auto; } #wrapper { max-width: 60%; overflow: hidden; padding: 1.5em 0; margin: 0 auto; } fieldset { padding: 0.6em; border: 0.08em solid #666; box-shadow: 0 0 0.09em #666; } legend { float: left; margin-top: -1.5em; background: #FFF; } Code (markup): Here's the render I got: Can I do this without additions? The reason I want to do this is to make it standard and use everywhere without customization. Sorry for stupid question. The more I ask, the more I learn Thanks,
I'd probably re-write the whole thing. I changed some stuff around in both .html and .css. And as always there's more than one solution to something like this. Wait for others to chime in. http://jsfiddle.net/0uta1L6c/47/ PS No new classes added.
Thanks, But that is not what I want. I want the form's frame shrink to fit the input filed and then center the whole thing. It would look like this: But that added a framed div and give it fixed width. I don't want to do that. I want the form to float and resize freely.
Pretty much the same thing, just keep your .html code intact: http://jsfiddle.net/0uta1L6c/48/ <div id=container><div id=wrapper> <form method=post action='load.php'> <fieldset> <legend>Register</legend> <input type=text name=name placeholder='Your Name' title='Username' autofocus required /> <br> <input type=text name=mail placeholder='Email' title='Email' required /> <br> <input type=password name=password placeholder='Password' title='Password' required /> <br> <input type=submit name=submit value='Sign up' /> </fieldset> </form> </div></div> Code (markup): #container { clear:both; -webkit-flex:1 0 auto; -ms-flex:1 0 auto; flex:1 0 auto; } #wrapper { max-width: 18%; min-width: 11em; padding: 1.5em 0; margin: 0 auto; } fieldset { padding: 0.6em; border: 0.08em solid #666; box-shadow: 0 0 0.09em #666; } legend { float: left; margin-top: -1.5em; background: #FFF; } Code (markup):
Whether you want to or not, there are some changes you should make. First, unless you can guarantee there will never be another form on the same page as the login form, give the form an id. This will also facilitate DOM scripting. Second, those inputs need labels. Not all browsers know what the hell placeholders are. It seems like redundant bloat to me, as we already have the value attribute. If you have placeholder or value attributes, the title attribute is redundant. More importantly, labels make your form accessible for folks using assistive technologies. Try this: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Test document </title> <style type="text/css"> /*<![CDATA[*/ body { background-color: white; color: black; font: 100%/1.5 sans-serif; margin: 0; padding: 1.5em; } p { font-size: 1em; } #sign-in { display: table; margin: 1.5em auto; /* width: 1px; */ /* Causes really tight shrink wrapping, and may be required for some browsers. Test! */ } #sign-in label { display: none; /* See the effect when css is disabled. */ } /*]]>*/ </style> </head> <body> <form method="post" action="load.php" id="sign-in"> <fieldset> <legend>Register</legend> <label for="name">Your name</label> <input type="text" name="name" id="name" placeholder="Your name" /> <br /> <label for="mail">Email</label> <input type="text" name="mail" id="mail" placeholder='Email' /> <br /> <label for="password">Password</label> <input type="password" name="password" id="password" placeholder='Password' /> <br /> <input type=submit name=submit value='Sign up' /> </fieldset> </form> </body> </html> Code (markup): cheers, gary
Wow! You don't even need to CSS the legend and fieldset. Kind of using browser natural element. What a man!
If you keep in mind that people spend a lot more time not on your site, you will not do things that could cause confusion. If you want them to visit your site, why give them headaches. Likewise, they have a browser they presumably like, so why make things look differently from what they expect? Take advantage of what they learn at home and at other sites; they will love you for it. They may not know why, it's just like comfort food. g
It's also NOT WHAT THEY ARE EVEN FOR... and I quote: http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-placeholder-attribute Since using it instead of a label leads to false simplicity. http://baymard.com/blog/false-simplicity http://www.nngroup.com/articles/form-design-placeholders/ http://www.webaxe.org/placeholder-attribute-is-not-a-label/ http://www.pardot.com/faqs/best-practices/placeholders-and-labels/ No matter what the artsy fartsy PSD jockeys and scripttards might say on the subject in their complete and utter ignorance of accessibility.
You're not serious, are you? Did you not get the message? The center tag was deprecated almost 20 years ago.