Problema, espacio blanco después del footer

dperez11 · #1 (**permalink**) 24/07/2012, 03:15

Buenas,
resulta que estoy trabajando en una web básica HTML y empezé sobre una plantilla. en la plantilla todo esta correcto pero una vez la modifico me salta un espacio blanco después del pie, pero eso si, no en todas las páginas solo en algunas, en las que
tienen menos contenido. Y he revisado el código de las dos paginas, la buena y la mala y esta todo exacto, simplemente hay algun div de mas en la buena pero por temas de imagenes o cosas así.
No tendría el footer que pegarse abajo de todo pasara lo que pasará? No he tocado nada de la plantilla solo he substituido. Os dejo una imagen para que podáis verlo mejor:

http://www.flickr.com/photos/82776716@N07/7635827804/

Agradecería mucho vuestra ayuda, y si necesitais el código o alguna parte de el. Solo pedirlo :)

TEPO · #2 (**permalink**) 24/07/2012, 05:59

Hola, es un problema de css, no de html, eso creo, manda los codigos o subi la pagina para fijarse bien.

dperez11 · #3 (**permalink**) 25/07/2012, 01:25

Bueno pues entonces te dejo el código de la página principal y te dejo el link de la página también.

Código:

 <!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" xml:lang="EN" lang="EN" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<title>HIPERTEC S.C.P</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
<style type="text/css">
<!--
.Estilo1 {
	font-family: Dodger;
	font-size: 36px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.Estilo2 {color: #FFFFFF}
.Estilo8 {
	color: #000000;
	font-size: 28px;
	font-style: italic;
}
-->
</style>
</head>
<body id="top">
<div class="wrapper col1" style="background-image:url(images/fondocabezera.jpg)">
  <div id="head"> 
    &nbsp;<a href="index.html" class="Estilo1 Estilo2"></a>
    <p>&nbsp;</p>
	
    <p><img src="images/hipertecsubtitulo.png" width="379" height="37" /></p>
      <div id="topnav">
        <ul>
          <li>            <a href="index.html" class="dark">Inicio</a>
		  <ul>
		  <li><a href="quienessomos.html">Quienes somos</a></li>
          <li><a href="sat.html">Servicio de asistencia técnica</a></li>
		  </ul>
		  </li>
          <li><a href="telecomunicaciones.html">Telecomunicaciones </a></li>
          <li><a href="ideycon.html">Identificación y control </a></li>
          <li><a href="#">Audiovisuales </a>
            <ul>
              <li><a href="sonido.html">Sonido</a></li>
              <li><a href="imagen.html">Imagen</a></li>
              
            </ul>
          </li>
          <li class="last"><a href="contacta.html">Contactenos</a></li>
        </ul>
    </div>
      
      <img src="images/hipertectitulo.png" alt="titulo" width="270" height="40" />
	  
	  </div>

</div>





  <div id="container">
    <div id="gallery">
  
    <ul>
      <li class="placeholder" style="background-image:url(images/hipertec.png);">Logo</li>
      <li><a class="swap" style="background-image:url(images/290taller.png);" href="#gallery"><strong>Taller exterior</strong><span><img src="images/taller.png" alt="" /></span></a></li>
      <li><a class="swap" style="background-image:url(images/290furgo.png);" href="#gallery"><strong>Vehículo de empresa</strong><span><img src="images/furgo.png" alt="" /></span></a></li>
      <li class="last"><a class="swap" style="background-image:url(images/290mapa.png);" href="#gallery"><strong>Ubicación</strong><span><img src="images/mapa.png" alt="" /></span></a></li>
    </ul>
	
    <div class="clear"></div>
  </div>
    </div>
	
	
	
	
    <div class="wrapper col5">

  <div id="footer">
  
    <div id="contactform">
      
      <p>Carrer Llibertat, 59 (Bajos)</p>
      <p>LLEIDA - 25005  </p>
    </div>
    <!-- End Contact Form -->
    <div id="compdetails">
      <div id="officialdetails">
        <ul>
          <li>Tlf - 973 238 677 </li>
          <li>Fax: xxxxx xxxxxxxxxx</li>
          
        </ul>
        
      </div>
      <div id="contactdetails">
        <ul>
          <li>HIPERTEC S.C.P</li>
          <li>[email protected]</li>
        </ul>
      </div>
      <div class="clear"></div>
    </div>
    <!-- End Company Details -->
    <div id="copyright">
      <p>&nbsp;</p>
      <p><br class="clear" />
        </p>
    </div>
    <div class="clear"></div>
  </div>
</div>



</body>
</html>

Página:
www.hipertec.es

TEPO · #4 (**permalink**) 25/07/2012, 06:23

Hola, bueno, me mandaste el html y no el css, en principio hay michisimos errores de concepto en cuato a la maquetacion, yo no pude ver mucho, te voy a decir lo que me parece y despues a investigar y estudiar css -

http://www.cssya.com.ar

Para mi tu problema es que no utilizas un contenedor para tu pagina, toda tu pagina, cabecera, contenido y footer, deberia estar encerrado en otro div que haga de contenedor, sobre todo porque los contenidos son pocos y en monitores con resoluciones altas siempre te va a ver el espacio y tu fondo aparece en el body y el body es todo por eso se ve el espacio que vos decis, que es logico, te tiro un codigo investigalo y fijate si podes remaquetar y resolver tu problema, yo sacaria el fondo del body y lo colocaria en un contenedor, centraria mi diseño en la pagina.

Codigo:

Código:

<html>
    <head>
        <title>Prueba dise&ntilde;o dos Columnas</title>
        <style type="text/css">
            #wrapper{
                margin:50px auto;
                border:5px solid green;    
            }
            #branding{
                border:1px solid blue;
                background:blue;
            }
            #content{
                width:520px;
                float:right;
                border:1px solid red;
            }
            
            #mainNav{
                width:180px;
                float:left;
                border:1px solid red;
            }
            
            #footer{
                clear:both;
                border:1px solid blue;
                background:blue;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="branding">
                <p>CABECERA</p>
            </div>
            <div id="content">
                <p>DERECHA</p>
            </div>
            <div id="mainNav">
                <p>IZQUIERDA</p>
            </div>
            <div id="footer">
                <p>FOOTER</p>
            </div>
        </div>
    </body>
</html>

Saludos.

TEPO · #5 (**permalink**) 25/07/2012, 06:30

Hola, investiga esta pagina:

http://www.la-carpinteria.com.ar

fijate, si sabes usar firebug de firefox mejor, el fondo de madera esta colocado en el HTML, despues hay un contenedor y dentro de ese contenedor todos los contenidos, creo que es un ejemplo mas claro, que te puede dar una idea de como remaquetar tu página.
Saludos.

dperez11 · #6 (**permalink**) 26/07/2012, 02:14

Gracias TEPO, he intentado cerrar el body en el html pero no funciona.. porque seguro que hay que tocar algo en el css y nose el que :s
Te dejo aquí el código css y si tienes un momentito me lo miras porque nose que puede ser... pero he entendido lo que me querías decir de cerrar la cabezera, el contenido y el pie. Y lo hago, pero no funciona. Sigo con el mismo problema :s

Código:

body{
	margin:0;
	padding:0;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	color:#333333;
	background-image:url(../images/fondito.jpg);
	font-weight: normal;
	font-style: normal;
	line-height: 20px;
	}

img{border:0; padding:0; margin:0;}
.justify{text-align:justify;}
.bold{font-weight:bold;}
.center{text-align:center;}
.right{text-align:right;}
.nostart {list-style-type:none; margin:0; padding:0;}
.clear{clear:both;}
br.clear{clear:both; margin-top:-15px;}
a{outline:none; text-decoration:none;}

.fl_left{float:left;}
.fl_right{float:right;}

