Site ultrapassando o limite da página

[rodrigofariat 0]

Pessoal,

 

Montei um layout usando duas colunas (esquerda e direita), um topo, um rodapé e tela principal onde as páginas irão aparecer.

Porém abaixo do rodapé há um espaço em branco muito grande. Tentei fazer várias modificações, mas nada de resolver, sou iniciante em CSS, Criei várias DIVS que estão no código abaixo.

 

body {
	  color:#333;        /*texto na cor preta, por padrão*/
	  margin: 0;         /* Define uma margem em volta do box*/
	  font: 12px/1.4 Verdana, Arial, Helvetica, sans-serif; /* Define fonte*/
	  text-align: center;
     }					
	 			
#tudo {
	    
	    width: 100%; 
	    height:611px;
	    margin:0 auto;
	    text-align:left;   /* Alinha texto para a esquerda*/
	    position:absolute;
	    top:250px; 
	    left:450px;
}
		
#topo {
	  width:1020px;       
          height:102px;      
	  background:#ccc 0 url('../fotos/banner10.jpg') no-repeat; 
	  position:relative; 
	  top:-247px;
	  left:-220px;
	  text-align:center;
      }
			 
#topo h1  { 
           position:absolute; 
	   left:250px; 
           top:25px; 
           font-size:28px;
           margin:0;
	  }	
			  
#principal {
	 	width:1020px;       
 	        height:640px;
		position:relative;
		margin:0;
	  	top:-255px;
		left:-220px;
		overflow:hidden;
		border:3px;
		/*background:#ccc 0 url('imagens/') no-repeat;*/
	  }
			 
#topo h1  { 
           position:absolute; 
	   left:250px; 
           top:25px; 
           font-size:28px;
	   text-align:center;
	   font-weight:bold;
	   color:blue;
           margin:0;
          }	
			  
			  
#rodape {
 	   width:1475px;       
           height:120px;
	   background:#ccc 0 url('imagens/') no-repeat;
 	   position:relative;
	   left:-450px;
 	   top:-1760px;
	   /*top:-1760px;*/
	   text-align:center;
	  }
			 
#coluna_direita {	    
		width:200px;         
		_width:200px;        
		padding:5px;
		margin:0;
		border:3px;
		top:-1008px;
		position:relative;
		right:-815px;
		height:744px;
		background:#ccc 0 url('imagens/') no-repeat;
		}
				 
#coluna_esquerda {
			width:200px;         
			_width:200px;        
			padding:5px;
			margin:0;
			border:3px;
			top:-1759px;
			position:relative;
			left:-448px;
			height:742px;
			background:#ccc 0 url('imagens/') no-repeat;
		}	
			
#conteudo_mostrar {
			width:1020px;
			height:645px;
			overflow:auto;
			
         	  }
			
#homepage {
		color:blue;
		text-align:center;
		/*font:Courier;*/
		font-size:24px;
     	  }
				
body {padding:1em}
	
#menu {
	width:500px;
	margin:1em auto;
	}
	body {font:86%/1.4 Verdana,sans-serif;}
	/* Disable properties specified in the imported CSS file */
	.menu a {
		border:none;
		font-weight:bold;
	}

/* Actual menu CSS starts here */
	.menu,
	.menu ul {
		margin:0;
		padding:0;
		list-style:none;
	}
	.menu {width:200px;}
	.menu li {
		display:block;
		margin:0;
		padding:0;
		margin-bottom:1px;
	}
	.menu a {
		display:block;
		padding:2px 5px;
		color:black;
		background:#b0c23d;
		text-decoration:none;
	}
	.menu a:hover,
	.menu a:focus,
	.menu a:active {background:#d9dcb0;}
	.menu ul li {padding-left:15px;}
	.menu ul a {background:#ced174;}
	.hidden {display:none;}
			

Alguma sugestão ?

 

Att,

 

Rodrigo Faria

[William Bruno 1501]

primeira coisa a se fazer:

-> eliminar todos os positions do teu código.

 

pelo que vi, você está usando sem saber o motivo... e sem necessidade.

faça isso, e reajuste o teu site com as outras propriedades.. margin, padding...