How do I make the content and footer respect the top?

Asked

Viewed 66 times

0

I am with a problem, my content and footer n respects the logo and the menu. How could solve this problem?

inserir a descrição da imagem aqui

body {
	background-image: url(img/fundonew.png);
	background-repeat: repeat-x;
	font-family: Arial;
	background-color: #003013;
}

#main {
	min-height:100%; 
    position:relative; 
    width:1200px;
    margin: 0 auto;

}

#logo {
	position: absolute;
	top:0px;
	left: -100px;
	width: 150px;
	height: 150px;

}
#btinicio {
	position: absolute;
	top:60px;
	left:340px;
	width: auto;
	height: 33px;
}
#btaquecimento {
	position: absolute;
	top:60px;
	left:470px;
	width: auto;
	height: 33px;
}
#btefeito {
	position: absolute;
	top:60px;
	left:670px;
	width: auto;
	height: 33px;
}
#btea {
	position: absolute;
	top:60px;
	left:810px;
	width: auto;
	height: 33px;
}
#conteudo {
	width: 100%;
	top:-150px;
    background: #cccccc;   
}

#conteudo p{
	font-size:20px;
	text-align: justify;
	margin-left: 10px;
	margin-right: 10px;	
}

#footer{    
    background: #3C948B;
    position:absolute;
    bottom:0; 
    width:100%;
    margin-top: 10px;
}
<!DOCTYPE html>
<html>
	<head>
		<title>Educãção Ambiental</title>
		<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
	</head>
	<body>
		<div id="main"> 
			<div id="logo">
				<a href="index.html"><img src="img/logoofc.png" border="0"></a>
			</div>
			<div id="btinicio">
				<a href="index.html"><img src="img/inicio1.png" border="0" onMouseOver="this.src='img/inicio2.png'" onMouseOut="this.src='img/inicio1.png'"></a>
			</div>
			<div id="btaquecimento">
				<a href="aquecimento.html"><img src="img/aquecimento2.png" border="0" onMouseOver="this.src='img/aquecimento3.png'" onMouseOut="this.src='img/aquecimento2.png'"></a>
			</div>
			<div id="btefeito">
				<a href="efeito.html"><img src="img/efeito1.png" border="0" onMouseOver="this.src='img/efeito2png.png'" onMouseOut="this.src='img/efeito1.png'"></a>
			</div>
			<div id="btea">
				<a href="ea.html"><img src="img/ea2.png" border="0" onMouseOver="this.src='img/ea3.png'" onMouseOut="this.src='img/ea2.png'"></a>
			</div>
			<div id="conteudo">
				<h2> 
					O planeta pede socorro
				</h2>
				<p>
					Falta d'água. Falta de energia. Falta de área verde. Tudo isso gerado pela falta de consciência das pessoas. 
					<br>
					<br>
					Estamos começando a sentir o mal que a Terra sente há anos, o elevado uso dos recursos naturais do Planeta está sobrecarregando-o, ultrapassando o limite, e se não respeitado esse limite, o que poderá ocorrer futuramente ?
				</p>
				<p>
					A reciclagem é uma de várias maneiras que podem ser colocada é prática para solucionar alguns problemas ambientais, é necessário que sempre tenhamos em mente que não devemos jogar lixo em qualquer lugar, um exemplo claro, é o lixo eletrônico.
					<br>
					<br>
					Hoje milhares de pessoas tem celular, e por causa da rápida obsolescência desses equipamentos, é comum jogarmos eles nos lixos de casa ou da rua, porém, é um hábito errado, que pode trazer várias doenças e impactos ambientais, o certo seria levar para estabelecimentos que fazem esse tipo de reciclagem para que não ocorra esses casos. 
					<br>
					<br>
					A poluição do ar é preocupante , a emissão de CO2 aumenta a cada ano, entretanto, esse é um problema que só pode ser combatido em conjunto, ao invés de usar carros ou motos para sair, pode-se usar as bicicletas, pois além de fazer bem para a saúde, minimiza a emissão de dióxido de carbono na atmosfera. 
					<br>
					<br>
					Fica claro, portanto, que os nossos maus hábitos estão trazendo inúmeros problemas ambientais que só podem ser resolvidos em conjunto. 
					<br>
					<br>
					A mídia é um importante fator nesse cenário, pois ela precisa denunciar e esclarecer a sociedade sobre as nossas atitudes, mostrar os problemas que estamos gerando e o que poderá acontecer se não mudarmos os nossos hábitos. 
					<br>
					<br>
					O governo deve criar medidas que cesse a poluição e o consumo exagerado. E é necessário que cada indivíduo tenha consciência do que está acontecendo e respeite o meio ambiente, evitando desperdício e reduzindo embalagens, porque o "planeta pede socorro".
				</p>
			</div>
			<div id="footer">
				<h1>Desenvolvido pelo grupo: Shadow - Para a semana Paulo Freire</h1>
			</div>
		</div>
	</body>
</html>

  • This is not the same question you asked in https://answall.com/questions/381423/n%C3%a3o-can-let-the-footer-down?

  • I didn’t ask that question

  • Corrected link...

  • With the help of the staff I managed to solve the problem of the footer, but the top is on top of the contents, I would like the contents and the footer to respect that space :(

2 answers

0

Your CSS is a little confused, but what’s generating this conflict are these position: Absolute; which you’re declaring in all Divs. And when using the float: Left or float: right, not conflict with the next content put clear: Both;

0

How are you using position absolute in the menu elements (including the logo), these elements do not take up space on the page. You can solve by placing a padding-top in div#main with enough value to create a space at the top of the div so that the content is not below the menu:

#main {
    padding-top: 180px; /* AQUI */
    min-height:100%; 
    position:relative; 
    width:1200px;
    margin: 0 auto;
}