.imgl, .imgr{border:1px solid #FFFFFF; padding:5px; color:#FFFFFF; background-color:#FFFFFF;}
.imgl{float:left; margin:0 8px 8px 0; clear:left;}
.imgr{float:right; margin:0 0 8px 8px; clear:right;}

/* ----------------------------------------------Wrapper-------------------------------------*/

div.wrapper{
	display:block;
	width:100%;
	margin:0;
	text-align:left;
	}

.col1{color:#F7F7F7; background-color:#F7F7F7;}

/* --Opciones de Galería --*/
.col2{color:#F7F7F7; background-color:#F7F7F7;}
.col2 a{color:#294E79; background-color:#F7F7F7;}

/* --Opciones de Contenido -- */
.col3, .col4{color:#666666; background-image:url(../images/fondito.jpg)}
.col5{color:#FFFFFF; background-color:#1C3451;}

/* ----------------------------------------------Generalise-------------------------------------*/

#head, #gallery, #breadcrumb, #container, #footer{
	position:relative;
	margin:0 auto 0;
	display:block;
	width:992px;
	}

/* ----------------------------------------------Head-------------------------------------*/

#head{
	height:110px;
	z-index:1000;
	background-image:url(../images/fondocabezera.jpg)
	}

#head h1, #head p, #head ul, #head a{
	margin:0;
	padding:0;
	list-style:none;
	line-height:normal;
	}

#head h1 a{
	position:absolute;
	top:21px;
	left:2px;
	font-size:38px;
	font-weight:normal;
	color:#F7F7F7;
	background-color:#294E78;
	font-family:Georgia, "Times New Roman", Times, serif;
	}

#head p{
	display:block;
	position:absolute;
	top:36px;
	left:4px;
	color:#00FFFF;
	font-size:16px;
	font-family:"Century Gothic", Calibri;
	width: 299px;
	height: 25px;
	font-style: normal;
	font-weight: bold;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	}

/* ----------------------------------------------Breadcrumb Navigation-------------------------------------*/

#breadcrumb{padding:20px 0;}

#breadcrumb a{
	font-weight:bold;
	}

#breadcrumb ul{
	margin:0;
	padding:0;
	list-style:none;
	}

#breadcrumb ul li{display:inline;}
#breadcrumb ul li.first{font-weight:bold;}
#breadcrumb ul li.current a{text-decoration:underline;}

/* ----------------------------------------------Container-------------------------------------*/

#container{
	padding:40px 0;
	}

#container h1, #container h2, #container h3, #container h4, #container h5, #container h6{
	margin:0 0 15px 0;
	padding:0 0 15px 0;
	line-height:normal;
	font-weight:bold;
	font-size:24px;
	font-family:"Century Gothic", Calibri;
	border-bottom:1px dashed #666666;
	font-style: italic;
	text-decoration: underline;
	color: #000000;
	}

#container a{
	color:#294E79;
	background-color:#F7F7F7;
	}

/* ----------------------------------------------Content-------------------------------------*/

#content{
	display:block;
	float:left;
	width:630px;
	}

/* ------Comments-----*/

#comments{margin-bottom:40px;}

#comments .commentlist {margin:0; padding:0;}

#comments .commentlist ul{margin:0; padding:0; list-style:none;}

#comments .commentlist li.comment_odd, #comments .commentlist li.comment_even{margin:0 0 10px 0; padding:15px; list-style:none;}

#comments .commentlist li.comment_odd{color:#666666; background-color:#F7F7F7;}
#comments .commentlist li.comment_odd a{color:#294E79; background-color:#F7F7F7;}

#comments .commentlist li.comment_even{color:#666666; background-color:#E8E8E8;}
#comments .commentlist li.comment_even a{color:#294E79; background-color:#E8E8E8;}

#comments .commentlist .author .name{font-weight:bold;}
#comments .commentlist .submitdate{font-size:smaller;}

#comments .commentlist p{margin:10px 5px 10px 0; padding:0; font-weight: normal;text-transform: none;}

#comments .commentlist li .avatar{float:right; border:1px solid #EEEEEE; margin:0 0 0 10px;}

/* ----------------------------------------------Right Block-------------------------------------*/

#column{
	display:block;
	float:right;
	width:300px;
	}

#column .holder, #column #featured{
	display:block;
	width:300px;
	margin-bottom:40px;
	}

#column .holder p{
	line-height:1.6em;
	}

#column .holder h2.title{
	display:block;
	width:100%;
	height:65px;
	margin:0;
	padding:15px 0 8px 0;
	font-size:20px;
	font-weight:normal;
	color:#666666;
	background-color:#F7F7F7;
	line-height:normal;
	border-bottom:1px dashed #CCCCCC;
	}

#column .holder h2.title img{
	float:left;
	margin:-15px 8px 0 0;
	padding:5px;
	color:#666666;
	background-color:#F7F7F7;
	border:1px solid #CCCCCC;
	}

#column .holder p.readmore{
	display:block;
	width:100%;
	font-weight:bold;
	text-align:right;
	line-height:normal;
	}

#column div.imgholder{
	display:block;
	width:290px;
	margin:0 0 10px 0;
	padding:4px;
	color:#666666;
	background-color:#F7F7F7;
	border:1px solid #CCCCCC;
	}
	
/* Featured Block */

#column #featured a{
	color:#294E79;
	background-color:#F7F7F7;
	}

