Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

emilyoly

Rodape

Por , em Desenvolvimento frontend

Recommended Posts

emilyoly    1

emilyoly
Postado

Boa tarde tudo bem?

Esse e o primeiro post neste forum , espero que esteja de acordo com as regras rs'

 

Então , eu estou com um grande problema, nao consigo de jeito nenhum deixar meu rodapé no final da pagina, a nao ser com o position:fixed , oq eu nao quero.

Por favor se puderem me ajudar .

 

 

Aqui a index:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DanieleBe</title> 
	<link rel="stylesheet" type="text/css" href="style.css" />
	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	
</head>
<body>
	<diav id="container">
		<div id="topo">
			<div id="menu">
			    <ul>
				    <li><a href="#">Home</a></li>
				    <li><a href="#">Sobre</a></li>
				    <li><a href="#">Portifolio</a></li>
				    <li><a href="#">Blog</a></li>
				    <li><a href="#">Contato</a></li>
				</ul>

				<div id="social">
				</div>
				<!--Redes sociais-->
			</div>
			<!--Menu-->

			<div id="logo">
			<div id="img-logo"><img src="images/logodani.png" class="img-responsive"></div>
			</div>
			<!--Logo-->
			<div id="linha"></div>
			<!--Linha de sepração-->
		</div>
		<!--Topo-->

		<div id="conteudo">
			<div id="destaque">
				<img src="images/67_1.jpg" class="img-responsive">
			</div>
			<!--Destaque-->

			<div id="doblog">
				<h1>Do Blog</h1>
				<p>Saiba mais sobre os últimos acontecimentos em torno aqui.</p>
				<div id="recentes">
					<div id="post">
					    <div class="img-post"><img src="images/post-recent.jpg" height="50" width="50" alt=""></div>
						<div id="postrecente">
							<div class="titulo">Titulo do post</div>
							<div class="autor">Autor: Daniele</div>
							<div class="descricao">Coloque aqui um resumo sobre seu post, que seja bem objetivo, ou gere um automaticamente com o primeiro
		 paragrafo do post. Coloque aqui um resumo sobre seu post, que seja bem objetivo, ou gere um automatica-
		mente com o primeiro paragrafo do post.</div>
						</div>
					</div>

					<div id="post">
					    <div class="img-post"><img src="images/post-recent.jpg" height="50" width="50" alt=""></div>
						<div id="postrecente">
							<div class="titulo">Titulo do post</div>
							<div class="autor">Autor: Daniele</div>
							<div class="descricao">Coloque aqui um resumo sobre seu post, que seja bem objetivo, ou gere um automaticamente com o primeiro
		 paragrafo do post. Coloque aqui um resumo sobre seu post, que seja bem objetivo, ou gere um automatica-
		mente com o primeiro paragrafo do post.</div>
						</div>
					</div>

					<div id="post">
					    <div class="img-post"><img src="images/post-recent.jpg" height="50" width="50" alt=""></div>
						<div id="postrecente">
							<div class="titulo">Titulo do post</div>
							<div class="autor">Autor: Daniele</div>
							<div class="descricao">Coloque aqui um resumo sobre seu post, que seja bem objetivo, ou gere um automaticamente com o primeiro
		 paragrafo do post. Coloque aqui um resumo sobre seu post, que seja bem objetivo, ou gere um automatica-
		mente com o primeiro paragrafo do post.</div>
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<!--Post Recentes-->
			</div>
			<!--Do blog-->

		</div>
		<!--Conteudo-->

		<div class="footer" >
		</div>
		<!--Rodape-->
</div>
<!--Pai de todos-->

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

E aqui o CSS:


/* Zerando margens do navegador */
*{margin: 0; padding: 0; list-style: none;}


html, body{
	height: 100%;
}

/* Pai de todos */
#container {
	position: relative;
	margin: auto;
	width: 100%;
	background: yellow;
}


/* Topo */
#topo {
 	height: 100px;
 	width: 100%;
 	position: absolute;
 	margin: 0 auto;
}

/* Menu */
#menu{
	width: 100%;
	height: 33px;
	background: black;
	text-align: center;
}

#menu ul {
	width: 100%;
	float: left;
}

#menu ul li {
	display: inline;
	text-align: center;

}

#menu ul li a {
	color: #fff;
	line-height: 33px; /* Posiciona o texto no centro */
	text-align: center;
	text-decoration: none;
	margin-right: 10px;
	
}

/* Redes Sociais */
#socia{

}

/* Logo */
#logo {
	position: absolute;
	width: 100%;
	top: 3.4em;
	text-align: center;
}

#img-logo{
	position: relative;
	max-width: 600px;
	margin: 0 auto;
}

/* Linha que separa o topo do conteudo tem que arrumar o magin top*/
#linha {
	display:block;
    margin:12em 5%;
    height:1px;
    width: 90%;
	text-align: center;
    background-color:black;
    box-shadow: #000 0 1px 5px;
    -webkit-box-shadow: #000 0 1px 5px;
    -moz-box-shadow: #000 0 1px 5px;
}

/* Conteudo */
#conteudo{
	float: left;
	margin-top:16em;
	margin-left: 5%;
	width: 90%;
	padding-bottom: 30px;
}

/* Destaque da pagina inicial */
#destaque{
	width: 100%;
	max-height: 700px;
	background: black;
	text-align: center;
	overflow: hidden;
}

/* Ultimos Posts */
#doblog{
	width: 100%;
}
#doblog h1{
	text-align: center;
}
#doblog p {
	text-align: center
}

#post {
	margin: 0 30%;
}

#postrecente{
	margin-left: 10%;
	padding: 0;
	width: 90%;
}

.img-post {
	width: 50px;
	height: 50px;
	background: black;
	float:left;
	text-align: center;
	border: 1px;
	color: black;
}

.titulo {
}

.autor{
}

.descricao {
}


 /*Rodape */
.footer{
    position: absolute;
	margin: auto;
    bottom:0;
    width:100%;
    height:60px;    
    background:blue;
    clear: both;
}

Desde ja agradeço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

guilomaker    31

guilomaker
Postado

amigo você esta usando position onde não precisa, e outras coisas erradas!

 

eu dei uma simples modificada, mais como falta imagens pra mim ver se a estrutura esta correta segue ai o html e o css. lembrando que só arrumei alguns problemas, mais seu código ainda tem muito o que melhorar.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DanieleBe</title> 
	<link rel="stylesheet" type="text/css" href="style.css" />
	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	
</head>
<body>
	<diav id="container">
		<div id="topo">
			<div id="menu">
			    <ul>
				    <li><a href="#">Home</a></li>
				    <li><a href="#">Sobre</a></li>
				    <li><a href="#">Portifolio</a></li>
				    <li><a href="#">Blog</a></li>
				    <li><a href="#">Contato</a></li>
				</ul>

				<div id="social">
				</div>
				<!--Redes sociais-->
			</div>
			<!--Menu-->

			<div id="logo">
			<div id="img-logo"><img src="images/logodani.png" class="img-responsive"></div>
			</div>
			<!--Logo-->
			<div id="linha"></div>
			<!--Linha de sepração-->
		</div>
		<!--Topo-->

		<div id="conteudo">
			<div id="destaque">
				<img src="images/67_1.jpg" class="img-responsive">
			</div>
			<!--Destaque-->

			<div id="doblog">
				<h1>Do Blog</h1>
				<p>Saiba mais sobre os últimos acontecimentos em torno aqui.</p>
				<div id="recentes">
					<div id="post">
					    <div class="img-post"><img src="images/post-recent.jpg" height="50" width="50" alt=""></div>
						<div id="postrecente">
							<div class="titulo">Titulo do post</div>
							<div class="autor">Autor: Daniele</div>
							<div class="descricao">Coloque aqui um resumo sobre seu post, que seja bem objetivo, ou gere um automaticamente com o primeiro
		 paragrafo do post. Coloque aqui um resumo sobre seu post, que seja bem objetivo, ou gere um automatica-
		mente com o primeiro paragrafo do post.</div>
						</div>
					</div>

					<div id="post">
					    <div class="img-post"><img src="images/post-recent.jpg" height="50" width="50" alt=""></div>
						<div id="postrecente">
							<div class="titulo">Titulo do post</div>
							<div class="autor">Autor: Daniele</div>
							<div class="descricao">Coloque aqui um resumo sobre seu post, que seja bem objetivo, ou gere um automaticamente com o primeiro
		 paragrafo do post. Coloque aqui um resumo sobre seu post, que seja bem objetivo, ou gere um automatica-
		mente com o primeiro paragrafo do post.</div>
						</div>
					</div>

					<div id="post">
					    <div class="img-post"><img src="images/post-recent.jpg" height="50" width="50" alt=""></div>
						<div id="postrecente">
							<div class="titulo">Titulo do post</div>
							<div class="autor">Autor: Daniele</div>
							<div class="descricao">Coloque aqui um resumo sobre seu post, que seja bem objetivo, ou gere um automaticamente com o primeiro
		 paragrafo do post. Coloque aqui um resumo sobre seu post, que seja bem objetivo, ou gere um automatica-
		mente com o primeiro paragrafo do post.</div>
						</div>
					</div>
				</div>
				<!--Post Recentes-->
			</div>
			<!--Do blog-->

		</div>
		<!--Conteudo-->


		<div class="footer" >
		</div>
		<!--Rodape-->
</div>
<!--Pai de todos-->

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

/* Zerando margens do navegador */
*{margin: 0; padding: 0; list-style: none;}


html, body{
	height: 100%;
}

/* Pai de todos */
#container {
	margin: auto;
	width: 100%;
	height: 100%;
	background: yellow;
	display: table;
}


/* Topo */
#topo {
 	height: 100px;
 	width: 100%;
}

/* Menu */
#menu{
	width: 100%;
	height: 33px;
	background: black;
	text-align: center;
}

#menu ul {
	width: 100%;
	float: left;
}

#menu ul li {
	display: inline;
	text-align: center;

}

#menu ul li a {
	color: #fff;
	line-height: 33px; /* Posiciona o texto no centro */
	text-align: center;
	text-decoration: none;
	margin-right: 10px;
	
}

/* Redes Sociais */
#socia{

}

/* Logo */
#logo {
	position: absolute;
	width: 100%;
	top: 3.4em;
	text-align: center;
}

#img-logo{
	position: relative;
	max-width: 600px;
	margin: 0 auto;
}

/* Linha que separa o topo do conteudo tem que arrumar o magin top*/
#linha {
	display:block;
    margin:12em 5%;
    height:1px;
    width: 90%;
	text-align: center;
    background-color:black;
    box-shadow: #000 0 1px 5px;
    -webkit-box-shadow: #000 0 1px 5px;
    -moz-box-shadow: #000 0 1px 5px;
}

/* Conteudo */
#conteudo{
	margin-top:16em;
	margin-left: 5%;
	width: 90%;
	padding-bottom: 30px;
	margin: auto;
}

/* Destaque da pagina inicial */
#destaque{
	width: 100%;
	max-height: 700px;
	background: black;
	text-align: center;
	overflow: hidden;
}

/* Ultimos Posts */
#doblog{
	width: 100%;
}
#doblog h1{
	text-align: center;
}
#doblog p {
	text-align: center
}

#post {
	margin: 0 30%;
}

#postrecente{
	margin-left: 10%;
	padding: 0;
	width: 90%;
}

.img-post {
	width: 50px;
	height: 50px;
	background: black;
	float:left;
	text-align: center;
	border: 1px;
	color: black;
}
.clearfix {
	clear: both;
}
.titulo {
}

.autor{
}

.descricao {
}


 /*Rodape */
.footer{
    position: absolute;
    bottom:0;
    width:100%;
    height:60px;    
    background:blue;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

emilyoly    1

emilyoly
Postado

 

amigo você esta usando position onde não precisa, e outras coisas erradas!

 

eu dei uma simples modificada, mais como falta imagens pra mim ver se a estrutura esta correta segue ai o html e o css. lembrando que só arrumei alguns problemas, mais seu código ainda tem muito o que melhorar.

 

Esse é meu primeiro site rs' to aprendendo ainda.

Então nao deu certo o rodape ainda nao vai la pra baixo

 

Aqui estao as imagens:

Compartilhar este post

Link para o post
Compartilhar em outros sites

guilomaker    31

guilomaker
Postado

 

 

Esse é meu primeiro site rs' to aprendendo ainda.

Então nao deu certo o rodape ainda nao vai la pra baixo

 

Aqui estao as imagens:

 

 

já que esta aprendendo faça assim!

da uma revisada no seu código, não use ID em tudo use só classes use ID só pra topo, rodape.

 

ali você ta misturando coisas do bootstrap eu não entendi porque, mais em fim, de uma revisada eu ate te indico recomeçar do 0 usando a semântica correta. da uma pesquisada em semântica do html 5 e as propriedades position.

 

porque pra mim te ajudar ai eu teria que fazer do 0, então já que esta aprendendo faça isso que eu falei, ai qual quer duvida você volta aqui.

Compartilhar este post

Link para o post
Compartilhar em outros sites

emilyoly    1

emilyoly
Postado

Mas eu queria entender pq o rodape nao desce , pq ja refiz o código coloquei classes onde nao era necessário o id.

 

<container>

<header>

</header>

 

<conteudo>

</conteudo>

 

<footer>

</footer>

</container>

 

 

Essa é a estrutura que estou usando, pq dps vou dividir, pq é pra ser um tema de wordpress.

 

O rodape ele fica do tamanho do navegador, mas quero q ele se ajuste conforme o conteúdo.

O bootstrap e para as imagens responsivas e talz.

Compartilhar este post

Link para o post
Compartilhar em outros sites

guilomaker    31

guilomaker
Postado

Mas eu queria entender pq o rodape nao desce , pq ja refiz o código coloquei classes onde nao era necessário o id.

 

<container>

<header>

</header>

 

<conteudo>

</conteudo>

 

<footer>

</footer>

</container>

 

 

Essa é a estrutura que estou usando, pq dps vou dividir, pq é pra ser um tema de wordpress.

 

O rodape ele fica do tamanho do navegador, mas quero q ele se ajuste conforme o conteúdo.

O bootstrap e para as imagens responsivas e talz.

 

Mas eu queria entender pq o rodape nao desce , pq ja refiz o código coloquei classes onde nao era necessário o id.

 

<container>

<header>

</header>

 

<conteudo>

</conteudo>

 

<footer>

</footer>

</container>

 

 

Essa é a estrutura que estou usando, pq dps vou dividir, pq é pra ser um tema de wordpress.

 

O rodape ele fica do tamanho do navegador, mas quero q ele se ajuste conforme o conteúdo.

O bootstrap e para as imagens responsivas e talz.

 

você tem que dar um passo de cada vez! o bootstrap não se usa dessa forma, e a imagem responsiva e só fazer no seu próprio css,

 

porque não da pra arrumar uma unica coisa quando o resto esta com problemas, porque uma coisa leva a outra.

 

vou refazer esse codigo seu e daqui a pouco eu posto aqui, mais você pega ele e da uma boas estudada nas diferenças.

Compartilhar este post

Link para o post
Compartilhar em outros sites

guilomaker    31

guilomaker
Postado

Tudo bem, muito obrigado pelas dicas , vou estudar ele pode deixar.

 

olha ai! só organizei e mudei algumas coisas, removi o desnecessário e coloquei uma cor de background e tambem no conteúdo só pra você se localizar.

 

http://guilhermesena.com.br/danielebe/

 

se você reparar eu não utilizei position em nem um lugar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

guilomaker    31

guilomaker
Postado

Muito obrigado de verdade. vou dar uma estuda nele

 

da uma estudada sobre design responsivo tambem! pois você esta usando "em" em lugares errados e % tambem. e igual falei, um passo de cada vez blz? não deixe de estudar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

emilyoly    1

emilyoly
Postado

CONSEGUii <333

 

Obrigado, coloquei uma class errada e um div na posição errada por isso nao estava indo.

 

Muito obrigado de verdade pela ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

guilomaker    31

guilomaker
Postado

CONSEGUii <333

 

Obrigado, coloquei uma class errada e um div na posição errada por isso nao estava indo.

 

Muito obrigado de verdade pela ajuda.

 

fico feliz que tenha conseguido! qual quer coisa estamos ai.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito