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Ó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ólo debe preocuparse de elegir los platos y disfrutar de la veleda en compañí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> /</li>
<li><a class="dos" href="#">Cómo llegar</a> /</li>
<li><a class="tres" href="carta.php">Especialidades</a> /</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í encontrará toda la información de contacto y localización del restaurante</em></h1>
<div id="map_canvas"></div>
<div id="mapa-texto">
<p>Dirección: calle Valverde n°22 (paralela a la calle Mayor),Miraflores de la Sierra, Madrid. </p>
<p>Tel.: 918449538<br/><br/>Móvil: 699820461</p>
<p>e-mail: [email protected]</p>
<p>Síguenos en <a href="#">Facebook</a></p>
</div>
<div class="corte"></div>
</div>
<div id="pie">
<div class="pie">
www.trattorialaeneziana.es · C/ Valverde n°22, Miraflores de la Sierra (Madrid) · 699820461 · [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.