HTML/CSS Element out of place

Question

HTML/CSS Element out of place

Asked 7 years, 1 month ago

Viewed 468 times

1

I don’t know where I’m going wrong, but my footer is in the middle of the page. It’s my future portfolio, so it’s not all going to be final. Other suggestions are welcome.

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family:'Open Sans';
}

header{
	width: 100%;
	height: 65px;
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	z-index: 1;
}

h1{
	padding: 20px;
}

#menu ul{
	margin-right: 5%;
}

#menu li{
	margin-right: 0.5%;
	display: inline;
	padding: 20px;
	float: right;
}

#menu li a{
	color: #ffffff;
	font-family: 'Open Sans';
	text-decoration: none;
	padding: 10px;
}
#menu a:hover{
	text-decoration: underline;
}

h1{
	margin-left: 5%;
	color:#fff;
	text-decoration: none;
	float: left;
	font-size: 20px;
}

#banner{
	position: relative;
	background:url(img/code-3.jpeg) no-repeat;
	background-size: cover;
	width: 100%;
	height: 100vh;
	background-position:0px 0px ;
	/*margin-bottom: 30px;*/
}

#banner p{
	position: relative;
	text-align: center;
	color: #fff;
	font-family: 'Open Sans';
	font-size: 3.5em;
	top:48%;
	/*left: 400px;*/
}

.secao{
	position: absolute;
	width: 100%;
	/*height: 100vh;*/
	background-color: #eee;
}

.servicos{
	padding: 1.5%;
	margin-top: 60px;
	margin-left: 10%;
	width: 35%;
	float: left;
	border-radius:7px;
	/*height: 300px;*/
	color:#2d2d2d;
	/*background-color: #eee;*/
	text-align: center;
}

.servicos h2{
	font-family: 'Roboto';
	font-size: 2.4em;
	margin-bottom: 2%;
}

.servicos p{
	font-family: 'Open Sans';
	font-size: 120%;
	line-height: 30px;
	
}

.tecnologias{
	margin:10% 0;
	width: 100%;	
}

.tecnologias h2{
	margin-bottom: 4%;
}

.tecno{
	display: inline-block;
	margin-left: 2%;
}

footer{
	position: relative;
	background-color: red;
	font-size: 40px;
}

<!DOCTYPE html>
<html lang="pt-br">
	<title>Alexandre | Desenvolvedor Web</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="estilo.css">
	<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans:300|Roboto" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaijaan|Montserrat|Slabo+27px" rel="stylesheet">
	<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<body>
	
	<header id="cabecalho">
		<h1>Alexandre | Front End Developer <i class="fa fa-code"></i></h1>
		<nav id="menu">
			<ul id="lista">
				<li> <a href="#">Home</a></li>
				<li><a href="#">Sobre</a></li>
				<li> <a href="#">Contato</a></li>
				<li> <a href="#">Serviços</a></li>

			</ul>

		</nav>
			
	</header>

	<div id="banner"><p>Posso Te Ajudar A Ter Um Site Só Seu</p></div>

<section class="secao">

	<div class="servicos">
		<h2>Quem Sou Eu</h2>
		<p>Oi! Me chamo Alexandre e sou Desenvolvedor Front End.</p>
		<p>Isso quer dizer que se você tem uma empresa, um hobbie, ou um projeto e precisa de um site para exibir na web eu posso te ajudar.</p>
	</div>

	<div class="servicos">
		<h2>Serviços</h2>
		<p>Trabalho com desenvolvimento de sites usando as mais atuais tecnologias buscando os melhores resultados possíveis.</p>
	</div>



<div class="servicos tecnologias">

	<h2>Tecnologias Que Uso</h2>
	<div class="tecno">
		<figure>
			<img src="img/html5-badge-156.png" alt="logo html5">
			<figcaption>HTML5</figcaption>
			</figure>
	</div>

	<div class="tecno">
		<figure>
			<img src="img/css3-156.png" alt="logo css3">
			<figcaption>CSS3</figcaption>
		</figure>
	</div>

	<div class="tecno">
		<figure>
			<img src="img/javascript-156.png" alt="logo javascript">
			<figcaption>JAVASCRIPT</figcaption>
		</figure>
	</div>

	<div class="tecno">
		<figure>
			<img src="img/wordpress-156.png" alt="wordpress logo">
			<figcaption>WORDPRESS</figcaption>
		</figure>
	</div>

</div>
	</section>

<footer>
	<p>teste</p>

</footer>

</body>

</html>

And how you want the footer to look?

– Wictor Chaves

2017/10/13 at 13:28
For your footer to always be at the end of the screen you have to use javascript, because the screen size depends on each user. You’re saying the footer is in the middle of the screen, I have to scroll to see it. You have to take the client screen size and then adjust your footer accordingly.

– Helder Pereira

2017/10/13 at 13:31
I want it to be at the bottom of the page. I thought I might be missing some position in the code.

– Alexandre Oliveira

2017/10/13 at 13:47

2 answers

1

I noticed 3 problems in your code:

1) Absence of tag <head></head>.
2) position: absolute; in class .secao: is causing the element with this class to be "loose" on the page, causing the footer in the middle of the page. Remove this position.
3) Need to give shape, size and position to the footer (display, width, float):

   footer{
        position: relative;
        background-color: red;
        font-size: 40px;
        display: block;
        float: left;
        width: 100%;
    }

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family:'Open Sans';
}

header{
	width: 100%;
	height: 65px;
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	z-index: 1;
}

h1{
	padding: 20px;
}

#menu ul{
	margin-right: 5%;
}

#menu li{
	margin-right: 0.5%;
	display: inline;
	padding: 20px;
	float: right;
}

#menu li a{
	color: #ffffff;
	font-family: 'Open Sans';
	text-decoration: none;
	padding: 10px;
}
#menu a:hover{
	text-decoration: underline;
}

h1{
	margin-left: 5%;
	color:#fff;
	text-decoration: none;
	float: left;
	font-size: 20px;
}

#banner{
	position: relative;
	background:url(img/code-3.jpeg) no-repeat;
	background-size: cover;
	width: 100%;
	height: 100vh;
	background-position:0px 0px ;
	/*margin-bottom: 30px;*/
}

#banner p{
	position: relative;
	text-align: center;
	color: #fff;
	font-family: 'Open Sans';
	font-size: 3.5em;
	top:48%;
	/*left: 400px;*/
}

.secao{
	width: 100%;
	/*height: 100vh;*/
	background-color: #eee;
}

.servicos{
	padding: 1.5%;
	margin-top: 60px;
	margin-left: 10%;
	width: 35%;
	float: left;
	border-radius:7px;
	/*height: 300px;*/
	color:#2d2d2d;
	/*background-color: #eee;*/
	text-align: center;
}

.servicos h2{
	font-family: 'Roboto';
	font-size: 2.4em;
	margin-bottom: 2%;
}

.servicos p{
	font-family: 'Open Sans';
	font-size: 120%;
	line-height: 30px;
	
}

.tecnologias{
	margin:10% 0;
	width: 100%;	
}

.tecnologias h2{
	margin-bottom: 4%;
}

.tecno{
	display: inline-block;
	margin-left: 2%;
}

footer{
	position: relative;
	background-color: red;
	font-size: 40px;
	display: block;
	float: left;
	width: 100%;
}

<header id="cabecalho">
	<h1>Alexandre | Front End Developer <i class="fa fa-code"></i></h1>
	<nav id="menu">
		<ul id="lista">
			<li> <a href="#">Home</a></li>
			<li><a href="#">Sobre</a></li>
			<li> <a href="#">Contato</a></li>
			<li> <a href="#">Serviços</a></li>
		</ul>
	</nav>
</header>
<div id="banner"><p>Posso Te Ajudar A Ter Um Site Só Seu</p></div>
<section class="secao">
	<div class="servicos">
		<h2>Quem Sou Eu</h2>
		<p>Oi! Me chamo Alexandre e sou Desenvolvedor Front End.</p>
		<p>Isso quer dizer que se você tem uma empresa, um hobbie, ou um projeto e precisa de um site para exibir na web eu posso te ajudar.</p>
	</div>
	<div class="servicos">
		<h2>Serviços</h2>
		<p>Trabalho com desenvolvimento de sites usando as mais atuais tecnologias buscando os melhores resultados possíveis.</p>
	</div>
	<div class="servicos tecnologias">
		<h2>Tecnologias Que Uso</h2>
		<div class="tecno">
			<figure>
				<img src="img/html5-badge-156.png" alt="logo html5">
				<figcaption>HTML5</figcaption>
			</figure>
		</div>
		<div class="tecno">
			<figure>
				<img src="img/css3-156.png" alt="logo css3">
				<figcaption>CSS3</figcaption>
			</figure>
		</div>
		<div class="tecno">
			<figure>
				<img src="img/javascript-156.png" alt="logo javascript">
				<figcaption>JAVASCRIPT</figcaption>
			</figure>
		</div>
		<div class="tecno">
			<figure>
				<img src="img/wordpress-156.png" alt="wordpress logo">
				<figcaption>WORDPRESS</figcaption>
			</figure>
		</div>
	</div>
</section>
<footer>
	<p>teste</p>
</footer>

That’s exactly what it was, thank you very much,

– Alexandre Oliveira

2017/10/13 at 15:19

Browser other questions tagged html css positioning

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

by Wictor Chaves • **8,445** points · Answer 1 · 2017-10-13T15:07:41+00:00

"I think I expressed myself badly. I want the footer at the bottom of the page following the flow, as in most pages. With the position Fixed it stays in the front of other elements on the page."

You’re putting in .dried as position: Absolute; then the footer is behind the .dried, so the footer disappears and does not follow the normal flow of the site.