Tag layout on a div, padding and magin

Asked

Viewed 101 times

0

Well, my teacher asked me to "clone" the Facebook site as an exercise to apply what was learned with html and css during class. However, I cannot leave the two "password" and "email" boxes on top of the two corresponding input text, when 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>

div css-padding floating

1 answer

0

Good tries to put the fields inside a form and the field names as Email and password stick in span so you can use it better in css, if it doesn’t work do a specific div for it with width:100% stirrings in the float: left; and you adjust it. Then it depends on how the rest of the code and the Divs are .

Browser other questions tagged div css-padding floating

You are not signed in. Login or sign up in order to post.