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>
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"-->
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%;
}
Fecha de publicación: 2007/05/06
Son tres las DTD de HTML: Strict, Transitional y Frameset.
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.
Primer paso:
Segundo paso: Concatenación de los tres valores que se han obtenido (abc): si a=1 b=2 y c=0, se obtiene 120.
* {} /* 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.
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; }
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:
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:
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:
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;
}