No tengo narices de conseguir lo que quiero. La siguiente imagen muestra el aspecto que debe tener la página web que deseo realizar.
Explico. Estoy realizando una aplicación web que se ejecutará sobre un popup. Dicho popup debe tener el aspecto de la imagen. El "separador" contendrá un botón que permitirá esconder "columna". Además, el popup debe poder redimensionarse (bien maximizando bien redimensionando manualmente). El problema estriba en que la capa de datos debe quedar por encima todo lo demás, o al menos de la cabecera, para que la pise, pero obviamente a una distancia definida (pixeles de altura de la cabecera y anchura de columna) de los bordes del pupup. En estos momentos en la carga inicial se ve bien, y si redimensiono también, pero no tengo metida la capa de datos, ya que al meterla y poner un top y left definidos, y con una altura y width del 100%, se me genera el scroll, que no quiero que aparezca. además, en caso de añadir datos que sobrepasen la altura de "datos", deseo que se genere un scroll para poder visualizarlo, pero que a su vez la "columna" se alargue.
Había pensado en poner la columna como fondo, pero en ese caso no podría ocultarla. Dejo el código que tengo ahora mismo con el problema del div "datos" para que veais a lo que me refiero.
Os agradecería enormemente si pudierais ayudarme aportando alguna sugerencia de como hacerlo. Así mismo, si algo no ha quedado claro, no duden en preguntar.
Un saludo.
Código:
CSS:
Código:
HTML:
html, body {
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
height:100%;
}
#header
{
width:100%;
background-image:url(../images/2TopFondo.png);
height:80px;
position: absolute;
}
#empresa
{
height:80px;
width:356px;
background-image:url(../images/2TopLogoIzq.png);
position:absolute;
}
#logoCAU
{
background-image:url(../images/2LogoCentro.png);
width:480px;
height:80px;
float:right;
background-repeat:no-repeat;
margin-right: 20px
}
#info
{
width: 100%;
height: 18px;
background-color: black;
position:absolute;
top: 80px;
}
#bannerfondo
{
position: absolute;
top: 98px;
width: 100%;
height: 49px;
background-image: url("../images/2header.png");
}
#info_izq
{
position: absolute;
visibility: visible;
width: 166px;
height: 100%;
background-image: url("../images/2FondoLateralIzq.png");
background-repeat: repeat-y;
}
#vertical_tab
{
position:absolute;
width: 7px;
left:166px;
height: 100%;
background-image: url("../images/2FondoSep.gif");
background-repeat: repeat-y;
}
#tab_buttom
{
margin-top: 300px;
}
#datos
{
position: absolute;
top: 148px;
left: 173px;
background-color: yellow;
height: 100%;
width: 100%;
}
#menu
{
position:absolute;
top: 128px;
left: 173px;
background-color: green;
height: 20px;
width: 100%;
}
Código:
Os dejo un enlace para que veais exactamente el problema. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LINK href="css/estilo.css" type="text/css" rel="stylesheet">
<title>..::Her@cles::..</title>
<script language="javascript" src="js/generalfunctions.js"></script>
</head>
<body onload="centrar(); window.opener.close()">
<div id="info_izq"></div>
<div id="vertical_tab">
<div id="tab_buttom"><img style="cursor: pointer" id="boton_vertical_tab" name="boton_vertical_tab" src="images/2FlechaIzq.gif" border="0" onmouseover="cambiar_over()" onmouseout="cambiar_out()" onclick="cerrar(); "></div>
</div>
<div id="header">
<div id="empresa"></div>
<div id="logoCAU"></div>
</div>
<div id="info"></div>
<div id="bannerfondo"></div>
<div id="menu"></div>
<div id="datos"></div>
</body>
</html>
www.deasis.es/prueba
, puse medidas fijas solo para motivo de ejemplo, dejame analizarlo un poco y te comento
