pie abajo - caso extraño

PedroDesing · #1 (**permalink**) 13/07/2011, 03:44

Hola, muy buenas.

He estado practicando con las técnicas de pie siempre abajo que he encontrado por aquí, obteniendo buenos resultados.

Mi problema comienza en una nueva página, cuya estructura es la siguiente:

http://img62.imageshack.us/img62/2762/problemapie.jpg

Puede que les parezca un poco raro lo del doble contenedor, pero es la unica forma que he encontrado para conseguir el efecto de la sombra que el contenedor tiene hacia afuera.

les dejo mi código:

Código HTML:

 <!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" lang="es-es">
<head>
  <title>TRATTORIA LA VENEZIANA / C&Oacute;MO LLEGAR</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="homedesc" content="Sitio web del restaurante italiano trattoria La Venenziana" />
<meta name="lang" content="es" />
<meta name="coverage" content="Spain España" />
<meta name="locality" content="Miraflores de la Sierra, Madrid, España" />
<meta name="content-languaje" content="spanish español castellano" />
<meta name="description" content="Sitio web para restaurante italiano trattoria La Veneziana" />
<meta name="revisit" content="1 days" />
<meta name="keywords" content="restaurante, italiano, trattoria, Miraflores, Madrid, pasta, pizza, pizzeria, sierra" />
<meta name="robots" content="index,follow,all" />
<meta name="author" content="Pedro Rodas" />
<meta name="designer" content="Pedro Rodas" />
<meta name="coder" content="www.trattorialavenenziana.com" />
<link rel="stylesheet" href="css/index-css.css" type="text/css" media="screen"/>
  <link rel="stylesheet" href="css/como-llegar.css" type="text/css" media="screen"/>

  		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialize() {
				var latlng = new google.maps.LatLng(40.812908, -3.767353);
				var settings = {
					zoom: 17,
					center: latlng,
					mapTypeControl: true,
					mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
					navigationControl: true,
					navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
					mapTypeId: google.maps.MapTypeId.ROADMAP};
				var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
				var contentString = '<div id="content">'+
					'<div id="siteNotice">'+
					'</div>'+
					'<h1 id="firstHeading" class="firstHeading">La Veneziana</h1>'+
					'<div id="bodyContent">'+
					'<p style="line-height:18px">Restaurante La Veneziana. Como ve, nosotros le ponemos todas las facilidades para que encuentre el resturante sin problemas. Usted s&oacute;lo debe preocuparse de elegir los platos y disfrutar de la veleda en compa&ntilde;&iacute;a de los suyos.</p>'+
					'</div>'+
					'</div>';
				var infowindow = new google.maps.InfoWindow({
					content: contentString
				});
				
				var companyImage = new google.maps.MarkerImage('images/llegar/google-map/logo.png',
					new google.maps.Size(100,50),
					new google.maps.Point(0,0),
					new google.maps.Point(50,50)
				);

				var companyPos = new google.maps.LatLng(40.812908, -3.767353);

				var companyMarker = new google.maps.Marker({
					position: companyPos,
					map: map,
					icon: companyImage,

					title:"La Veneziana",
					zIndex: 3});				
				
				google.maps.event.addListener(companyMarker, 'click', function() {
					infowindow.open(map,companyMarker);
				});
			}
		</script>
  
  </head>
<body id="opcion2" onload="initialize()">
<div id="contenedor-sombra">
<div id="contenedor">
	<div id="cabecera">
		<div id="main-menu">
			<div id="banderitas">
			<img src="images/cabecera/bandera-spain.gif" width="25px" height="18px" alt="versión en castellano" />
			<img src="images/cabecera/bandera-england.gif" width="25px" height="18px" alt="versión en inglés" />
			</div>
			<div id="menu-opciones">
				<ul>
					<li><a class="uno" href="index.php">Inicio</a>&nbsp;&nbsp;&nbsp;/</li>
					<li><a class="dos" href="#">C&oacute;mo llegar</a>&nbsp;&nbsp;&nbsp;/</li>
					<li><a class="tres" href="carta.php">Especialidades</a>&nbsp;&nbsp;&nbsp;/</li>
					<li><a class="cuatro" href="reservas.php">Reservas</a></li>
				</ul>
			</div>
		</div>
		<!--<div id="header">
		<img src="images/llegar/cabecera-llegar.jpg" width="890px" height="229px" alt="imagen del local" />
		</div>-->
	</div> 
	<div id="cuerpo">
		<h1><em>Aqu&iacute; encontrar&aacute; toda la informaci&oacute;n de contacto y localizaci&oacute;n del restaurante</em></h1>
		<div id="map_canvas"></div>
		<div id="mapa-texto">
			<p>Direcci&oacute;n: calle Valverde n&deg;22 (paralela a la calle Mayor),Miraflores de la Sierra, Madrid. </p>
			<p>Tel.: 918449538<br/><br/>M&oacute;vil: 699820461</p>
			<p>e-mail: [email protected]</p>
			<p>S&iacute;guenos en <a href="#">Facebook</a></p>
		</div>
	<div class="corte"></div>	
	</div>
	<div id="pie">
		<div class="pie">
		www.trattorialaeneziana.es&nbsp;&nbsp;&middot;&nbsp;&nbsp;C/ Valverde n&deg;22, Miraflores de la Sierra (Madrid)&nbsp;&nbsp;&middot;&nbsp;&nbsp;699820461&nbsp;&nbsp;&middot;&nbsp;&nbsp;[email protected]
		</div>
	</div>
</div>
</div>
</body>
</html>

y aqui el css

Código HTML:

/* 								Estilos generales								*/
*{margin:0;padding:0;outline:0;}
html,body {margin:0;padding:0;height:100%;width:100%;outline:0;background:#fff url(../images/fondo-mantel-violeta-3.png) ;}

#contenedor-sombra{
font: normal 12px Georgia, Arial, Helvetica, Verdana, sans-serif;
width:980px;
height: auto!important;
margin: 0 auto;
color:#333;
background: url(../images/fondo-contenedor.png) top left repeat-y;
}
#contenedor{
width:940px;
height: auto!important;
margin: 0 auto;
background:#fff;

}
/* 								BODY								*/

#opcion1 #menu-opciones  ul li a.uno, #opcion2 #menu-opciones  ul li a.dos, #opcion3 #menu-opciones  ul li a.tres, #opcion4 #menu-opciones  ul li a.cuatro{
border-bottom:#000 dotted 1px;
padding-bottom:2px;
color: #000;}

/* 								CABECERA								*/ 
#cabecera{
margin:0 auto;
width:900px;
height:auto;
background:#fff;
}
#main-menu{
width:900px;
height:110px;
margin-bottom:15px;
background:#fff  url(../images/cabecera/logo-veneziana.gif) no-repeat bottom left ;
}
#cabecera #main-menu  #banderitas{
float:right;
margin-top:25px;
}
#cabecera #main-menu  #banderitas img{
margin-left:5px;
}
#menu-opciones{
float:right;
width:auto;
height:auto;
background:#fff;
clear:both;
margin-top:50px;
}
#menu-opciones ul li{
color:#a283b6;
list-style:none;
display:block;
float:left;
margin-left:10px;
}
#menu-opciones ul li a{
font-weight:bold;
color:#a283b6;
font-size:14px;
text-decoration:none;
}
#menu-opciones ul li a:hover{
color:#333;
}
#header{
width:100%;
height:auto;
background:#fff;
}
#cabecera #header img{
border: 1px solid #ccc;
padding:4px;
}

/* 								CUERPO								*/ 
#cuerpo{
width:900px;
margin:25px auto;
/*background:#ff0;*/
}


#cuerpo #mapa{
width:584px;
height:424px;
border:3px solid #a283b6;
float:left;
background:#fff;
}
#cuerpo #map_canvas{
width:584px;
height:294px;
border:3px solid #a283b6;
float:left;
background:#fff;
}
#cuerpo #mapa-texto{
/*margin-top:25px;*/
width:280px;
height:auto;
float:left;
margin-left:30px;
/*background:#f63;*/
}
#cuerpo #mapa-texto p{
margin-bottom:10px;
border-bottom:1px dotted #ccc;
padding-bottom:10px;
}
#cuerpo h1{
padding:15px 0;
/*border-top:1px dotted #ccc;
border-bottom:1px dotted #ccc;*/
border-top:3px dotted #a283b6;
border-bottom:3px dotted #a283b6;
margin-top:0px;
margin-bottom:25px;
font-size:21px;
/*background:#f63;*/
}
#cuerpo h1.firstHeading{
padding:5px 0;
border-top:1px dotted #ccc;
border-bottom:1px dotted #ccc;
margin-top:0px;
margin-bottom:5px;
font-size:14px;
/*background:#f63;*/
}

/* 								PIE								*/ 
#pie{
padding:12px 0px;
margin: 0 auto;
width:940px;
height:auto;
color:#fff;
text-align:center;
background:#a283b6;

}

/*					Estilos					*/
.corte {clear: both;}

A ver si me podeis ayudar a colocar el pie siempre abajo, teniendo el pie dentro del contenedor, para que se le aplique tb el fondo sombreado.

Muchas gracias.

vgonga1986 · #2 (**permalink**) 13/07/2011, 04:40

Creo que el problema es que el height del contenedor es exactamente el mismo que el del contenedor-sombra, ya que tienes:

Código:

#contenedor-sombra {
    font: normal 12px Georgia, Arial, Helvetica, Verdana, sans-serif;
    width:980px;
    height: auto!important;
    margin: 0 auto;
    color:#333;
    background: url(../images/fondo-contenedor.png) top left repeat-y;
}

#contenedor {
    width:940px;
    height: auto!important;
    margin: 0 auto;
    background:#fff;
}

Intenta ponerle al contenedor interno un margen abajo, para que el contenedor externo sea más largo que el interno y se aplique la imagen de fondo.

Espero que te sirva, un saludo.

PedroDesing · #3 (**permalink**) 13/07/2011, 05:29

Muchas gracias por tu respuesta, pero o no te he entendido muy bien, o no me has contestado a lo que yo preguntaba.

Si te fijas en la imagen que linkado en mi post, tengo el tipico problema del pie que no está abajo del todo, al no haber suficiente contenido encima, que lo empuje hacia abajo. Como ya decía, he probado varrios metodos, pero estos métodos requieren que el pie este fuera del contenedor, y yo necesito tenerlo dentro para que se le aplique tanto la sombra como la imagen de fondo.

De todas formas voy a a crear un documento con la estructura y el codigo necsario para trabajar sobre mi problema, eliminando todo lo que no es necesario, y asi nos será más fácil conseguir el resultado deseado.

Isra_84 · #4 (**permalink**) 13/07/2011, 05:41

Has probado a poner otro div "corte" con un heigth específico ?

Es decir dentro del div id="pie" y antes del div class="pie" un div id="corte" con un heigth específico, así te lo empujará hacia abajo.

vgonga1986 · #5 (**permalink**) 13/07/2011, 05:41

Perfecto, ahora entiendo lo que quieres, no te había entendido bien. Quieres que el pie de página esté siempre fijo al pie de la ventana del navegador, cierto? Pero que, a la vez, esté dentro del contenedor, digamos que quieres que el contenedor se rellene con espacio en blanco hasta el final de la página.

De todas formas, si vas a preparar el código, me lo pones mucho más fácil para echarte una mano, así que espero a que lo hagas.

vgonga1986 · #6 (**permalink**) 13/07/2011, 06:13

Prueba esto:

1. En el css de pie añade lo siguiente para fijarlo abajo de la ventana:
position: fixed;
bottom:0;

2. En los css de contenedor y contenedor-sombra en height ponlo a 100%, así tu contenedor ocupará toda la página, rellenando de blanco el fondo que no utilice y enganchará con el pie de página, que está fijo.

Espero que te sirva, un saludo.

PedroDesing · #7 (**permalink**) 13/07/2011, 06:21

perfecto gracias voy a probarlo, aun asi preparare el archivo para ir probando y lo publicare aqui para que todos/as podamos ir viendo las posibilidades.

Muchas gracias a todos.

PedroDesing · #8 (**permalink**) 13/07/2011, 07:51

Buenas, ya tengo preparado el archivo para que podamos encontrar una solucion más fácilmente.

Código HTML:

 <!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" lang="es-es">
<head>
  <title>TRATTORIA LA VENEZIANA / C&Oacute;MO LLEGAR</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="homedesc" content="Sitio web del restaurante italiano trattoria La Venenziana" />
<meta name="lang" content="es" />
<meta name="coverage" content="Spain España" />
<meta name="locality" content="Miraflores de la Sierra, Madrid, España" />
<meta name="content-languaje" content="spanish español castellano" />
<meta name="description" content="Sitio web para restaurante italiano trattoria La Veneziana" />
<meta name="revisit" content="1 days" />
<meta name="keywords" content="restaurante, italiano, trattoria, Miraflores, Madrid, pasta, pizza, pizzeria, sierra" />
<meta name="robots" content="index,follow,all" />
<meta name="author" content="Pedro Rodas" />
<meta name="designer" content="Pedro Rodas" />
<meta name="coder" content="www.trattorialavenenziana.com" />
  <link rel="stylesheet" href="css/pie-abajo-css.css" type="text/css" media="screen"/>
</head>

<body id="opcion2">
<div id="contenedor-sombra">
<div id="contenedor">
	<div id="cabecera">
		<h1>cabecera</h1>
	</div> 
	<div id="cuerpo">
		<div id="columna-izquierda"></div>
		<div id="columna-derecha"></div>
	<div class="corte"></div>	
	</div>
	<div id="pie">
		<div class="pie">
		www.trattorialaeneziana.es&nbsp;&nbsp;&middot;&nbsp;&nbsp;C/ Valverde n&deg;22, Miraflores de la Sierra (Madrid)&nbsp;&nbsp;&middot;&nbsp;&nbsp;699820461&nbsp;&nbsp;&middot;&nbsp;&nbsp;[email protected]
		</div>
	</div>
</div>
</div>
</body>
</html>

y el css

Código HTML:

 <!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" lang="es-es">
<head>
  <title>TRATTORIA LA VENEZIANA / C&Oacute;MO LLEGAR</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="homedesc" content="Sitio web del restaurante italiano trattoria La Venenziana" />
<meta name="lang" content="es" />
<meta name="coverage" content="Spain España" />
<meta name="locality" content="Miraflores de la Sierra, Madrid, España" />
<meta name="content-languaje" content="spanish español castellano" />
<meta name="description" content="Sitio web para restaurante italiano trattoria La Veneziana" />
<meta name="revisit" content="1 days" />
<meta name="keywords" content="restaurante, italiano, trattoria, Miraflores, Madrid, pasta, pizza, pizzeria, sierra" />
<meta name="robots" content="index,follow,all" />
<meta name="author" content="Pedro Rodas" />
<meta name="designer" content="Pedro Rodas" />
<meta name="coder" content="www.trattorialavenenziana.com" />
  <link rel="stylesheet" href="css/pie-abajo-css.css" type="text/css" media="screen"/>
</head>

<body id="opcion2">
<div id="contenedor-sombra">
<div id="contenedor">
	<div id="cabecera">
		<h1>cabecera</h1>
	</div> 
	<div id="cuerpo">
		<div id="columna-izquierda"></div>
		<div id="columna-derecha"></div>
	<div class="corte"></div>	
	</div>
	<div id="pie">
		<div class="pie">
		www.trattorialaeneziana.es&nbsp;&nbsp;&middot;&nbsp;&nbsp;C/ Valverde n&deg;22, Miraflores de la Sierra (Madrid)&nbsp;&nbsp;&middot;&nbsp;&nbsp;699820461&nbsp;&nbsp;&middot;&nbsp;&nbsp;[email protected]
		</div>
	</div>
</div>
</div>
</body>
</html>

La solucion con el pie position:fixed, bottom:0; y el height:100% en los contenedores sirve, pero si el contenido crece, ocurre un error muy feo (probad a poner un height:800px a las columnas izquierda y centro).

Yo estoy en ello, a ver si podeis echarme una mano con esto!!

Muchas gracias, saludos.

PedroDesing · #9 (**permalink**) 14/07/2011, 02:28

Nada!!! consigo o bien poner el pie abajo fijo, o bien que se me quede como en la imagen que enlace en el primer post de este tema. Lo dejo abajo con position fixed y bottom:0. Pero si el contenido de la pagina crece, no empuja al pie hacia abajo.

Alguien sabe que juego de position y tal tengo que hacer?

Muchas gracias!!