me falla el pie siempre abajo

PedroRodas · #1 (**permalink**) 24/07/2008, 13:57

Hola de nuevo, este truco lo usado anteriormente y me iba perfecto, es decir:

- Si el contenido de la pagina supera en el altura lo que puede mostrar la pantalla, el pie se coloca al final del todo, pegado al borde inferior.

- Si la pagina tiene muy poco contenido,y no llega hasta la parte infeior de la pantalla, el pie se situa en la parte inferior de la misma, pegado al borde.

Pero ahora detecto 2 fallos:

1.- Para que no me salga la barra de desplazamiento vertical, necesito poner 5px mas en el margin-top que en el height, es decir, si tengo un height:25px, para evitar el scroll debo poner margin-top:-30px. Esto provoca ademas que no quede el pie pegado al borde inferior.

- Si el contenido de la pagina supera en el altura lo que puede mostrar la pantalla, el pie se coloca pisando informacion.

Esta la version para 1280 x 1024. Aqui os dejo el codigo:

HTML:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
  <title>TRATTORIA LA VENEZIANA</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/index.css" type="text/css" media="screen"/>
</head>
<body id="opcion6">
<div id="contenedor">
	<div id="cabecera">
	</div>
	<div class="portada">
		<a href="llegar.php" class="principal llegar">
		<span class="titulo">DONDE ESTAMOS</span>
		<span class="primero">Llegue f&aacute;cilmente al restaurante consultando esta secci&oacute;n.</span>
		</a>
	</div>
	<div class="portada">
		<a href="local.php" class="principal local">
		<span class="titulo">EL LOCAL</span>
		<span class="primero">Situado en el centro de Miraflores, en la paralela a la Calle Mayor, contamos con un c&oacute;modo y acogedor local, 
			con una decoraci&oacute;n est&aacute; inspirada el carnaval Veneciano.</span>
		</a>
	</div>	
	<div class="portada">
		<a href="especialidades.php" class="principal especialidades">
		<span class="titulo">ESPECIALIDADES</span>
		<span class="primero">Disfrute de nuestras especialidades. Cocina italiana con un toque personal y los mejores ingrdientes frescos.</span>
		</a>
	</div>	
	<div class="portada">
		<a href="reservas.php" class="principal reservas">
		<span class="titulo">RESERVAS</span>
		<span class="primero">Realice una reserva c&oacute;modamente a trav&eacute;s del tel&eacute;fono.</span>
		</a>
	</div>	
	<div class="portada">
		<a href="miraflores.php" class="principal miraflores">
		<span class="titulo">MIRAFLORES DE LA SIERRA</span>
		<span class="primero">Descubra m&aacute;s sobre Miraflores de la Sierra, y complete el dia con una visita por sus lugares m&aacute;s
		caracter&iacute;sticos.</span>
		</a>
	</div>
</div>
<div id="pie">
	<img src="imgs/pie2.jpg" alt="Imagen del pie" title="Imagen del pie" width="768px" height="25px"/>
</div>
</body>
</html>

CSS:

Código HTML:

/* 								Estilos generales								*/
*{margin:0;padding:0;outline: 0;}
html,body {margin:0;padding:0;height:100%;outline: 0; }
/* 								Contenedor									*/
#contenedor{
width:768px;
    min-height:100%;
    height: auto!important;
    height:100%;
margin: 0px auto;
background:#fff;
font: normal 0.8em Arial, Helvetica, sans-serif;
}

/*LayOut
------------------------------------------------------------------------------------------------------------------------------------------------*/

/*								 Cabecera									*/
#cabecera{
width:768px;
height:145px;
background:#363 url(../imgs/cabecera.jpg) no-repeat;
}
/*								 Menu 	 ( En su propio css	) 					*/

/*								 Pie										*/
#pie{
text-align:center;
height:25px;
margin-top:-25px;
background:#363;
}
/*                                                                                Estilos                                                                                                   */
.portada {
height:100px;
margin-top:1em;
padding:5px;
border:#ccc 1px solid;
}
a.principal{
display: block;
text-decoration: none;
height:100px;
}

a.llegar{background: url(../imgs/portada/llegar2.jpg) no-repeat right top;}
a.local{background: url(../imgs/portada/local2.jpg) no-repeat right top;}
a.especialidades{background: url(../imgs/portada/especialidades2.jpg) no-repeat right top;}
a.reservas{background: url(../imgs/portada/reservas2.jpg) no-repeat right top;}
a.miraflores{background: url(../imgs/portada/miraflores2.jpg) no-repeat right top;}

a.principal:hover {background-position: right bottom;}

a.principal:hover span.titulo {border-color: #A177B2;}

span.titulo{font:bold 1.2em Arial, Helvetica, sans-serif;
border-bottom:#ccc 3px solid;
display: block;
margin-right: 260px;
color: #000;
}
span.primero{margin-top:1em;
display: block;
margin-right: 260px;
color: #000;
}

Probarlo en firefox y tb en IE

Mikmoro · #2 (**permalink**) 24/07/2008, 16:21

Lo que te está ocurriendo es que has eliminado un div porque seguramente pensaste que no era importante, pero lo es y mucho: <div class="corte"></div>

Debes colocarlo justo antes de terminar el contenedor, para hacerlo crecer y mantener la distancia con el pie. Vuelve a colocarlo aquí:

Cita:

</div>
<div class="corte"></div>
</div>
<div id="pie">

Y de la misma manera, eliminaste el selector que le proporciona su efecto:

.corte {clear: both;padding-top: 4em;}

Vuelve a colocar eso en tu css y listo.

El asunto de que en IE6 aparezca el scroll, es porque has puesto en un pie de 25px una imagen de 25px, y eso IE6 lo lleva mal. Deberás hacerla más pequeña, o buscar otra solución.

Mikel.

PedroRodas · #3 (**permalink**) 25/07/2008, 03:18

A ver:

- Gracias a tu div id="corte" he solucionado el problema del pie que pisaba la informacion ( Aunque en la anterior pagina en la que lo use, he estado probando y no es necesario). Pero bueno, que en esta pagina me ha servido para solucionarlo.

- La parte en la que tengo que poner 5px mas en el margin-top que en el height para evitar el scroll, me pasa en firefox y tb en IE6. Lo he solucionado cambiando el DOCTYPE de strict a transitional. No se si esto esta bien, pero me ha funcionado.

Mikmoro · #4 (**permalink**) 25/07/2008, 05:04

El corte estaba en el ejemplo inicial del pie siempre abajo.

Lo del pie y los 5 px, yo he cogido el código que has puesto, lo he pegado tal cual (con el strict) y en FF no ocurre nada con el scroll.

No sé qué otra cosa puede haber pasado. Pero bueno, si se ha resuleto, perfecto.
Mikel.