Como ajustar el ancho de las capas

Hola:
Estoy intentando hacer una página aspx en la que hay 5 capas
1 superior, 1 inferior formando una cabecera y un pie
las otras tres van entre estas una al lado de la otra (como cilumnas)
las capas de los exremos llevan treeviews que hacen que su ancho varíe en función del contenido y quiero que la capa central se ajuste al ancho que le quede libre.
¿como puedo hacerlo?
Gracias

1 respuesta

Respuesta
1
Estas capza, ¿cómo estan contenidas? Son tablas o div'¿s? Necesitaria que expliques un poco mejor como estácrontruido el sitio.
Este es mi código aspx, de momento.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="frmGestionIncendios.aspx.cs" Inherits="Paginas_Default2" %>
<!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">
<head runat="server">
<title>Página sin título</title>
<script language="javascript" src="../JScript/FunVentanas.js" type="text/javascript"></script>
<script language="javascript" src="../JScript/Utilidades.js" type="text/javascript"></script>
<script type="text/javascript">
function Dimensionar()
{
DivCentral.style.width = document.getElementById("GestionIncendios").style.width - document.getElementById("DivIncendios").style.width - document.getElementById("DivBases").style.width;
}
</script>
</head>
<!--
<body onresize=PosicionaDivsGestionIncendios(DivIncendios,DivCentral,DivBases);>
-->
<body>
<form id="GestionIncendios" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"
EnablePartialRendering="True" />
<!--CABECERA-->
<div runat="server" id="CIzda" style="float:left; width:48%; height: 70px;"
align="left">
<asp:ImageButton runat="server"
ID="ImageButton2" AlternateText="Nuevo Incendio" BorderStyle="Solid"
ImageUrl="~/Imagenes/llama03.ico" ToolTip="Nuevo Incendio"></asp:ImageButton>
</div>
<div runat="server" id="CDcha"
style="float:left; top:0px; width:50%; height: 70px;" align="right">
<asp:ImageButton ID="btnAsignarMedioIncendio" runat="server"
AlternateText="Asignar Medio al Incendio" BorderStyle="Solid"
ImageUrl="~/Imagenes/Foca.ico"
onclick="btnAsignarMedioIncendio_Click" />
</div>
<!--CUERPO CENTRAL-->
<div>
<div runat="server" id="DivIncendios"
style="float:left; width:20%; background-color:#D4E6EA; clear: both;"
align="left">
<asp:UpdatePanel ID="UpdatePanelIncendios" runat="server"
UpdateMode="Conditional">
<ContentTemplate>
<asp:TreeView ID="tvwIncendios" runat="server" NodeIndent="10" ShowCheckBoxes="Parent"
ToolTip="Incendios y medios asignados" ShowLines="True"
ontreenodecheckchanged="tvwIncendios_TreeNodeCheckChange">
<ParentNodeStyle Font-Bold="True" Font-Names="Arial Narrow" Font-Size="Large" />
<LevelStyles>
<asp:TreeNodeStyle Font-Names="Arial Narrow" Font-Size="Medium"
Font-Underline="False" />
</LevelStyles>
<RootNodeStyle Font-Bold="True" Font-Names="Arial Narrow" Font-Size="20pt" />
<NodeStyle Font-Bold="False" HorizontalPadding="10px" />
<LeafNodeStyle Font-Names="Arial Narrow" Font-Size="Small" />
</asp:TreeView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="TimerIncendios" EventName="Tick" />
<asp:AsyncPostBackTrigger ControlID="tvwIncendios"
EventName="TreeNodeCheckChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
<div runat="server" id="DivCentral"
style="width: 520px; background-color:Yellow; height: 500px; float: left;">
<asp:MultiView ID="mvwCentral" runat="server">
<asp:View ID="vwAsignarMedioAMision" runat="server" EnableTheming="False">
<table style="width:100%; font-family: Arial; font-size: medium; color: #0000FF;">
<tr>
<td style="font-family: Arial; font-size: medium">
MEDIO</td>
<td>
MISIÓN</td>
<td>
 </td>
</tr>
<tr>
<td>
<asp:ListBox ID="lstMedios" runat="server"></asp:ListBox>
</td>
<td>
<asp:ListBox ID="lstMision" runat="server"></asp:ListBox>
</td>
<td>
 </td>
</tr>
<tr>
<td>
<asp:ImageButton ID="btnAceptar" runat="server" AlternateText="Aceptar"
ImageUrl="~/Imagenes/accept.png" />
<asp:ImageButton ID="btnCancelar" runat="server" AlternateText="Cancelar"
ImageUrl="~/Imagenes/delete.png" />
</td>
<td>
 </td>
<td>
 </td>
</tr>
</table>
</asp:View>
<asp:View ID="vwBase" runat="server">
</asp:View>
<asp:View ID="vwMedioAereo" runat="server">
</asp:View>
<asp:View ID="vwMedioTerrestre" runat="server">
</asp:View>
<asp:View ID="vwBrigada" runat="server">
</asp:View>
</asp:MultiView>
</div>
<div runat="server" id="DivBases"
style="float:right; width:20%; background-color:#D4E6EA;">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TreeView ID="tvwBases" runat="server" NodeIndent="10" ShowCheckBoxes="Leaf"
ToolTip="Bases y medios"
onselectednodechanged="tvwBases_SelectedNodeChanged"
ontreenodecheckchanged="tvwBases_TreeNodeCheckChanged">
<ParentNodeStyle Font-Bold="True" Font-Names="Arial Narrow" Font-Size="Large" />
<LevelStyles>
<asp:TreeNodeStyle Font-Names="Arial Narrow" Font-Size="Medium"
Font-Underline="False" />
</LevelStyles>
<RootNodeStyle Font-Bold="True" Font-Names="Arial Narrow" Font-Size="20pt"
Font-Italic="False" Font-Strikeout="False" />
<NodeStyle HorizontalPadding="10px" Font-Bold="False" />
<LeafNodeStyle Font-Bold="False" Font-Names="Arial Narrow"
Font-Overline="False" Font-Size="Small" Font-Strikeout="False" />
</asp:TreeView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="TimerBases" EventName="Tick" />
<asp:AsyncPostBackTrigger ControlID="tvwBases"
EventName="TreeNodeCheckChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
<!--PIE-->
<div id="DivNoticias" style="background-color:Teal; clear:left; width: 100%; position:absolute; height:20px; border: solid 1px red;" runat="server">
<asp:UpdatePanel ID="UpdatePanelNoticias" runat="server">
</asp:UpdatePanel>
</div>
</div>
<asp:Timer ID="TimerBases" runat="server" Interval="10000"
ontick="TimerBases_Tick">
</asp:Timer>
<asp:Timer ID="TimerIncendios" runat="server" Interval="10000"
ontick="TimerIncendios_Tick">
</asp:Timer>
</form>
</body>
</html>
Lo que yo he usado con anterioridad, aunque no es la forma mas prolija de hacerlo es esto:
<script>
    var sw = screen.width;
    if(sw > 760){
        difsw = (sw - 760)/2 + 'px';
    }
    else{
        difsw = 0;
    }
    document.getElementById('outer-wrapper').style.marginLeft = difsw;
</script>
Reemplaza el outer-wrapper, for la id de la div que quieres cambiar el margin.
Gracias Marcelo, me ha orientado, debiera conocer el ancho de los dos div que tengo a ambos lados pero al ser dinámicos (utilizan %) el valor width no devuelve nada.
No obstante muchas gracias por tu interés y tiempo.
Un fuerte abrazo. Javier.

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas

Mover foco en registros de un formulario

Estaría interesado en saber que evento he de realizar para que en un formulario, le de doble clic a un campo y que se vaya a otro con el mismo número o código. Ejemplo de la imagen, si en el campo “recicladopor” doy doble clic en el registro con...
3 respuestas

Cómo puedo hacer para que me imprima 4 formularios en diferentes ficheros php en un solo botón imprimir

Ayudaaaaaaaaaaaaa se me hace muy difícil hacer esto, no encuentro
1 respuesta

Como contar like y seguidores de redes sociales

Ojala se encuentren todo muy bien, les escribo esta vez por que desea contabilizar los like de una fan page de facebook, los seguidores en twitter, los suscriptores en google plus y youtube. Ya tengo como contar los de face, pero no encuentro...
2 respuestas

Encontrar la página index.html

Estoy empezando con programación en html, css y js, fundamentalmente para poderme corregir la web que tengo que está bastante mal. Cuando voy al inspector en mi web, encuentro en la página de inicio que pone "Indice" pero soy incapaz de encontrar esa...
1 respuesta

Calcular Mantenimiento preventivo de automóvil

Antes que nada hola a todos!. Bueno hoy tengo un pequeño problema a resolver con un programa que se me solicito desarrollar en php. Por ejemplo a cada automóvil se le debe realizar mantenimiento a los 10, 000 Km. Y mandar una notificación o alerta de...
2 respuestas

Es posible utilizar la página desde el navegador Opera

Utilizo la consulta para comentar que aquellas personas que para responder o publicar consultas tengan problemas con Firefox o Chrome, (soy una de ellas), pueden utilizar el navegador Opera, con el sí es posible responder mensajes y abrir temas....
2 respuestas

Detectar el modo oscuro al abrir una página y luego cambiar según preferencia del usuario

Tengo una web en la que mediante hacer click en un botón cambia entre modo dark y light llamando a una función js siguiente: const setTheme = (theme) => { document.documentElement.className=theme; localStorage.setItem('theme', theme); } const...
1 respuesta

Agregar / eliminar elementos con javascript

Tengo una lista de elementos que se deben filtrar conforme se va escribiendo en un campo de texto, en caso de que no aparezca en la lista filtrada que los pueda añadir, y en caso que si aparezca añadirlo por medio de doble click, Ya tengo la parte...
2 respuestas

Como se multiplica a partir de un texto?

En EXCEL, quiero que en la celda A1 se multiplique automáticamente el 4% del valor que aparece en la celda B1, esto cuando la celda C1 contenga la palabra FACTURA.
2 respuestas

Soy nuevo en programador web ¿Cómo hago esto?

Es algo difícil de preguntar para mi, vean la imagen, donde dice todo expertos, cuando lo presionamos, nos lleva a la página principal, ¿Cierto?, ese mismo efecto me gustaría tener en mi página web, pero hasta ahora no pillo respuestas en la web, te...
3 respuestas