Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Datos de búsqueda

Archive for Agosto, 2007

HTML: el elemento COLGROUP

Fecha de publicación: 2007/08/31

El elemento COLGROUP tiene como objetivo crear grupos de columnas dentro de una tabla y hacer que todas las columnas que agrupe compartan los atributos definidos en este elemento.

En primer lugar veamos donde se coloca el elemento COLGROUP dentro de la tabla:

<table>
 <colgroup>
  ...
 </colgroup>
 <thead>
  ...
 </thead>
 <tbody>
  ...
 </tbody>
</table>

Como puede observarse se debe colocar tras la etiqueta de apertura del elemento TABLE.

Es en el propio elemento COLGROUP donde se define el número de columnas mediante el atributo span. En el siguiente ejemplo se puede observar un grupo de columnas compuesto por 10 columnas:

<colgroup span="10"></colgroup>

En el siguiente ejemplo hay 4 columnas, todas con la misma anchura:

<colgroup>
 <col width="25%">
 <col width="25%">
 <col width="25%">
 <col width="25%">
</colgroup>

Puesto que todas tienen la misma anchura sería mejor definir el atributo de anchura (width) en el elemento COLGROUP en lugar de hacerlo en COL, añadiendo además el atributo span para especificar la cantidad de columnas:

<colgroup span="4" width="25%"></colgroup>

Otro ejemplo:

<colgroup>
 <col width="20%">
 <col width="20%">
 <col width="25%">
 <col width="35%">
</colgroup>

En este caso la solución adecuada sería la separación en dos grupos:

<colgroup span="2" width="20%"></colgroup>
<colgroup>
 <col width="25%">
 <col width="35%">
</colgroup>

Enlaces relacionados

Datos del artículo:

Anchura de la página, barra de scroll vertical y fuente de sistema

Fecha de publicación: 2007/08/28

Cuando se crea un sitio siempre se tiene en cuenta una resolución de pantalla mínima (generalmente 800×600 o 1024×768) a la que se verá sin que salga la molesta barra de scroll horizontal. Siempre se hace la página un poco más estrecha que dicha resolución, debido a que hay que tener en cuenta la anchura de la barra de scroll vertical.

Pero cuando la fuente del sistema es más grande de lo habitual esa barra vertical es más ancha, al menos en Internet Explorer 6, y puede salir la barra horizontal, como en este caso:

Captura de pantalla

La solución parece obvia: dejar un poco más de margen para la barra de scroll vertical, haciendo que la página tenga una anchura menor.

Datos del artículo:

  • Etiquetas:
  • Publicado en categorías: Desarrollo web
  • Comentarios desactivados en Anchura de la página, barra de scroll vertical y fuente de sistema

CSS: Dimensiones y tamaños de fuente en EM

Fecha de publicación: 2007/08/13

El código CSS que se utilizará para obtener la equivalencia es el siguiente:

body, html{font-size: 62.5%;}
body {font-size: 101%;}
html>body {font-size: 100%;}
*:first-child+html body {font-size: 101%;}

Antes de crear ninguna regla la equivalencia de 1em es 16px. Por ello puede resultar un poco complicado hacer los cálculos para montar un CSS con medidas en EM.

Para simplificar el uso de dicha unidad de medida se da al elemento HTML un tamaño de fuente de 62.5%:

body, html{font-size: 62.5%;}

La siguiente cuenta aclara un poco la razón del uso del 62.5%:

(16px/100)*x=10px

Posteriormente se debe dar un tamaño de fuente del 100% al elemento BODY, aunque para Internet Explorer será de 101%, para que le salgan las cuentas:

body {font-size: 101%;}

Para los navegadores restantes si se define un 100% de tamaño de fuente, pero habrá que tirar de hack de selector CSS, para que Internet Explorer no lo pille:

html>body {font-size: 100%;}

Pero como este hack tiene efecto en Internet Explorer 7 hay dos opciones:

  • Cambiar el hack anterior a uno que excluya a todas las versiones de Internet Explorer.
  • Añadir un hack específico para Internet Explorer 7, que es lo que se ha hecho en el código expuesto al principio.

Si se opta por la primera opción, excluir todas las versiones de Internet Explorer 7, se usará esta regla:

html>/**/body {font-size: 100%;}

Y si se opta por el hack de Internet Explorer 7, se utilizará esta otra:

*:first-child+html body {font-size: 101%;}

Este documento está disponible en formato Texto OpenDocument.

Datos del artículo:

CSS: El modelo de caja

Fecha de publicación: 2007/08/11

El modelo de caja se compone de las siguientes propiedades:

  • width: la anchura del elemento.
  • padding: el relleno del elemento.
  • border: el borde del elemento.
  • margin: el margen del elemento.

Y viene a ser algo así:

Modelo de caja en CSS

O así (imagen de Wikipedia):

Modelo de caja

Un ejemplo

Supongamos que tenemos un elemento DIV que deba tener una anchura total de 600 píxeles, un margen respecto a otros elementos de 10 píxeles por sus cuatro lados, un borde de 3 píxeles y un relleno de 20 píxeles.

Al especificar la propiedad width habrá que dar 600px para Internet Explorer 5.5, pero para el resto de navegadores habrá que restar el los rellenos (padding) y los bordes (border): hay que restar a los 600px de ancho los 3px de borde izquierdo, los 20 px de relleno izquierdo, los 20px de relleno derecho y los 3px de borde derecho. Quedarían 554px.

Y la duda que probablemente surja es: ¿como especifico en una misma regla CSS la anchura para IE 5.5 y la anchura para el resto de navegadores? Muy sencillo. Así quedaría la regla CSS:

div {
 width:600px;
 width:554px;
 padding:20px;
 border:3px solid #000000;
 margin:10px;
}

Como se puede observar hay dos anchuras definidas: primero la de IE 5.5, y después la del resto de navegadores con una barra invertida que IE 5.5 no es capaz de leer, pero que si pueden leer el resto, y que deja inutilizada la anchura de IE 5.5.

Para la altura sirve el mismo procedimiento, solo que la barra invertida se posiciona tras el segundo caracter de la propiedad: height.

Esto también se da en el modo chapuzas de IE6 y de IE7.

Actualizado 2007-09-17.

Relacionados

Enlaces externos:

Datos del artículo:

Solución al apagado lento de Windows XP

Fecha de publicación: 2007/08/03

A veces la cantidad de tiempo que tarda Windows XP en apagarse o reiniciarse es exasperante. Pero Microsoft nos da la solución:

Apagado rápido de Windows XP

P. Si le parece excesivo el tiempo que tarda Windows Xp para apagar el equipo, vamos a agilizar el proceso de apagado:

R.

  • Ejecutamos regedit.
  • Entramos luego hasta el nivel HKEY_CURRENT_USER -> Control Panel -> Desktop localizando allí la clave “WaitToKillAppTimeout” hacemos doble clic sobre ella. A continuación cambiamos el valor de 20.000 (que ya trae por defecto) por el de 4.000.
  • Ahora, y sin salir del editor, accedemos a HKEY_LOCAL_MACHINE -> System -> CurrentControlSet-> Control, para localizar de nuevo la clave “WaitToKillAppTimeout” y repitiendo la misma operación de antes cambiamos el valor de 20.000 a 4.000.

Ahora nuestro windows esperará menos tiempo para cancelar una aplicación cuando no responde y se cerrará el sistema mucho más rápido.

El problema de la tardanza del apagado viene dada por que el sistema espera a que algunas aplicaciones se cierren por ellas mismas, y espera un tiempo antes de forzar su cierre. La solución expuesta consiste en reducir el tiempo de espera para forzar ese cierre.

¿Tanto les cuesta sacar un parche o una actualización que permita hacer esto desde el Panel de Control?

Datos del artículo:

Información del sitio