I can’t keep my footer down

Asked

Viewed 170 times

1

My HTML and 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>

css html5

2 answers

0

Hello, as you are using only Divs with "position:Absolute", just you set the attribute "margin-top" with the total height value of the other contents, I did this example:

https://jsfiddle.net/q1wf5kLv/

This solves your problem right now, however, there’s a lot to add, because you can’t work a web document that way in a cast, because one of the richest features on the web is that you can resize (it’s what we call a responsive site) its application to various forms of resolution.

For starters, I recommend you try rewriting your code with Bootstrap columns, as they leave the document more professionally standardized and auto-adjustable for mobile. Here a cool tutorial: https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp

Hope I helped, hugs

  • 1

    Oii good night, thank you so much for the help. I am beginner in the area, you saved me. I was almost giving up haha

  • Hahaha, don’t give up, partner! Take the bootstrap p/ make the layout life easier, then you don’t need to edit the css to edit the layout, just use the classes; just success. If you can send Thumbs up. Abs and good luck with your project

0

I’ve made some modifications to your css and fixed the problem of footer. You had several elements positioned absolutely, including the #main. I just removed the style of #main, the position:absolute of footer and some properties of #conteudo.

Follow the modified code:

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>

I noticed that you are always trying to position the elements absolutely on the screen. This is a problem, you should always think that the screens have different sizes and that a layout this way is very difficult to maintain.

Browser other questions tagged css html5

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