Form on the left and another on the right

0

I have this code:

<div id="about"  class="container spacer about">
        <h2 class="container spacer about">Documentos de la compañia</h2>  
        <div class="main">
            <div class="login">
                <form  method="post" action="login.php">  
                    <fieldset>  
                        <div>  
                            <input  placeholder="E-mail" name="email" type="email" autofocus>  
                        </div>  
                        <div>  
                            <input  placeholder="Password" name="pass" type="password" value="">  
                        </div>  
                        <input  type="submit" value="login" name="login" >  
                    </fieldset> 
                    <p>Si aún no tienes cuenta ve al siguiente link <a href="registrarse.php">Registrarse</a></p>
                </form>  
            </div>
            <div class="login1">
                <form  method="post" action="admin_login.php">  
                    <fieldset>  
                        <div>
                            <input placeholder="Name" name="admin_name" type="text" autofocus>  
                        </div>
                        <div>
                            <input  placeholder="Password" name="admin_pass" type="password" value="">  
                        </div>
                        <input  type="submit" value="login" name="admin_login" >  
                    </fieldset>  
                </form> 
            </div>
        </div>
    </div>

And what I want from those two FORM that contains that each one is on one side, and I have this CSS:

#main{
width:960px;
margin:50px auto;
font-family: 'Raleway', sans-serif;
}


#login{
width:300px;
float: left;
border-radius: 10px;
font-family:raleway;
border: 5px solid #ccc;
padding: 20px 40px 25px;
margin-top: 70px;
}

#login1{
width:300px;
float: right;
border-radius: 10px;
font-family:raleway;
border: 5px solid #ccc;
padding: 30px 40px 25px;
margin-top: 70px;
}

By F12 I do not see that it takes the CSS and I do not know at what exact moment it is failing (if it is linked with:

link rel="stylesheet" href="css.css" /

)

    
asked by Alberto Cepero de Andrés 04.05.2017 в 09:58
source

1 answer

2

You have bad css selectors.

To select an element by the class name you must use the syntax .. The # character is used to select elements by their id.

The css should be:

.main{
    ....
 }

 .login{
    ....
 }

 .login1{
    ....
 }

Working example:

.main{
width:960px;
margin:50px auto;
font-family: 'Raleway', sans-serif;
}


.login{
width:300px;
float: left;
border-radius: 10px;
font-family:raleway;
border: 5px solid #ccc;
padding: 20px 40px 25px;
margin-top: 70px;
}

.login1{
width:300px;
float: right;
border-radius: 10px;
font-family:raleway;
border: 5px solid #ccc;
padding: 30px 40px 25px;
margin-top: 70px;
}
<div id="about"  class="container spacer about">
        <h2 class="container spacer about">Documentos de la compañia</h2>  
        <div class="main">
            <div class="login">
                <form  method="post" action="login.php">  
                    <fieldset>  
                        <div>  
                            <input  placeholder="E-mail" name="email" type="email" autofocus>  
                        </div>  
                        <div>  
                            <input  placeholder="Password" name="pass" type="password" value="">  
                        </div>  
                        <input  type="submit" value="login" name="login" >  
                    </fieldset> 
                    <p>Si aún no tienes cuenta ve al siguiente link <a href="registrarse.php">Registrarse</a></p>
                </form>  
            </div>
            <div class="login1">
                <form  method="post" action="admin_login.php">  
                    <fieldset>  
                        <div>
                            <input placeholder="Name" name="admin_name" type="text" autofocus>  
                        </div>
                        <div>
                            <input  placeholder="Password" name="admin_pass" type="password" value="">  
                        </div>
                        <input  type="submit" value="login" name="admin_login" >  
                    </fieldset>  
                </form> 
            </div>
        </div>
    </div>
    
answered by 04.05.2017 / 10:09
source