Ir ao conteúdo
  • Cadastre-se
Marcos Matos

Problemas com html e css

Recommended Posts

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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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>.

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×