Outbook

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

Datos de búsqueda

Archive for mayo, 2007

HTML-CSS: Listas multicolumna (1)

Fecha de publicación: 2007/05/30

Existe un método muy sencillo para crear una lista que se muestre en varias columnas, con el inconveniente de que no siempre funciona bien en Internet Explorer, como en este caso, pero creo que la idea es interesante.

En los elementos de lista (LI) se insertará una clase (class="colx", donde x es el número de columna) que indica en que columna se sitúa, y en el primer elemento de la columna otra clase que indique el comienzo de la columna (en este caso son 17 elementos de lista en 3 columnas):

<ul>
 <li class="col1">Elemento de lista 12</li>
 <li class="col1">Elemento de lista 2</li>
 <li class="col1">Elemento de lista 3</li>
 <li class="col1">Elemento de lista 4</li>
 <li class="col1">Elemento de lista 5</li>
 <li class="col1">Elemento de lista 6</li>
 <li class="col2 sube">Elemento de lista 7</li>
 <li class="col2">Elemento de lista 8</li>
 <li class="col2">Elemento de lista 9</li>
 <li class="col2">Elemento de lista 10</li>
 <li class="col2">Elemento de lista 11</li>
 <li class="col2">Elemento de lista 12</li>
 <li class="col3 sube">Elemento de lista 13</li>
 <li class="col3">Elemento de lista 14</li>
 <li class="col3">Elemento de lista 15</li>
 <li class="col3">Elemento de lista 16</li>
 <li class="col3">Elemento de lista 17</li>
</ul>

Y ahora el CSS. Se le puede dar una anchura al elemento UL, en este caso 630px. Ahora ese ancho hay que repartirlo entre las columnas, a las que se le dará 200px, después de quitarles 5px en cada lado para separarlas unas de otras. Ahora hay que dar altura, 16px, con un line-height. A cada columna, definida por las clases de los elementos LI, se le define un margen izquierdo, estrechamente relacionado con las anchuras de los UL y LI. El primer LI de cada columna lleva una clase a la que se le dará un margin-topnegativo equivalente a la altura de cada columna, para que todas ellas queden a la misma altura: 96px (16px por los 6 elementos de lista LI en cada columna).

Código CSS

ul {width:630px;}
ul li {width:200px;margin:0 5px;line-height:16px;}
ul li.col1 {margin-left:0;}
ul li.col2 {margin-left:210px;}
ul li.col3 {margin-left:420px;}
ul li.sube {margin-top:-96px;}

Ver ejemplo

La limitación de este método es que se ha definido una altura de línea en los elementos de lista (LI), lo cual hace que la clase sube pierda su eefectividad en caso de que uno de dichos elementos de lista tenga más de una línea.

Referencia y enlaces relacionados

Datos del artículo:

HTML: abreviaturas en los encabezados de tabla

Fecha de publicación: 2007/05/16

Cuando el contenido de un encabezado de tabla (TH) es muy extenso se puede recurrir a su abreviatura, mediante el atributo abbr.

Esta técnica tiene sentido para los usuarios que utilizan lectores de pantalla, ya que dichos lectores repiten el contenido de los encabezados de tabla al referirse a una celda asociado a los mismos.

Ejemplo de tabla accesible con abreviaturas en los encabezados de tabla (la tabla la he tomado prestada de 456 Berea St.):

<table summary="Número de empleados y años de fundación de
 empresas ficticias.">
 <caption>Tabla 1: Datos de las empresas</caption>
 <tr>
  <th abbr="Empresa">Nombre de la empresa</th>
  <th abbr="Empleados">Número de empleados</th>
  <th abbr="Fundación">Año de fundación</th>
 </tr>
 <tr>
  <td>ACME Inc</td>
  <td>1000</td>
  <td>1947</td>
 </tr>
 <tr>
  <td>Compañía XYZ</td>
  <td>2000</td>
  <td>1973</td>
 </tr>
</table>

Referencias y enlaces relacionados

Datos del artículo:

ASP: include

Fecha de publicación: 2007/05/11

Es muy sencillo crear inclusión de archivos en ASP mediante include. En primer lugar hay que distinguir dos tipos de include:

  • virtual: para rutas absolutas. Si la ruta del archivo que se quiere incluir es http://www.sitio.net/archivos/archivo.asp, habrá que especificar esa misma ruta sin el dominio: /archivos/archivo.asp.
  • file: para rutas relativas.

Ejemplos:

<!--#include virtual = "/archivos/archivo.asp"-->
<!--#include file = "../archivo.asp"-->

Enlaces relacionados

Datos del artículo:

CSS: centrado vertical

Fecha de publicación: 2007/05/07

Supongamos que tenemos un párrafo (elemento P) dentro de una capa (elemento DIV) y quueremos una alineación vertical centrada para el párrafo dentro de esa capa.

Existe una solución con CSS: display:table;. Pero tiene el problema habitual de CSS: el excelente soporte de CSS en Internet Explorer, que, para variar, no es compatible con display:table;.

Pero utilizando algunos hacks CSS y metiendo una capa adicional se puede dar solución al centrado vertical, manteniendo compatibilidad con la mayor parte de los navegadores.

Este sería el HTML:

<div class="t1">
 <div class="t2">
  <p>Párrafo a centrar</p>
 </div>
</div>

Y este el CSS:

div.t1 {
 height:12em; /*Altura de la capa*/
 overflow:hidden;
 position:relative;
}

html>/**/body div.t1 {
 display:table;
 position:static;
}

div.t2 {
 position:absolute;
 top:50%;
}
html>/**/body div.t2 {
 display:table-cell;
 position:static;
 vertical-align:middle;
}

p {
 position:relative;
 top:-50%;
}

Ver un ejemplo

Referencias y enlaces relacionados

Datos del artículo:

HTML: diferencias entre las DTD

Fecha de publicación: 2007/05/06

Son tres las DTD de HTML: Strict, Transitional y Frameset.

  • Strict (HTML 4.01 Strict): es la de uso recomendado, destinada a separación de presentación y contenido.
  • Transitional (HTML 4.01 Transitional): esta DTD permite el uso de elementos obsoletos, para documentos que no tengan una total separación de presentación y contenido.
  • Frameset (HTML 4.01 Frameset): para páginas con marcos. De todas formas los marcos son obsoletos.

Referencias y enlaces relacionados

Datos del artículo:

CSS: Especificidad de los selectores

Fecha de publicación: 2007/05/03

La especificidad es muy útil para evitar el valor !important dentro de las propiedades CSS o tener que poner unas reglas forzosamente después de otras para que, de ese modo, puedan ser aplicadas.

Como calcular la especificidad de los selectores

Primer paso:

  • Contar el número de atributos ID en el selector (=a).
  • Contar el número de otros atributos y de pseudo-clases en el selector (=b).
  • Contar el número de nombres de elementos en el selector (=c).
  • Ignorar pseudo-elementos.

Segundo paso: Concatenación de los tres valores que se han obtenido (abc): si a=1 b=2 y c=0, se obtiene 120.

El ejemplo que da el W3C:

* {} /* a=0 b=0 c=0 -> specificity = 0 */

LI {} /* a=0 b=0 c=1 -> specificity = 1 */

UL LI {} /* a=0 b=0 c=2 -> specificity = 2 */

UL OL+LI {} /* a=0 b=0 c=3 -> specificity = 3 */

H1 + *[REL=up]{} /* a=0 b=1 c=1 -> specificity = 11 */

UL OL LI.red {} /* a=0 b=1 c=3 -> specificity = 13 */

LI.red.level {} /* a=0 b=2 c=1 -> specificity = 21 */