In the example above I put 180px, taking into account that its soon possesses 150px height, giving a margin of 30px between the logo and the content, but this value you can adjust as you see fit.

body {
	background-image: url(img/fundonew.png);
	background-repeat: repeat-x;
	font-family: Arial;
	background-color: #003013;
}

#main {
  padding-top: 180px;
	min-height:100%; 
    position:relative; 
    width:1200px;
    margin: 0 auto;

}

#logo {
	position: absolute;
	top:0px;
	left: -100px;
	width: 150px;
	height: 150px;

}
#btinicio {
	position: absolute;
	top:60px;
	left:340px;
	width: auto;
	height: 33px;
}
#btaquecimento {
	position: absolute;
	top:60px;
	left:470px;
	width: auto;
	height: 33px;
}
#btefeito {
	position: absolute;
	top:60px;
	left:670px;
	width: auto;
	height: 33px;
}
#btea {
	position: absolute;
	top:60px;
	left:810px;
	width: auto;
	height: 33px;
}
#conteudo {
	width: 100%;
	top:-150px;
    background: #cccccc;   
}

#conteudo p{
	font-size:20px;
	text-align: justify;
	margin-left: 10px;
	margin-right: 10px;	
}

#footer{    
    background: #3C948B;
    position:absolute;
    bottom:0; 
    width:100%;
    margin-top: 10px;
}
<!DOCTYPE html>
<html>
	<head>
		<title>Educãção Ambiental</title>
		<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
	</head>
	<body>
		<div id="main"> 
			<div id="logo">
				<a href="index.html"><img src="img/logoofc.png" border="0"></a>
			</div>
			<div id="btinicio">
				<a href="index.html"><img src="img/inicio1.png" border="0" onMouseOver="this.src='img/inicio2.png'" onMouseOut="this.src='img/inicio1.png'"></a>
			</div>
			<div id="btaquecimento">
				<a href="aquecimento.html"><img src="img/aquecimento2.png" border="0" onMouseOver="this.src='img/aquecimento3.png'" onMouseOut="this.src='img/aquecimento2.png'"></a>
			</div>
			<div id="btefeito">
				<a href="efeito.html"><img src="img/efeito1.png" border="0" onMouseOver="this.src='img/efeito2png.png'" onMouseOut="this.src='img/efeito1.png'"></a>
			</div>
			<div id="btea">
				<a href="ea.html"><img src="img/ea2.png" border="0" onMouseOver="this.src='img/ea3.png'" onMouseOut="this.src='img/ea2.png'"></a>
			</div>
			<div id="conteudo">
				<h2> 
					O planeta pede socorro
				</h2>
				<p>
					Falta d'água. Falta de energia. Falta de área verde. Tudo isso gerado pela falta de consciência das pessoas. 
					<br>
					<br>
					Estamos começando a sentir o mal que a Terra sente há anos, o elevado uso dos recursos naturais do Planeta está sobrecarregando-o, ultrapassando o limite, e se não respeitado esse limite, o que poderá ocorrer futuramente ?
				</p>
				<p>
					A reciclagem é uma de várias maneiras que podem ser colocada é prática para solucionar alguns problemas ambientais, é necessário que sempre tenhamos em mente que não devemos jogar lixo em qualquer lugar, um exemplo claro, é o lixo eletrônico.
					<br>
					<br>
					Hoje milhares de pessoas tem celular, e por causa da rápida obsolescência desses equipamentos, é comum jogarmos eles nos lixos de casa ou da rua, porém, é um hábito errado, que pode trazer várias doenças e impactos ambientais, o certo seria levar para estabelecimentos que fazem esse tipo de reciclagem para que não ocorra esses casos. 
					<br>
					<br>
					A poluição do ar é preocupante , a emissão de CO2 aumenta a cada ano, entretanto, esse é um problema que só pode ser combatido em conjunto, ao invés de usar carros ou motos para sair, pode-se usar as bicicletas, pois além de fazer bem para a saúde, minimiza a emissão de dióxido de carbono na atmosfera. 
					<br>
					<br>
					Fica claro, portanto, que os nossos maus hábitos estão trazendo inúmeros problemas ambientais que só podem ser resolvidos em conjunto. 
					<br>
					<br>
					A mídia é um importante fator nesse cenário, pois ela precisa denunciar e esclarecer a sociedade sobre as nossas atitudes, mostrar os problemas que estamos gerando e o que poderá acontecer se não mudarmos os nossos hábitos. 
					<br>
					<br>
					O governo deve criar medidas que cesse a poluição e o consumo exagerado. E é necessário que cada indivíduo tenha consciência do que está acontecendo e respeite o meio ambiente, evitando desperdício e reduzindo embalagens, porque o "planeta pede socorro".
				</p>
			</div>
			<div id="footer">
				<h1>Desenvolvido pelo grupo: Shadow - Para a semana Paulo Freire</h1>
			</div>
		</div>
	</body>
</html>

Browser other questions tagged

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