Onlineformular in Screencenter

ChrisB. · 4 Oktober 2014

Guten Tag
und zwar habe ich ein Problem. Ich möchte gerne mein Onlineformular in die Mitte des Bildschirmes setzen, sprich horizontal und nicht nur vertikal.
Ich habe natürlich bereits Google befragt und kam auch schon auf Code-Schnipseln, die ich verwendet habe. Das Problem leider war dann hierbei, das zwar das Formular in die Mitte gesetzt wurde, aber hat sich von der Größe verändert, also sah nicht mehr so aus, wie ich es geplant hatte.

Wäre super wenn ihr mir da weiterhelfen könnt.

Hier der Code:

HTML:

<html>


    <head>

        <link rel="stylesheet" href="Style/stylesheet.css" type="text/css" />
        <a name="top"></a>

        <title>Projekt: School Manager</title>

    </head>
  

    <body class="blurBg-false" style="background-color:#909090"  >

        <center>


          

                <form action="login.php" class="stylesheet" style="background-color:#FFFFFF;
                                                font-size:14px;
                                                font-family:'Roboto',Arial,Helvetica,sans-serif;
                                                color:#34495E;
                                                max-width:480px;
                                                min-width:150px"
                                              

                      method="post" align="center" >



                    <div class="title"><h2>Login</h2></div>

                    <div class="element-input">
                        <div class="item-cont">

                            <input class="large" type="text" name="username"
                                   placeholder="Username"/>

                            <span class="icon-place"></span>

                        </div>
                    </div>

                    <div class="element-password">
                        <div class="item-cont">

                            <input class="large" type="password" name="password" value=""                    placeholder="Password"/>
                            <span class="icon-place"></span>

                        </div>
                    </div>

                    <div class="submit"><input type="submit" value="Senden"/></div>

                </form>

          
          

        </center>  

          



        <footer>
              
              

        </footer>


          
      
    </body>

  
</html>

Hier der fertige CSS Code, dessen Vorlage ich benutze aus dem Internet. Es ist nicht der ganze, denn die Größe der Datei ist zu lang für ein Beitrag. Sprich: Musste die Datei kürzen:

Code:

/* solid-green */
@import url(https://fonts.googleapis.com/css?family=Roboto);

html{
    height: 100%;
}
.stylesheet{
    margin:0 auto;
}
.stylesheet>div,
.stylesheet>.title{
    margin: 8px;
}
.stylesheet .error-field .required{
    color:#FF9999;
}
.stylesheet .error-field input,
.stylesheet .error-field input[type=text],
.stylesheet .error-field input[type=password],
.stylesheet .error-field input[type=email],
.stylesheet .error-field input[type=url],
.stylesheet .error-field input[type=date],
.stylesheet .error-field input[type=number],
.stylesheet .error-field textarea{
    border-color:#D893A1;
    background-color: #FBE6F2;
}
.stylesheet label.error{
  display:inline-block;
  font-size:0.9em;
}
.stylesheet .error,
.stylesheet .error #recaptcha_widget_div{
  padding: 3px 14px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;

  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
  color: #c09853;
}
.stylesheet .error h4 {
  color: #b94a48;
  margin: 0;
}

.stylesheet .error .close {
  position: relative;
  top: -2px;
  right: -21px;
  line-height: 20px;
}
.stylesheet .column{
    float:left;
}
/* width = parseInt(100/columns.length)*/
.stylesheet .column1{ width:100%;}
.stylesheet .column2{ width:50%; }
.stylesheet .column3{ width:33%; }
.stylesheet .column4{ width:25%; }
.stylesheet .column5{ width:20%; }



.stylesheet .large{
    width: 100%;
    *width: 94%;
}
.stylesheet .medium{
    width: 50%;
    *width: 47%;
}
.stylesheet .small{
    width: 25%;
    *width: 23%;
}

.stylesheet textarea.large{
    width: 100%;
    *width: 94%;
    height: 20em;
}
.stylesheet textarea.medium{
    width: 100%;
    *width: 94%;
    height: 10em;
}
.stylesheet textarea.small{
    width: 100%;
    *width: 94%;
    height: 5.5em;
}

/* address select style */
.stylesheet .element-address .country {
    position: relative;
}

.frmd{
    display:none;
}
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}


/*


Solid style


*/
@font-face {
    font-family: formoid;
    src:url('formoid.eot');
    src:url('formoid.eot?#iefix') format('embedded-opentype'),
    url('formoid.ttf') format('truetype'),
    url('formoid.woff') format('woff'),
    url('formoid.svg#formoid') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: 'icons';
  src: url('icons.eot');
  src: url('icons.eot#iefix') format('embedded-opentype'),
       url('icons.woff') format('woff'),
       url('icons.ttf') format('truetype'),
       url('icons.svg#icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

.stylesheet{
    font-size: 1em;
    line-height: 1.231;

    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}
.stylesheet label.title{
    font-size: 1em;
    font-weight: 500;
    width: auto;
}
.stylesheet input[type=button]{
    outline: none;
    font-size: 1em;
}
.stylesheet input[type=submit]{
    outline: none;
    font-size: 1.2em;
}
.stylesheet>div{
    margin-left: 25px;
    margin-right: 25px;
}
.stylesheet h2 {
    margin: 0.2em 0;
    font-size: 2em;
    font-weight: 300;
    color: #fff;
}

.stylesheet label {
    display: block;
    margin-bottom: 3px;
    clear: both;
}

.stylesheet div, .stylesheet span, .stylesheet label, .stylesheet input, .stylesheet textarea, .stylesheet select, .stylesheet button, .stylesheet ul, .stylesheet li, .stylesheet a{
    font-family: inherit;
    color: inherit;
}
}

Onlineformular in Screencenter

ChrisB.

Neues Mitglied

Anhänge

Neueste Beiträge