#x34y {} /* a=1 b=0 c=0 -> specificity = 100 */

Un ejemplo:

p => a=0 b=0 c=1 => 1
p.clase => a=0 b=1 c=1 => 11
#identificador p.clase => a=1 b=1 c=1 => 111

Y el que de el número más alto es el más específico y el que se acaba aplicando. Si dos selectores tienen la misma especificidad tiene preferencia el que esté después del otro en el archivo CSS.

Ejemplos

En este caso, al ser igual de específicos se aplica el segundo, ya que va después:

p { color: pink; }
p { color: lime; }

En este caso se aplica el primero, que es más específico:

div p { color: pink; }
p { color: lime; }

Referencias y enlaces relacionados:

Datos del artículo:

CSS: background-position ¿Qué orden llevan los valores?

Fecha de publicación: 2007/05/03

Cuando se ponen dos valores numéricos pueden surgir dudas de cual es el vertical y cual el horizontal:

background-position: X Y;

La X sería el valor horizontal, y la Y el valor vertical. Siempre que sean medidas con valores numéricos.

Si se trata de valores no numéricos (left, right, bottom, top) da igual el orden.

Saber más:

Datos del artículo:

CSS Sprites: rollover utilizando una sola imagen

Fecha de publicación: 2007/05/01

Actualizado 18 septiembre 2007

A veces para un elemento se define un fondo que cambia según el estado de dicho elemento.

¿Varios fondos suponen varias imágenes? No.

Pongamos por ejemplo un listado de enlaces en una barra de navegación vertical, en la que los enlaces de los elementos de lista (li) tienen tres fondos distintos:

  • El fondo de estado normal.
  • El fondo para estado hover (cuando se pasa sobre el enlace).
  • Y el fondo para el elemento de lista correspondiente a la página que se visualiza en este momento.

Se pueden crear esos fondos por separado, de forma que al cargar la página solo se descargarán el primer y el tercer fondo. El del estado hover se descargará cuando algún enlace sufra ese estado, por lo que al pasar el puntero sobre un enlace con ese fondo para el estado hover, el fondo no aparecerá de inmediato.

O se puede crear una imagen que contenga al mismo tiempo todos los fondos. Antes había tres reglas CSS para definir los fondos de los enlaces de los elementos de lista, y ahora también, con la diferencia que se pondrá la misma imagen en las tres reglas. La diferencia estará en el posicionamiento del fondo. Con la propiedad background-position (o en background) se seleccionará que parte de la imagen se mostrará como fondo. ¿Como? Jugando con posiciones negativas.

La imagen utilizada:

Imagen de ejemplo CSS sprites

Este es el XHMTL utilizado para la lista:

<ul>
 <li><a href="#">Opción 1</a></li>
 <li class="seleccionado"><a href="#">Opción 2</a></li>
 <li><a href="#">Opción 3</a></li>
 <li><a href="#">Opción 4</a></li>
 <li><a href="#">Opción 5</a></li>
</ul>

Y este el CSS:

ul {
list-style:none;
width:160px;
}

ul li a {
display:block;
width:142px;
height:18px;
line-height:18px;
padding-left:18px;
text-decoration:none;
background:#D4DDED url(bg_css_sprites.gif) no-repeat 0 0;
color:#003596;
font-weight:bold;
font-family:verdana,arial,sans-serif;
font-size:12px;
}

ul li.seleccionado a {
background:#CCE5A2 url(bg_css_sprites.gif) no-repeat 0 -18px;
color:#4A601C;
}

ul li a:hover {
background:#F8A1BE url(bg_css_sprites.gif) no-repeat 0 -36px;
color:#762938;
}

Ver ejemplo de CSS sprites.

Referencias y enlaces relacionados

CSS sprites

Recursos de apoyo

Datos del artículo:

Información del sitio

Outbook está basado en WordPress

Licencia Reconocimiento-NoComercial-CompartirIgual

Feed RSS: