Foros del Web » Creando para Internet » CSS »

me falla el pie siempre abajo

Estas en el tema de me falla el pie siempre abajo en el foro de CSS en Foros del Web. Hola de nuevo, este truco lo usado anteriormente y me iba perfecto, es decir: - Si el contenido de la pagina supera en el altura ...
  #1 (permalink)  
Antiguo 24/07/2008, 14:57
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 12 años
Puntos: 0
me falla el pie siempre abajo

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
__________________
Genial concierto de Roger Waters, Pink Floyd siguen vivos!!!
  #2 (permalink)  
Antiguo 24/07/2008, 17:21
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: me falla el pie siempre abajo

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.
  #3 (permalink)  
Antiguo 25/07/2008, 04:18
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 12 años
Puntos: 0
Respuesta: me falla el pie siempre abajo

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.
__________________
Genial concierto de Roger Waters, Pink Floyd siguen vivos!!!
  #4 (permalink)  
Antiguo 25/07/2008, 06:04
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: me falla el pie siempre abajo

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:10.