Problemas com html e css

Marcos Matos · 28 de novembro de 2016

Obs: SOU INICIANTE

Estou fazendo um exercício para o curso e estou tendo um problema..

O exercício consiste em replicar a pagina inicial do Facebook usando html e css. O problema é que o body esta gigante, a pagina fica no meio e o body extrapola, ficando aquele espaço vazio em volta da "pagina" de fato. Isto acontece no lado direito. Segue abaixo o codigo completo.

ME AJUDEM

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			div.container {
				width: 100%;
				border: 1px solid gray;
			}

			header, footer {
				margin-top:-10px;
				padding: 30px;
				color: white;
				background-color:#3B5C9A;
				clear: left;
				text-align: center;
			}

			nav {
				float: left;
				max-width: 100px;
				margin: 0;
				padding: 1em;
			}

			nav ul {
				list-style-type: none;
				padding: 0;
			}
   
			nav ul a {
				text-decoration: none;
			}

			article {
				margin-left: 170px;
				border-left: 1px solid gray;
				padding: 1px;
				overflow: hidden;
			}
			
			#nomeface{
				margin-right:900px;
				margin-left:150px;
				padding-top:0px;
				margin-top:-10px;
				position:absolute;
			}
			
			#login{
				margin-left:756px;
				font-size:13px;
				margin-top:-17px;
				position:absolute;
			}
			
			#senha{
				margin-top:-35px;
				font-size:13px;
				margin-left:940px;
				position:absolute;
			}
		
			#entrar{
				margin-right:-1040px;
				margin-top:-20px;
			}
			
			#esqueceusenha{
				margin-left:940px;
				font-size:13px;
				margin-top:5px;
				position:absolute;
			}
			
			#footer{
				margin-top:40%;
			}
			
			#formulario{
				margin-left:750px;
				width:55.3%;
				height:81.5%;
				position:absolute;
			}
			
			#imagem{
				margin-left:40px;
				width:55.3%;
				height:81.5%;
				position:absolute;
			}

			#imagemface{
				margin-top:20px;
				width:80%;
				height:50%;
				margin-left:150px;
			}
			
			#frase{
				margin-left:200px;
				margin-top:40px;
				font-family:Arial;
				font-size:20px;
				font-weight:700;
			}
			
			h1{
				font-family:arial;
				font-stretch:700;
			}
			
			p{
				font-family:arial;
				font-size:20px;
			}
			
			#form{
				font-family:arial;
			}
			
			#campolongo{
				width:39.3%;
			}
			
			body{
				border: none;
				alignment-adjust: central;
				background-color:#E9ECF3;
			}
		</style>
	</head>
	
	<body>
		<div class="container">
			<div id="form">
				<header>
					<div id="nomeface">
						<img src="logo.png">
					</div>
				   
					<form>
						<div id="login">
							Email ou telefone<br>
							<input type="text" name="Email ou telefone">
						</div>
						<br>
						<div id="senha">
							Senha<br>
							<input type="text" name="Senha">
						</div>
						<div id="entrar">
							<input type="submit" value="Entrar">
						</div>
					</form> 
					<p id ="esqueceusenha">Esqueceu a conta?</p>
				</header>
			</div>
			
			<div class="row">
				<div class="col-md-4" id="imagem">
					<div id="frase">
						O Facebook ajuda você a se conectar e<br>
						compartilhar com as pessoas que fazem parte<br>
						da sua vida.<br>
					</div>
					<div id="imagemface">
						<img id="img"src="face.png">
					</div>
				</div>
				
				<div id="formulario" class="col-md-4">
					<h1>Abra uma conta</h1>
					<p>É gratuito e sempre será.</p>
					<input type="text" name="nome" placeholder="Nome">
					<input type="text" name="sobrenome" placeholder="Sobrenome">
						<br><br>
					<input id="campolongo" type="text" name="celularemail" placeholder="Celular ou email">
						<br><br>
					<input id="campolongo" type="text" name="novocelularemail" placeholder="Insira novamente o número do celular ou o email">
						<br><br>
					<input id="campolongo" type="text" name="novasenha" placeholder="Nova Senha">		
				</div>
			</div> 

			<footer id="footer">Copyright © W3Schools.com</footer>

		</div>

	</body>
</html>

JorgeGomes · 28 de novembro de 2016

Cara, dê uma conferida nessas margens, para que isso todo? Tem margens que tem mesma quantidade de pixels que uma tela desktop, esta por exemplo:

margin-right:900px;

Você pode fazer algo extremamente simples utilizando ou se baseando no sistema de grids do framework bootstrap. Dê uma olhada depois.

DiF · 28 de novembro de 2016

@Marcos Matos Olá, seja Bem vindo em nosso Fórum do Clube do Hardware.

Bom, o seu erro inicialmente é o uso do margin-left e right para alguns elementos.

Pense um pouco melhor sobre como vai deixar os elementos aonde tem que estar.

adicionado 1 minuto depois

5 minutos atrás, JorgeGomes disse:

Você pode fazer algo extremamente simples utilizando ou se baseando no sistema de grids do framework bootstrap. Dê uma olhada depois.

Não tem sentido usar o bootstrap, já que é um exercício para justamente exercitar o uso das regras CSS.

Sim o erro dele é o uso excessivo do margin.

@Marcos Matos

Como é um exercício não podemos fazer por você.

Mas podemos dar dicas. Uma é definir o seu container para que ele tenha 960px de width centralizado.

em cima disso você posiciona os elemento de forma que eles não extrapolem o limite

Nihal · 28 de novembro de 2016

@Marcos Matos E aqui vai mais uma dica: Use um resetter. Cada browser tem um estilo padrão que interferirá nos seus estilos, sendo bem útil remover antes de começar. O que linkei é bem radical, pode ser menos agressivo, mas você precisa remover no mínimo margin do <body>.

JorgeGomes · 28 de novembro de 2016

o problema está aqui:

<input value="Entrar" wtx-context="2E50E7F0-188D-4917-8E3B-33B1207CD0B4" type="submit">

#entrar {
    margin-right: -1040px;
}

tira este margin-right e bota isso:

#entrar {
	float: right;
}

a partir daí, adiciona margin-right para posicioná-lo mais para esquerda.

Marcos Matos · 29 de novembro de 2016

@JorgeGomes @Nihal @DiF

Obrigado pelas dicas, eu pesquisei e consegui resolver o problema.. Valeu gente

Entrar

Problemas com html e css

Posts recomendados

Marcos Matos

Link para o comentário

Compartilhar em outros sites

JorgeGomes

Link para o comentário

Compartilhar em outros sites

DiF

Link para o comentário

Compartilhar em outros sites

Nihal

Link para o comentário

Compartilhar em outros sites

JorgeGomes

Link para o comentário

Compartilhar em outros sites

Marcos Matos

Link para o comentário

Compartilhar em outros sites

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos