GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Footer sobrepondo Header [RESOLVIDO]


#1

Olá a todos,

Estou aprendendo HTML/CSS, e estou criando uma página para um amigo(ou tentando)…Criei a pagina inicial, e quero criar outra.
Copio o header e footer da inicial para deixar padronizado e mudar somente a section: porém, o footer está ficando em cima da pagina, sobrepondo o header.
Alguém sabe o porque? Podem me ajudar?

Segue o Codigo HTML:

<title>Montana´s Hamburgueria</title>
		
<link rel= "stylesheet" href= "lib/bootstrap/css/bootstrap.min.css">
<link rel = "stylesheet" href="lib/owl.carousel2/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="font-awesome/font-awesome/css/font-awesome.min.css">
<link rel = "stylesheet" href="lib/owl.carousel2/dist/assets/owl.theme.default.min.css">
<link rel= "stylesheet" href= "montana.css">
<header>
	<div id="hamburgueria">
		<h1>Montana´s Hamburgueria</h1>
	</div>
	
	<div id="busca" class="pull-right">
		<div class="input-group">
			<input type="search" placeholder="Busca...">
			 <span class="input-group-btn">
				<button type="button"><i class="fa fa-search"></i></button>
			 </span>
		</div>
	</div>
		
	<div class="img">
		<img id="logotipo" src="img/logo-xtudo.png" alt="logotipo">
	</div>

	<div class="container">
		<div class="row">
			
			<nav id="menu" class= "pull-right">
				
				<ul>
					<li><a href="index.html">Home</a></li>
					<li><a href="cardapio.html">Cardápio</a></li>
					<li><a href="#">Redes Sociais</a></li>
					<li><a href="#">Fale Conosco</a></li>
					<li><a href="sobre.html">Sobre Nós</a></li>
				
				</ul>
			</nav>
		</div>

	</div>
	

</header>
</div>

<div id="promocao" class="container">
	
	<div class="row text-center">
		<h2>Nossas Promoções</h2>
		<hr>
	</div>


	<div class="row thumbnails owl-carousel owl-theme">
		<div class="promo">
			<div class="promos-item">
				<img src="img/bacon-duplor.jpg" alt="Promocao">
				<h3>Peça já o seu!<small>Promoção Válida de Segunda a Quarta</small></h3>
			</div>
		</div>

		<div class="promo">
			<div class="promos-item">
				<img src="img/bacon-duplor.jpg" alt="Promocao">
				<h3>Peça já o seu!<small>Promoção Válida de Segunda a Quarta</small></h3>
			</div>
		</div>

		<div class="promo">
			<div class="promos-item">
				<img src="img/bacon-duplor.jpg" alt="Promocao">
				<h3>Peça já o seu!<small>Promoção Válida de Segunda a Quarta</small></h3>
			</div>
		</div>

		<div class="promo">
			<div class="promos-item">
				<img src="img/bacon-duplor.jpg" alt="Promocao">
				<h3>Peça já o seu!<small>Promoção Válida de Segunda a Quarta</small></h3>
			</div>
		</div>

		<div class="promo">
			<div class="promos-item">
				<img src="img/bacon-duplor.jpg" alt="Promocao">
				<h3>Peça já o seu!<small>Promoção Válida de Segunda a Quarta</small></h3>
			</div>
		</div>

		<div class="promo">
			<div class="promos-item">
				<img src="img/bacon-duplor.jpg" alt="Promocao">
				<h3>Peça já o seu!<small>Promoção Válida de Segunda a Quarta</small></h3>
			</div>
		</div>

		<div class="promo">
			<div class="promos-item">
				<img src="img/montanas-triplor.jpg" alt="Promocao">
				<h3>Peça já o seu!<small>Promoção Válida de Segunda a Quarta</small></h3>
			</div>
		</div>

		<div class="promo">
			<div class="promos-item">
				<img src="img/salada-duplor.jpg" alt="Promocao">
				<h3>Peça já o seu!<small>Promoção Válida de Segunda a Quarta</small></h3>
			</div>
		</div>

	</div>

</div>
		<div class="col-md-4 col-logo">
			<img src="img/montanas-hamburgueria.jpg">
		</div>

		<div class="col-md-8">
		 	
				 	<div class="col-md-6 col-endereco">
						 <h4>Endereço</h4>
						 <p>
							R. São Paulo n.2704
							14.600-000</br>
						    São Joaquim da Barra</br>
							Telefone: 3728-4889
						 </p>
					</div>
		 
		 		
		 	
				 	<div class="col-md-6 col-links">
						<h4>Links</h4>
						<ul class="list-unstyled">
							
							<li><a href="#"><i class= "fa fa-cutlery"></i> Cardápio</a> </li>
							<li><a href="#"><i class= "fa fa-facebook"></i> Facebook</a> </li>
							<li><a href="#"><i class= "fa fa-envelope-o"></i> Fale Conosco  </a> </li>
							<li><a href="#"><i class= "fa fa-angle-down"></i> Sobre Nós  </a> </li>

						</ul>
					</div>
					
		</div>
    </div>
</div>	

CSS:

@font-face{
font-family:‘Rochester-Regular’;
src: url("…/fonts/Rochester-Regular.tff");
font-size: 1em;
}

header {
background-color:#ff6633;
width: 100%;
height: 176px;
position: absolute;

}

header .container{
position:relative;

}

header .container ul{
margin-left: 296px;
}

header .container li a{
color:#FFFFFF;
text-decoration: none;
text-transform: uppercase;
}

header #logotipo{
position: absolute;
margin-left: 40px;
margin-top: -132px;

}

#menu li{
display: inline-block;
font-size: 16px;

}

#menu{
margin-top: 140px 0;
}

#menu li a{
padding: 10px 25px;

}

#menu ul{
margin-top: 48px;
}

#busca .input-group{
margin-left:1305px;
padding: 7px;

}
#busca{
margin-top: -76px;
}

#busca .input-group i{
font-size: 20px;
color:rgba(255, 255, 255, 1);
}

#banner {
background: url(“img/xtudohd.jpg”) no-repeat;
background-size: cover;
width: 100%;
height: 700px;
}

#hamburgueria h1{
font-family: ‘Rochester’, cursive;
font-size: 60px;
margin-left: 420px;
color: #FFF;
text-shadow: 1px 2px 2px;
transition: 1s;
}

#hamburgueria h1.efeito{
color:red;
font-size: 5em;
}

#promocao h3{
color:#e74c3c;
margin-left:24px;

}

#promocao .thumbnails .promos-item{

}

#promocao .thumbnails .promos-item img{
width: 200px;
}

#promocao .thumbnails{
margin-left: 112px;
}
#promocao hr{
border: 1px solid #f1c40f;
}

#promocao h3 small{
display: block;
font-size: 10px;
color: #2ecc71;
margin-left: -18px;
margin-top: 6px;
font-weight: bold;

}

footer .row-gold{

background-color:#ff6633;

}

footer .col-endereco p{
margin-top: 5px;
margin-bottom: 5px;
text-transform: uppercase;

}
footer .col-logo img {
margin-top: 8px;
margin-bottom: 8px;
}

footer .col-md-8 p{
color:#FFFFFF;

}

footer .col-md-8 ul{
margin-top: 0;
}

footer .col-md-8 li a{
text-decoration: none;
color:#FFFFFF;
text-transform: uppercase;

}

Obrigado a quem puder ajudar!!!


#2

Provavelmente pq vc não está chamando o CSS na página.

Nestas situações a imagem é TOTALMENTE desnecessária, todo mundo já entendeu com a explicação!

Já o código seria muito útil para uma resposta com certeza.


#3

Sem o código fica dificil, posta ai que a gente ajuda


#4

Aí está o código pessoal. Se puderem me ajudar…


#5

Eu acho que o problema esta no position absolute do header, muda ele para relative, se não der certo, a dica de baixo dará.
Depois do footer nunca vem nada, você pode fazer o seguinte no footer: position:absolute; bottom: 0px;


#6

Po cara vc ta de zuera né… só pode!

Posta o código dessa forma ai, não tem o mínimo de dedicação de ao postar ver a pré-visualização e acertar o código antes de postar, e ainda quer ajuda dos outros!

Ngm aqui é tua mãe ou teus professor pra tq fica consertando tuas merda! Aqui é um grupo pra ajuda mútua, e o mínimo é fazer uma postagem organizada!

Pra mim ta explicado pq não consegue configurar um CSS, se não tem o mínimo de atenção e dedicação a um post buscando AJUDA, quem dirá um mínimo de dedicação pra ler uma documentação!


#7

Cara, você não me conhece, não sabe da minha vida. Foi a primeira vez que postei no grupo, não sei mexer muito bem ainda. Mas de pessoas mal-educadas como você, dispenso ajuda. Fique com seus conhecimentos avançados. Imagino o quão organizado você é. Imagino pela educação que tem.


#8

Era isso mesmo Talon, tinha conseguido ontem mesmo… Obrigado pela ajuda camarada.


#9

po mano, na próxima vê se responde a galera com educação!

diferente de VOCÊ, ninguém nasce sabendo não! Puta cara escroto!

Como vc mesmo disse… esse é um fórum de ajuda mútua, se não for pra ajudar, nem perca seu precioso tempo falando merda!

Otário!


#10

que bom que conseguiu resolver. abs.


#11

Abraços camarada, e obrigado pela atenção e ajuda.


#12

Haha, eu tinha pensado que era o position antes de ver o css, mas eu pedi para postar só para garantir.
Se esta tudo certo, coloca [RESOLVIDO] no nome do tópico.

Abraço


#13

vou colocar como resolvido.
Obrigado Talon, pela ajuda e dicas.
Abraço