Foros del Web » Creando para Internet » CSS »

Problemas de maquetación

Estas en el tema de Problemas de maquetación en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/04/2007, 14:07
 
Fecha de Ingreso: enero-2004
Ubicación: Cordoba
Mensajes: 72
Antigüedad: 13 años, 10 meses
Puntos: 0
Exclamación Problemas de maquetación

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.!!
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 01:26.