#column #featured ul, #column #featured h2, #column #featured p{
	margin:0;
	padding:0;
	list-style:none;
	background-color:F7F7F7;
	}

#column #featured li{
	display:block;
	width:250px;
	margin:0;
	padding:20px 25px;
	color:#2E271D;
	background-color:#F9F9F9;
	}

#column #featured li p{
	line-height:1.6em;
	background-color:F7F7F7;
	}

#column #featured li p.imgholder{
	display:block;
	width:240px;
	height:90px;
	margin:20px 0 15px 0;
	padding:4px;
	border:1px solid #CCCCCC;
	}

#column #featured li h2{
	margin:0;
	padding:0 0 14px 0;
	font-size:20px;
	font-weight:normal;
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#666666;
	background-color:#F9F9F9;
	line-height:normal;
	border-bottom:1px dashed #666666;
	}

#column #featured p.more{
	display:block;
	width:100%;
	margin-top:15px;
	font-weight:bold;
	text-align:right;
	line-height:normal;
	background-color:#F7F7F7;
	}

/* ----------------------------------------------Footer-------------------------------------*/

#footer{
	padding:20px 0;
	}

#footer a{
	color:#98B7DC;
	background-color:#1C3451;
	}

#footer h2{
	margin:0 0 15px 0;
	padding:0 0 8px 0;
	font-size:22px;
	font-weight:normal;
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#CCCCCC;
	background-color:#1C3451;
	line-height:normal;
	border-bottom:1px dashed #CCCCCC;
	}

#contactform{
	display:block;
	float:left;
	width:350px;
	}

/* ------Company Details------*/

#compdetails{
	display:block;
	float:right;
	width:500px;
	}

#compdetails ul{
	margin:0;
	padding:0;
	list-style:none;
	}

#compdetails li{
	margin:0 0 12px 0;
	}

#compdetails li.last{
	margin:0;
	}

#officialdetails{float:left}
#officialdetails li.last{margin-bottom:20px;}

#contactdetails{float:right}

/* ------Copyright------*/

#copyright{
	display:block;
	float:left;
	width:100%;
	margin:25px 0 0 0;
	padding:20px 0 0 0;
	font-size:12px;
	border-top:1px dashed #666666;
	}

#copyright p{
	margin:0;
	padding:0;
	}

Muchas gracias

TEPO · #7 (**permalink**) 26/07/2012, 06:18

Hola dPerez, a esta altura veo la pagina y no entiendo lo que queres lograr, vos queres que la linea azul del footer quede siempre en la parte de abajo de la pantalla? a ver contestame esto o mandame un print de pantalla de lo que estas viendo mal, porque esto va a suceder dependiendo de la resolucion de pantalla que utilices, yo lo estoy viendo en 1366x768 y se ve bien, mira:

No hay espacio en blanco debajo del footer.
Ahora si lo ves en resoluciones mas grandes, obviamente aparece el espacio, porque la pagina no tiene el alto suficiente y esta pegada al top de la pantalla, yo solo te tire la idea de rehacer el css y poner todo dentro de un contenedor para que esto quede un poco mejor, no estiendo ahora que es lo que queres evitar o hacer, estas buscando un diseño liquido? que segun la resolucion de pantalla tu pagina varie su tamaño? a ver, aclarame esto, de todas maneras igual te digo que cualquiera sean los dos casos, no hay un "error" de css, en todo caso el error fue como concebiste tu pagina desde la maquetación, es obvio que hay cosas basicas que estan mal hechas, pretendo ayudarte, no codificarte la pagina, asi que contestame que es lo que queres que pase con tu pagina.
Saludos.-

dperez11 · #8 (**permalink**) 26/07/2012, 09:51

No te preocupes, metere espacios en un div y asi quitaré el espacio blanco despues del footer, para que lo veas. Utiliza el firefox.

Gracias x todo.

TEPO · #9 (**permalink**) 26/07/2012, 09:59

Cita:

Iniciado por dperez11

No te preocupes, metere espacios en un div y asi quitaré el espacio blanco despues del footer, para que lo veas. Utiliza el firefox.

Gracias x todo.

Bueno dperez11, se nota que no te tomas el tiempo necesario para la lectura de los post, si asi lo hicieras seguro podrias encontrar una solución a tu problema, fijate que tu pagina, la estoy viendo en Firefox, esto se ve claramente en la foto que te subi, y no veo el espacio blanco que mencionas, en lo que pueda darte una mano aqui estare.
Saludos.-