1

Meu HTML e CSS:

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

#main {
	position: absolute;
	top:0px;
	left:50%;
	width: 770px;
	margin-left: -450px;


}

#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 {
	position: relative;
	top:150px;
	left:2px;
	width:900px;
	height: auto;
	background-color: #bcc1ad;
	color: #0024ff;
}

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

#footer {
	position:absolute;
	bottom: 0px;
	width: 100%;

}
<!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>

0

2 Respostas 2

0

Olá, como você está usando somente divs com "position:absolute", é só você setar o atributo "margin-top" com o valor total da altura dos demais conteúdos, fiz esse exemplo:

https://jsfiddle.net/q1wf5kLv/

Isso resolve seu problema nesse momento, entretanto, há muito a agregar, pois você não pode trabalhar um documento web dessa forma engessada, pois um dos recursos mais ricos da web é você poder redimensionar (é o que chamamos de site responsivo) sua aplicação para diversas formas de resolução.

Para começar, recomendo você tentar reescrever seu código com as colunas do Bootstrap, pois deixam o documento padronizado de forma mais profissional e auto ajustável para mobile. Aqui um tutorial legal: https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp

Espero ter ajudado, abraços

2
  • 1
    Oii boa noite, muito obrigado pelo ajuda. Sou iniciante na área, você me salvou. Já estava quase desistindo haha
    – WCDS
    Commented 5/05/2019 às 2:31
  • hahaha, não desista parceiro! Pega o bootstrap p/ facilitar a vida do layout, aí você não precisa editar o css para editar o layout, só usar as classes; só sucesso. Se puder mandar thumbs up. Abs e boa sorte com seu projeto Commented 5/05/2019 às 2:52
0

Fiz algumas modificações no seu css e consertei o problema do footer. Você tinha vários elementos posicionados de forma absoluta, inclusive o #main. Eu apenas removi o estilo de #main, o position:absolute do footer e algumas propriedades do #conteudo.

Segue o código modificado:

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

#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 {
	position: relative;
	margin-top:150px;
	background-color: #bcc1ad;
	color: #0024ff;
}

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

#footer {
	bottom: 0px;
	width: 100%;
}
<!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>

Percebi que você tá tentando sempre posicionar os elementos de forma absoluta na tela. Isso é um problema, você deve sempre pensar que as telas têm tamanhos diferentes e que um layout dessa forma é muito difícil de manter.

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