0

Bom, meu professor pediu para "clonar" o site do facebook como exercício para aplicar o que foi aprendido com html e css durante a aula. Porém, não consigo deixar os dois labels "senha" e "email" em cima dos dois input text correspondentes, ao utilizar margin left ele arrasta o resto dos inputs para o mesmo lado.

Aqui está o código fonte:

*{
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>

1 Resposta 1

0

Boas tenta colocar os campos dentro de um form e os nomes dos campos como Email e password mete em span para poderes melhor usar no css, se não funcionar faz uma div especifica para isso com width:100% mexes no float: left; e vais ajustando. Depois depende de como está o resto do código e as divs .

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .