Hola, primero que todo, gracias a quienes me han dado ideas, pero estube un
tanto ocupado como para hacer un extracto de codigo para pegar, y al final
de cuentas, definimos con el cliente que las pantallas que tubieran grillas
más anchas, las dejaríamos una maqueta más acha y punto y fin, ya que no
disponemos de mucho tiempo para hacer las correcciones necesarias para que
sea más flexible.
Intenté las ideas propuestas pero no resultaron, además el sitio debo
hacerlo complatible con el asqueroso IE6.
En cuanto a la maqueta en sí, utilizo divs de ancho fijo de 760px para el
contenedor principal y divs al 100% para las distintas secciones (filas) y
otros divs de ancho fijo flotados a la izquierda de tamaños más pequeños
para crear columnas.
Los estilos son los siguientes, mas otros varios definidos por mi, pero que
no influyen en el problema.
@import url(reset-min.css); /* version reset de YUI */
@import url(fonts-min.css); /* version fonts de YUI */
@import url(grilla.css); /* clases escritas por un compatriota (
http://rgarcia.cl/simple/index.html) */
El layout se basa en grilla.css. Y las tablas (<table>) las tengo en
"tablas.css":
/* estilos para las grillas de resultados */
table {
border-collapse: collapse;
border: 0; /* 1px solid #6588B5;*/
background: #fff;
margin:0;
width:100%;
}
caption {
text-align: center;
font: bold 18px arial, helvetica, sans-serif;
background: transparent;
padding:6px 4px 8px 0px;
color: #03476F;
text-transform: uppercase;
}
td, th {
border: 1px dotted #03476F;
padding: .4em;
color: #363636;
}
thead th, tfoot th {
font: bold 11px verdana, arial, helvetica, sans-serif;
border: 1px solid #5A7BAB;
border-bottom: 0;
text-align: center;
background: #5A7BAB;
color: #FFFFFF;
padding-top:3px;
line-height: 1.5em;
}
tbody th {
font: bold 11px verdana, arial, helvetica, sans-serif;
border: 1px solid #b9cae9;
text-align: left;
background: #b9cae9;
color: #333;
padding-top:3px;
}
tbody td a {
background: transparent;
text-decoration: none;
color: blue;
}
tbody td a:hover {
color: #666;
}
tbody th a {
font: normal 11px verdana, arial, helvetica, sans-serif;
background: transparent;
text-decoration: none;
font-weight:normal;
color: #363636;
}
tbody th, tbody td {
vertical-align: top;
text-align: left;
}
tfoot td {
border: 1px solid #03476F;
background: #4591AD;
padding-top:3px;
color: #FFFFFF;
}
.odd {
background: #d4e0ff;
}
En general el html es:
<html><head> ...imports de css </head>
<body>
<div class="contenedor">
<div class="caja" id="header"> <!-- header --></div>
<div class="caja" id="tabsmenu"> <!-- menu horizontal --></div>
<div class="caja" id="formulario"> <!-- formulario--></div> <div
class="caja" id="botonera"> <!-- botones formulario--></div>
<div class="caja" id="mensajes"> <!-- mensajes --></div>
<div class="caja" id="tabsmenu">
<!-- grillas de resultados-->
<table cellspacing="0" >
<thead>
<tr>
<th colspan="2">Pago Solicitado</th>
<th colspan="3">Pago Realizado</th>
</tr>
</thead>
<tbody>
<tr>
<th>Columna A</th>
<th>Columna B</th>
<th>Columna D</th>
<th>Columna E</th>
</tr>
</tbody>
<tbody>
<tr>
<td>Datos de la celda</td>
<td>Datos de la celda</td>
<td>Datos de la celda</td>
<td><a href="#">Modificar</a> <a href="#">Eliminar</a></td>
</tr>
<tr class="odd">
<td>Datos de la celda</td>
<td>Datos de la celda</td>
<td>Datos de la celda</td>
<td><a href="#">Modificar</a> <a href="#">Eliminar</a></td>
</tr>
<tr>
<td>Datos de la celda</td>
<td>Datos de la celda</td>
<td>Datos de la celda</td>
<td><a href="#">Modificar</a> <a href="#">Eliminar</a></td>
</tr>
<tr class="odd">
<td>Datos de la celda</td>
<td>Datos de la celda</td>
<td>Datos de la celda</td>
<td><a href="#">Modificar</a> <a href="#">Eliminar</a></td>
</tr>
</table>
</div>
<div class="caja" id="tabsmenu"> <!-- pie--></div>
<div>
</body>
</html>
El diseño en sí es bastante sólido, pero cuando las grillas de resultados
son más anchas, dan problema, ya sea que se salen por sobre el contenedor o
se truncan dentro de él. En este caso la tabla tiene 5 columnas, no da
problema, pero hay otras en las cuales hay 12 columnas porque son
cuadraturas de documentos.
En todo caso si alguien se le ocurre cómo solucionar esto de las grillas
gigantes, podriamos tomarlo en cuenta para la proxima.
Gracias y saludos.
----------------------------------------------------------------------------------------
El 9 de abril de 2009 3:48, Jorge Garcia <xurde...@gmail.com> escribió:
> Hola Lista
>
> Me acabo de incorporar a la lista y no lei el principio del mensaje, pero
> si
> el problema es que el DIV contenedor tiene que crecer cuando el contenido
> crezca deberias poner width:auto; y dar width fijo en pixels/ems a lo que
> halla dentro para hacer que el DIV crezca.
>
> Jorge Garcia
> Programador y Maquetador Web Freelance
>
> El 9 de abril de 2009 0:20, 2tonewarrior <2tonewarr...@gmail.com>
> escribió:
>
> > Mas bien una captura y/o el código porque si es un intranet...
> >
> > El 9 de abril de 2009 0:16, Mauricio Dulce <mauricio.du...@gmail.com
> > >escribió:
> >
> > > Puedes poner la url como para ver un poco el codigo
> > > El 8/04/2009, a las 14:59, Phaseolus escribió:
> > >
> > > > ..mmm no resulta...
> > > >
> > > > Alguna otra idea???
> > > >
> > > >
> > > > ----------------------
> > > > El 8 de abril de 2009 9:46, 2tonewarrior <2tonewarr...@gmail.com>
> > > > escribió:
> > > >
> > > >> No me hagas mucho caso porque no soy aun nun poco novato en esto
> > > >> pero, se
> > > >> podria solucionar quizas poniendo medida relativas? En vez de px por
> > > >> ejemplo
> > > >> %
> > > >>
> > > >> Saludos
> > > >>
> > > >> El 8 de abril de 2009 15:40, Phaseolus <phaseol...@yahoo.es>
> > > >> escribió:
> > > >>
> > > >>> Que tal Ovillo.
> > > >>>
> > > >>> Tengo un diseño en una intranet (unas 30 pantallas) en el cual el
> > > >>> 80% son
> > > >>> grillas de resultados de distintos anchos y cantidad de columnas;
> al
> > > >> menos
> > > >>> 10 de ellas sobrepasan el ancho del div principal (maqueta) por lo
> > > >>> que se
> > > >>> salen rompiendo el diseño.
> > > >>> Si maquetara con tablas el problema desaparece porque la tabla
> > > >> contenedora
> > > >>> se ajusta al contenido(grilla) si este es más ancho, pero con divs
> > > >>> no
> > > >> puedo
> > > >>> lograr el mismo efecto.
> > > >>>
> > > >>> Alguna idea de cómo salvar esto?
> > > >>>
> > > >>> El layout es el tipico que considera header, body y footer a 780px
> > > >>> compatible con IE6 y otros y en el body bajo la botonera se
> > > >>> despliega una
> > > >>> grilla de resultados.
> > > >>> Saludos y gracias de antemano.
> > > >>>
> > > >>>
> > > >>> _______________________________________________
> > > >>> Lista de distribución Ovillo
> > > >>> Para escribir a la lista, envia un correo a
> Ovillo@lists.ovillo.org
> > > >>> Puedes modificar tus datos o desuscribirte en la siguiente
> > > >>> dirección:
> > > >>> http://lists.ovillo.org/mailman/listinfo/ovillo
> > > >>>
> > > >> _______________________________________________
> > > >> Lista de distribución Ovillo
> > > >> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> > > >> Puedes modificar tus datos o desuscribirte en la siguiente
> dirección:
> > > >> http://lists.ovillo.org/mailman/listinfo/ovillo
> > > >>
> > > > _______________________________________________
> > > > Lista de distribución Ovillo
> > > > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> > > > Puedes modificar tus datos o desuscribirte en la siguiente
> > > > dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
> > >
> > > _______________________________________________
> > > Lista de distribución Ovillo
> > > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> > > Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> > > http://lists.ovillo.org/mailman/listinfo/ovillo
> > >
> > _______________________________________________
> > Lista de distribución Ovillo
> > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> > Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> > http://lists.ovillo.org/mailman/listinfo/ovillo
> >
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
