html - How to move form to center of page - 


html:               <div id="registercontainer">              <div class = "regform">             <h1> </h1>                  <div id = "back_glob">                  <div id = "back_form">                     <form method="post">                       <label>first name</label>                     <input type="text" name ="fname"/>                       <label>last name</label>                      <input type="text" name ="sname"/>                        <br/>                      <label>email address</label> <input id = "email" name = "email" type = "text"/>                        <br/>                      <label>create username</label> <input  name = "uname" type = "text"/> <br/>                      <label>create password</label> <input  name = "pass" type = "password"/>                           <br/>                         <input  type="submit" name ="valid" value="register"/>                     </form>                  </div>           </div>              </div> css:    #regcontainer{         width:1200px;         margin: 70px auto;         border : 1px solid;         background-color: aliceblue;         top:0;      }          .regcontainer h1{         font-size:40px;        font-family: 'helvetica neue', sans-serif;        color:black;        line-height: 1;            padding-left:35px;        padding-top: 35px;        color: black;     }       input{          display : inline-block;         margin: 10px;      }      input[type = text] {         padding:10px;         border : 2px solid #212;         border-radius: 2px;         box-shadow: #212121;     }      input[type=password]{         padding:10px;         border : 2px solid #212;         border-radius: 2px;         padding: 5px 10px 5px 10px;      }      input[type=submit]{       background-color:#ff0000;       border: 1px solid #212121;       border-radius:5px;       color:aliceblue;       font-weight: bold;       }       #back_form {          justify-content: center;       }

hi guys , creating registration form , wondering how can move whole form center of page? right on left side of container, want abit - https://id2.s.nfl.com/fans/register?returnto=http%3a%2f%2fweeklypickem.fantasy.nfl.com%2f

here solution came with... do?

#registercontainer needs on center of page. meaning, fixed of 1200px not going work well. took approach of reducing size of container give better , feel this:

#registercontainer {       max-width: 600px;       min-width: 320px;       width: 100%;       /* ... other properties here ... */ }

another note, <label> needs for attribute specified in this article.

let me know if have questions, fyi there many ways make work you.

#registercontainer {    max-width: 600px;    min-width: 320px;    width: 100%;    margin: 70px auto;    border: 1px solid;    background-color: aliceblue;    top: 0;    padding: 15px;  }    .regcontainer h1 {    font-size: 40px;    font-family: 'helvetica neue', sans-serif;    color: black;    line-height: 1;    padding-left: 35px;    padding-top: 35px;    color: black;  }    input {    display: inline-block;    margin: 10px;  }    input[type=text] {    padding: 10px;    border: 2px solid #212;    border-radius: 2px;    box-shadow: #212121;  }    input[type=password] {    padding: 10px;    border: 2px solid #212;    border-radius: 2px;    padding: 5px 10px 5px 10px;  }    input[type=submit] {    background-color: #ff0000;    border: 1px solid #212121;    border-radius: 5px;    color: aliceblue;    font-weight: bold;  }    #back_form {    justify-content: center;  }
<div id="registercontainer">    <div class="regform">      <h1> register nackstack</h1>      <div id="back_glob">        <div id="back_form">          <form method="post">            <label for="fname">first name</label>            <input type="text" name="fname" id="fname" />            <br/>            <label for="sname">last name</label>            <input type="text" name="sname" id="sname" />            <br/>            <label for="email">email address</label>            <input id="email" name="email" type="text" />            <br/>            <label for="uname">create username</label>            <input name="uname" type="text" id="uname" />            <br/>            <label for="password">create password</label>            <input name="pass" type="password" id="password"/>            <br/>            <input type="submit" name="valid" value="register" />          </form>        </div>      </div>    </div>


Comments

Post a Comment

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

Image
i have page in each contest shown in row. each row contains contest id , link other model names have foreign key contest. news model: class news(models.model): title = models.charfield(max_length=50, null=true) description = models.textfield() time = models.timefield( default= datetime.datetime.now().time()) contest = models.foreignkey(contest) i want use admin adding , changing these models. want when user clicks on 'news' has foreign key contest id=1, shows list of news value foreign key. use {% instance in instances %} <tr class="{% cycle 'row1' 'row2' %}"> <td>{{ instance.title }}</td> <td>{{ instance.starttime }}</td> <td>{{ instance.timespan }}</td> <td>{{ instance.date }}</td> <td><a href="/adm...
Read more

css - Make div keyboard-scrollable in jQuery Mobile? -

from can tell, although jquery-mobile-powered pages can contain divs overflow set scroll or auto, , these divs can scrolled one-screen bar or mouse wheel, cannot scrolled using arrow keys, page-up/page-down, or home/end. instead, official "page" div (with data-role="page") absorbs input. perhaps other divs can't acquire focus, i'm not sure. is there way around this? edit: jsfiddle of simple example: https://jsfiddle.net/qogz0shx/ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"> </script> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"/> <style> #outer { overflow:scroll; height: 50vh; width: 50vw; } #inner { height: 500vh; width: 500vw; } ...
Read more

android - Keyboard hides my half of edit-text and button below it even in scroll view -

i having trouble keyboard covers edit-text , half of button in scroll view. here's layout , please tell me how should resolve problem. many questions on topic none of them s working me. <?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:background="@drawable/bg" android:layout_height="match_parent"> <scrollview android:layout_width="match_parent" android:fillviewport="true" android:layout_height="match_parent"> <relativelayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <linearlayout android:layout_width="match_parent" android:layout_height="w...
Read more