Ir para conteúdo

POWERED BY:

Arquivado

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

edison.silva

Rodapé não acompnaha conteudo das páginas

Por , em Desenvolvimento frontend

Recommended Posts

edison.silva    0

edison.silva
Postado

Ola pessoal, estou com o seguinte problema:

o meu rodapé não esta acompanhando o conteúdo quando troco de páginas, sempre que clico nos menus, os rodapé não fica de acordo com o conteúdo.

Gostaria que o rodapé acompanhasse os conteúdos das paginas independente da quantidade de informação sem que eu precise mexer nele para ficar certinho.

Exemplo: tenho a pagina 1 onde tem mais conteúdos, tenho pagina dois onde tenho menos conteúdos e assim sucessivamente, neste caso ele sempre fica "lá embaixo" sobrando ficando um espaço branco enorme na pagina, segue o código que fiz:

 

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/estilo.css"> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Teste de CSS</title>
</head>
<body>
<div id="tudo">
  <div id="conteudo">
    <div id="topo">
    	<div id="imagemTopo">
    		<img src="img/teste.png">
            <div class="texto-topo">Teste</div>
            	<div class="regional">Teste</div>
                <div class="site-Oficial">Site Oficial</div>
    	</div><!-- Fim da div imagemTopo -->
    </div><!-- Fim da div topo -->
   
      <div id="principal">
		 <div id="menu-esticado"> 
      		<div id="menu">
        <?php 
		include("menu/menu.php");
		?>
      	</div> <!-- Fim da div#menu -->
        </div> <!-- Fim da div#menu -->
      </div><!-- Fim da div#menu-esticado -->
       <?php			 	  
		 if (isset($_GET['link'])) {
		// Pega o valor da variável $_GET['pagina']
		$pagina = $_GET['link'];
		
		} else {
		// Se não existir variável, define um valor padrão
		$pagina = 'paginas/home.php';
		}    
		
		switch($_GET["link"]){								 
		 case 'home';
		 include "paginas/home.php";
		 break;
		 
		 case 'pagina1':
		 include "paginas/pagina1.php";
		 break;			 
		 
		 case "pagina2":
		 include "paginas/pagina2.php";
		 break;
		 
		 case "pagina3":
		 include "paginas/pagina3.php";
		 break;
		 
		 case "pagina4":
		 include "paginas/pagina4.php";
		 break;
		 
		 default:
		 include "paginas/home.php";
		}
		?>
    <div class="clear"></div>
    </div> 
    <div id="rodape">
        <h1>TESTE DO RODAPÉ</h1>
    </div>
    
  </div>
</div>
</body>
</html>

CSS:

* {
	padding: 0;
	margin: 0;
	border: 0;
}
html, body {
	width: 100%;
	height:auto;
	
} 
body {
	background:#E2EEFF;
	color:#666;
	font:13px Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
}
#tudo { 
	width:980px;
	margin:0 auto;
	text-align:left;
	position:relative;
	min-height:100%;/**/
	background:#fff;	
	border-width:0 0px;
	box-shadow: 2px -10px 3px #B9D5FF;	
	-moz-border-radius: 1px;
   -webkit-border-radius: 1px; 

}
#conteudo {
	padding-bottom:900px;
	
}
#topo {	
	background-color:#1662D6;
	background-image:url(../img/cabecalho.gif);
	background-repeat:repeat-x;	
	width:980px;
	height:100px;
	padding-top:1px;
	position:relative;
	clear:both;
	margin:0 auto
	
}
#imagemTopo{
	margin-left:20px;
	margin-top:6px;
		
}
.texto-topo{
	font-size:24px;
	font-style:italic;
	margin-left:100px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	margin-top:-80px;
	color: #FFF;
	
}
.site-Oficial{
	font-size:12px;
	float:right;
	font-style:italic;
	color:#FFF;
	margin-right:20px;
	margin-top:15px;
	
}principal {
	margin:0 auto;
	width:980px;
	height:auto;
	padding-top:0px;
	min-height:100%;
	position:relative;

}

#rodape {
	position:relative;
	bottom: 0;
	height:70px;
	width:980px;	
	background:#4682B4;	
	
}
#menu{
	margin-top:0px;
	
}
#menu-esticado{
	background: #4682B4;
	width: 820px;
	height:33px;
	padding-right:50px;
	padding-left:110px;
	margin-top:0px;
	
}
ul#menu li{
	display: inline;
	margin-right: 5px;
	list-style-type: none;
	float:left;
	left:50%;
	height:50%;

}
ul#menu li a{
	float: left;
	background-color:#4682B4;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	padding: 8px 8px 8px 8px;/*Ajusta o tamanho do fundo para o estado over*/
	margin-right: 15px;/*aumenta espaçamento entre links*/
	color: #FFF;
	display:inline;

}
ul#menu li a:hover{
	background-color:#86B7FF;
	color:#006;	
	
}

h1, h2, h3, h4 { 	
	font:bold, Helvetica, sans-serif;
	color: #000066;
	
}clean{
	clear:both;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

le0souza    0

le0souza
Postado

 

...

<body">
<div id="tudo">
<div id="topo"></div>
<div id="conteudo">
<div id="principal">
...conteúdos da coluna principal...
</div> <
<div id="auxiliar">
...conteúdos da coluna auxiliar...
</div> <
<div id="clear"></div>
</div> <!-- Fim div#conteudo -->
<div id="rodape"></div>
</div> <!-- Fim div#tudo -->
</body>
</html>

 

 

 

html, body {

height: 100%;
}
#tudo {
min-height: 100%;
...
}
* html #tudo {
height: 100%; /* hack para IE6 que trata height como min-height */
}
#tudo {
position: relative;
...
}
#rodape {
position: absolute;
bottom: 0;
}
#conteudo {
padding-bottom: 30px;
}

 

Voce esta pecando nos height: 100%; min-height essas coisas, daum olhadinha ai espero ter ajuda. flws

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