Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/12/2007, 14:56
Avatar de chalchis
chalchis
 
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 20 años, 10 meses
Puntos: 21
Pregunta modificar tree para que se adapte al tamaño en pantalla

hola amigos acabo de adaptar un menu tipo outlook dentro de frames estos son

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PIA Centro Universitario Hispano Mexicano</title>
</head>

<frameset rows="100,*,30" cols="*" frameborder="no" border="0" framespacing="0">
<frame src="<?echo $raiz.$interfaz.$php.$inte_cabezera;?>" name="<?echo $frcabezal?>" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
<frameset cols="200,*,175" frameborder="no" border="0" framespacing="0">
<frame src="<?echo $raiz.$interfaz.$php.$inte_menu;?>" id="<?echo $frmenu;?>" name="<?echo $frmenu;?>" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
<frame src="<?echo $raiz.$interfaz.$php.$inte_contenido;?>" name="<?echo $frcontendio;?>" id="mainFrame" title="mainFrame" />
<frame src="<?echo $raiz.$interfaz.$php.$inte_actividades;?>" name="<?echo $fractividad;?>" scrolling="No" noresize="noresize" id="rFrame" title="rFrame" />
</frameset>
<frame src="<?echo $raiz.$interfaz.$php.$inte_estatus;?>" name="<?echo $frestatus;?>" scrolling="No" noresize="noresize" id="pieFrame" title="topFrame" />
</frameset>
<noframes><body>
</body>
</noframes></html>


donde menu es donde se carga el archivo que comento

aqui esta mi menu tipo outlook

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../Css/menu.css" rel="stylesheet" type="text/css" />
<title>Documento sin t&iacute;tulo</title>
</head>
<body >
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" background="../Imagen/inter_menu_bg.jpg">
<table width="191"border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="contenedor_menu">
<div id="AccordionContainer" class="AccordionContainer">
<div onclick="expander(1)">
<div class="AccordionTitle">
Accordion 1
</div>
</div>
<div id="Accordion1Content" class="AccordionContent">
I Am Accordion 1.
</div>

<div onclick="expander(2)">
<div class="AccordionTitle">
Accordion 2
</div>
</div>
<div id="Accordion2Content" class="AccordionContent">
I Am Accordion 2.
</div>
<div onclick="expander(3);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 3
</div>
</div>
<div id="Accordion3Content" class="AccordionContent">
I Am Accordion 3.
</div>
<div onclick="expander(4);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 4
</div>
</div>
<div id="Accordion4Content" class="AccordionContent">
I Am Accordion 4.
</div>
<div onclick="expander(5);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 5
</div>
</div>
<div id="Accordion5Content" class="AccordionContent">
I Am Accordion 5.
</div>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<script language="javascript">
var altoframe=parent.document.getElementById('frmenu') .offsetHeight;
//alert("el frame mide:"+altoframe);
var altocontenedor=document.getElementById('AccordionC ontainer').offsetHeight;
//alert("el contenedor del menu mide:"+altocontenedor);
var largamiento=altoframe-altocontenedor;
document.getElementById('contenedor_menu').style.h eight=altoframe+"px";
var anterior_modulo;



function expander(indice_modulo)
{
var idmodulo = "Accordion" + indice_modulo + "Content";
//alert(idmodulo);

if(anterior_modulo!=null)
{

document.getElementById(anterior_modulo).style.hei ght=0+"px";
document.getElementById(anterior_modulo).style.dis play='none';
//alert("anterior es:"+anterior_modulo);
}

if(idmodulo!=anterior_modulo)
{

document.getElementById(idmodulo).style.height=lar gamiento+"px";
document.getElementById(idmodulo).style.display='b lock';
anterior_modulo=idmodulo;
}
else
{
anterior_modulo=null;
}


}
</script>
</body>
</html>

este es el css
body
{
background-color: #ffffff;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}


.AccordionTitle, .AccordionContent, .AccordionContainer
{
position:relative;
width:188px;
}

.AccordionTitle
{
height:20px;
overflow: auto;
cursor:pointer;
font-family:Arial;
font-size:8pt;
font-weight:bold;
vertical-align: bottom;
text-align:center;
background-repeat:repeat-x;
display:table-cell;
background-image: url(../Imagen/Menu/title_repeater.jpg);
-moz-user-select:none;
}

.AccordionContent
{
height:0px;
overflow:auto;
display:none;
}

.AccordionContainer
{
border-top: solid 1px #C1C1C1;
border-bottom: solid 1px #C1C1C1;
border-left: solid 2px #C1C1C1;
border-right: solid 2px #C1C1C1;
}

mi pregunta es como adapto mi menu para que cuando redimensione la pantalla se adapte

saludos
__________________
gerardo