Foros del Web » Creando para Internet » CSS »

pie abajo - caso extraño

Estas en el tema de pie abajo - caso extraño en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/07/2011, 03:44
Avatar de PedroDesing  
Fecha de Ingreso: octubre-2007
Ubicación: Barcelona, España
Mensajes: 202
Antigüedad: 9 años, 4 meses
Puntos: 18
pie abajo - caso extraño

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.
__________________
pedrorodas.com próximamente! Permanezcan atentos
  #2 (permalink)  
Antiguo 13/07/2011, 04:40
Avatar de vgonga1986  
Fecha de Ingreso: marzo-2008
Ubicación: País de Pandereta
Mensajes: 1.021
Antigüedad: 9 años
Puntos: 252
Respuesta: pie abajo - caso extraño

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.
  #3 (permalink)  
Antiguo 13/07/2011, 05:29
Avatar de PedroDesing  
Fecha de Ingreso: octubre-2007
Ubicación: Barcelona, España
Mensajes: 202
Antigüedad: 9 años, 4 meses
Puntos: 18
Respuesta: pie abajo - caso extraño

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.
__________________
pedrorodas.com próximamente! Permanezcan atentos
  #4 (permalink)  
Antiguo 13/07/2011, 05:41
 
Fecha de Ingreso: abril-2011
Mensajes: 49
Antigüedad: 5 años, 10 meses
Puntos: 1
Respuesta: pie abajo - caso extraño

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.
  #5 (permalink)  
Antiguo 13/07/2011, 05:41
Avatar de vgonga1986  
Fecha de Ingreso: marzo-2008
Ubicación: País de Pandereta
Mensajes: 1.021
Antigüedad: 9 años
Puntos: 252
Respuesta: pie abajo - caso extraño

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.
  #6 (permalink)  
Antiguo 13/07/2011, 06:13
Avatar de vgonga1986  
Fecha de Ingreso: marzo-2008
Ubicación: País de Pandereta
Mensajes: 1.021
Antigüedad: 9 años
Puntos: 252
Respuesta: pie abajo - caso extraño

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.
  #7 (permalink)  
Antiguo 13/07/2011, 06:21
Avatar de PedroDesing  
Fecha de Ingreso: octubre-2007
Ubicación: Barcelona, España
Mensajes: 202
Antigüedad: 9 años, 4 meses
Puntos: 18
Respuesta: pie abajo - caso extraño

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.
__________________
pedrorodas.com próximamente! Permanezcan atentos
  #8 (permalink)  
Antiguo 13/07/2011, 07:51
Avatar de PedroDesing  
Fecha de Ingreso: octubre-2007
Ubicación: Barcelona, España
Mensajes: 202
Antigüedad: 9 años, 4 meses
Puntos: 18
Respuesta: pie abajo - caso extraño

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.
__________________
pedrorodas.com próximamente! Permanezcan atentos
  #9 (permalink)  
Antiguo 14/07/2011, 02:28
Avatar de PedroDesing  
Fecha de Ingreso: octubre-2007
Ubicación: Barcelona, España
Mensajes: 202
Antigüedad: 9 años, 4 meses
Puntos: 18
Respuesta: pie abajo - caso extraño

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!!
__________________
pedrorodas.com próximamente! Permanezcan atentos

Etiquetas: abajo, extraño, fondo, pie
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 18:26.