Well, my teacher asked to "clone" the facebook site as an exercise to apply what was learned with html and css during class. However, I can not leave the two labels "password" and "email" on top of the two corresponding input text, using margin left it drags the rest of the inputs to the same side.
Here is the source code:
*{
margin:0px;
}
#divSuperior{
height:82px;
width:100%;
background-color:#3b5998;
z_index:1;
}
#divSuperior h1{
float:left;
padding-left:190px;
padding-top:26px;
font-size: 36px;
font-family: arial;
}
#divSuperior h1 a{
text-decoration: none;
color: white;
}
#Email{
float:right;
border:1px solid black;
height:22px;
width: 150px;
margin-top:32px;
margin-right:12px;
}
#Senha{
float:right;
border:1px solid black;
height:22px;
width: 150px;
margin-top:32px;
margin-right:75px;
}
#labEmail{
float:right;
color:white;
font-family: arial;
font-size:12px;
cursor:pointer;
margin-top:10px;
}
#labSenha{
float:right;
color:white;
font-family: arial;
font-size:12px;
cursor:pointer;
}
#botaoEntrar{
float:right;
}<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Facebook - entre ou cadastre-se</title>
<link rel="stylesheet" type="text/css" href="Facebook.css">
</head>
<body>
<div id = "divSuperior">
<h1><a href = "www.facebook.com.br"><b>Facebook</b></a></h1>
<button type="button" id = "botaoEntrar">Entrar</button>
<label for = "Senha" id = "labSenha">Senha</label>
<label for = "Email" id = "labEmail">Email ou telefone</label>
<input type="text" id = "Senha">
<input type="text" id = "Email"/>
</div>
<div id = "divEsquerda"></div>
<div id = "divDireita"></div>
</body>
</html>