1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How do I center this form without adding more classes or divs

Discussion in 'CSS' started by ketting00, Aug 27, 2015.

0
  1. #1
    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:
    register form.jpg
    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,
     
    Solved! View solution.
    Last edited: Aug 27, 2015
    ketting00, Aug 27, 2015 IP
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #2
    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.
     
    qwikad.com, Aug 27, 2015 IP
  3. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #3
    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:
    register box.jpg
    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.
     
    ketting00, Aug 27, 2015 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #4
    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):
     
    Last edited: Aug 27, 2015
    qwikad.com, Aug 27, 2015 IP
    ketting00 likes this.
  5. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #5
    Thanks,
    Got it.
     
    ketting00, Aug 27, 2015 IP
  6. #6
    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
     
    kk5st, Aug 28, 2015 IP
    deathshadow and COBOLdinosaur like this.
  7. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #7
    Wow! You don't even need to CSS the legend and fieldset. Kind of using browser natural element.
    What a man!
     
    ketting00, Aug 28, 2015 IP
  8. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #8
    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
     
    kk5st, Aug 28, 2015 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    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.
     
    deathshadow, Aug 29, 2015 IP
    ketting00 likes this.
  10. hashmi syd muqtadeer

    hashmi syd muqtadeer Greenhorn

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #10
    use center tag
     
    hashmi syd muqtadeer, Feb 27, 2016 IP
  11. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #11
    You're not serious, are you? Did you not get the message? The center tag was deprecated almost 20 years ago.
     
    kk5st, Feb 27, 2016 IP
    deathshadow likes this.
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #12
    1997 called, it wants its markup back.
     
    deathshadow, Feb 27, 2016 IP