Foros del Web - Ver Mensaje Individual

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