que tal, estoy elaborando una página web que consta basicamente de 3 partes.. que son 3 capas.. ahora bien.. mi encabezado, mi contenido y mi footer..
El encabezado esta formado a su vez de varias capas.. y el contenido contiene un iframe, el cual se redimensiona dependiendo el contenido, y es ahi donde quiero porder realizar que el footer siempre aparezca ubicado en la parte inferior del contenido dependiendo de la redimensión automática que indique la capa de contenido.
Esa es la única parte que hasta ahora no he podido maquetar.
Anexaré mi código y espero alguien pueda ayudarme. De antemano muchas gracias.
<html>
<head>
<title>CsS.</title>
<meta http-equiv="Content-Type" content="text/html;iso-8859-1">
<meta name="description" content="">
<script language="javascript">
window.onload = function() {
document.getElementById("the_iframe").scrolling = "no";
document.getElementById("the_iframe").src = "contenido.php";
}
</script>
<link href="imagen2.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#ffffff">
<div class="imglogo"><img src="logo.png" alt="logo" width="146" height="84"></div>
<div class="direc">
<p>Calle 11 Sur No 200B<br>
Fracc. Las Americas<br>
C:P. 58000<br>
Mexicali, BC<br>
<br>
Tel. 456 958 34 59<br>
Fax. 456 968 34 60
</p>
</div>
<div class="menu">
<ul class="menulist">
<li class="active"><a href="#" class="menucurrent">Inicio</a></li>
<li><a href="#">Somos</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Acceso</a></li>
</ul>
</div>
<div class="fecha"><?=fecha()?></div>
<div class="ifs">
<iframe name="the_iframe" id="the_iframe" width="1024" marginheight="0" marginwidth="0" height="0" scrolling="no" frameborder="1">
</iframe>
</div> <div class="footer">
</div>
</body>
</html>
el codigo color naranja es el contiene el iframe y a su vez se redimensiona dependiendo del contenido.
el código verde es mi footer el cúal quiero que siempre se ubique debajo de la redimensión automática de la capa de ifs.
anexo tambien mi hoja de cascada actual.
/* CSS Document */
.imglogo{
position:absolute;
left:0px;
top:0px;
width:218px;
height:170px;
z-index:1;
visibility:visible;
background-color: #000000;
layer-background-color: #CCCCCC;
padding: 30px;
background-image: url(wallgris.png);
background-repeat: repeat-x;
}
.direc{
position:absolute;
left:218px;
top:0px;
width:235px;
height:170px;
z-index:2;
visibility:visible;
background-color: #CCCCCC;
layer-background-color: #CCCCCC;
border: 1px none #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #FFCC00;
padding: 20px;
background-image: url(wallgris.png);
background-repeat: repeat-x;
}
.menu{
position:absolute;
left:453px;
top:0px;
width:575px;
height:123px;
z-index:3;
visibility:visible;
background-color: #CCCCCC;
layer-background-color: #CCCCCC;
border: 1px none #000000;
background-image: url(wallgris.png);
background-repeat: repeat-x;
}
.menulist{
list-style-type: none;
margin: 0;
padding-top: 60;
padding-right: 5;
padding-bottom: 5;
padding-left: 125;
}
.menulist li{
float: left;
font-size: 1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
margin-top: 0;
margin-right: 0.5em;
margin-bottom: 0;
margin-left: -0.5em;
padding-top: 0;
padding-right: 0.5em;
padding-bottom: 0;
padding-left: 0.5em;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFCC00;
text-decoration: none;
}
.menulist li a:current{
text-decoration: none;
color: #FFCC00;
}
.menulist li a:link{
text-decoration: none;
color: #FFFFFF;
}
.menulist li a:hover {
text-decoration: none;
color: #CCCCCC;
}
.menulist li a:visited{
text-decoration: none;
color: #FFFFFF;
}
.menulist li a:active{
text-decoration: none;
color: #FFCC00;
}
.fecha{
position:absolute;
left:453px;
top:123px;
width:575px;
height:47px;
z-index:4;
visibility:visible;
background-color: #CCCCCC;
layer-background-color: #CCCCCC;
border: 1px none #000000;
background-image: url(wallgris2.png);
background-repeat: repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
padding-left: 350px;
padding-top: 5px;
color: #FFCC00;
}
.ifs{
position:absolute;
left:0px;
top:170px;
width:1024px;
height:auto;
z-index:5;
visibility:visible;
background-color:#006699;
clear: both;
} .footer{
height: 200px;
width: 1024px;
background-color: #666666;
float: left;
clear: left;
z-index: 6;
}
Gracias de antemano.!!