Outbook

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

Datos de búsqueda

Categoría: ‘CSS’

Javascript: establecer el valor de la propiedad float de CSS

Fecha de publicación: 2008/01/25

En Javascript es muy fácil establecer propiedades CSS, como en este ejemplo las propiedades de anchura, color y z-index:

elemento.style.width = '50%';
elemento.style.color = '#0c0';
elemento.style.zIndex = '1';

Pero con la propiedad float no es tan sencillo:

Because the word “float” is already reserved in JavaScript, it’s not possible to access an object’s floatCSS property using style.float. In fact, browsers use different terms for the float property: Internet Explorer uses style.styleFloat, while all other browsers use the W3C-specified style.cssFloat.

La palabra float es una palabra reservada en el lenguaje Javascript, por lo que no se puede usar para definir la propiedad float. Por ello hay que utilizar la siguiente alternativa especificada por la W3C:

elemento.style.cssFloat = 'left';

Pero aun queda un escollo. Internet Explorer (que es muy especial) no soporta esta alternativa, por lo que habrá que usar al mismo tiempo lo siguiente:

elemento.style.styleFloat = 'left';

Saber más

Datos del artículo:

HTML y CSS: diferencias entre clases (class) e identificadores (id)

Fecha de publicación: 2008/01/02

El atributo id

El atributo id sirve para identificar de forma única a un elemento dentro de un documento HTML.

El valor del atributo id de un elemento no puede repetirse en ningún otro atributo id del mismo documento.

El id es la parte del selector CSS que más especificidad CSS da: un valor de 100.

El atributo class

El valor del atributo class puede repetirse cuantas veces sea necesario, incluso puede llevar más de una clase:

class=”claseUnica” -> atributo class con una sola clase
class=”clase1 clase2” -> atributo class con más de una clase

El valor del atributo class no tiene ningún valor identificativo del elemento que lo contiene, únicamente sirve para asociarle los estilos al elemento.

En cuanto a especificidad CSS tiene un valor de 10.

Saber más

Este documento está disponible en formato OpenDocument

Datos del artículo:

CSS3: target-new property

Fecha de publicación: 2007/12/22

The target-new CSS property allows the target of a link to be set to a new window or new tab in the browser. It is equivalent to the target HTML attribute.

It have three possible values

  • window: opens in new window.
  • tab: opens in new tabof browser (the most interesting usage).
  • none.

Example:

div p a {target-new: tab;}

The link which fits the selector will open in new tab.

Know more

  • Original article in spanish: CSS 3: propiedad target-new

    • Datos del artículo:

    CSS 3: propiedad target-new

    Fecha de publicación: 2007/12/05

    La propiedad target-new sirve para definir el destino del enlace a ventana nueva o a nueva pestaña (se podría decir que equivale al atributo target).

    Tiene tres posibles valores:

    • window: abre en una ventana nueva.
    • tab: abre en una nueva pestaña del navegador (quizá la utilidad más interesante de esta propiedad).
    • none.

    Un ejemplo:

    div p a {target-new: tab;}

    El enlace que corresponda al selector del ejemplo abrirá en una nueva pestaña.

    Saber más

    Datos del artículo:

    Cellspacing mediante CSS

    Fecha de publicación: 2007/10/15

    El atributo cellspacing en las tablas HTML es prescndible.

    Supongamos un cellspacing que valga 7px:

    <td cellspacing="7">Contenido de la celda</td>

    En CSS se prescinde del atributo, y se usan las propiedades border-collapse y border-spacing:

    table {
border-collapse: separate;
border-spacing: 7px;
}

    Hacer esto por CSS tiene la ventja de poder definir la separación por arriba, por abajo, a la izquierda y a la derecha:

    table {
border-collapse: separate;
border-spacing: 7px 1px 2px 1px; /*arriba, derecha, abajo, izquierda*/
}

    Enlaces relacionados

    Datos del artículo:

    Enlaces como bloque en Internet Explorer 6

    Fecha de publicación: 2007/10/03

    El problema

    Tengo unos enlaces dentro de elementos de lista, para un menú de navegación.

    Esos enlaces se convierten en bloque mediante CSS, con la propiedad display:block; .

    En Firefox, Opera e Internet Explorer 7 el enlace funciona correctamente, aunque no se pase el puntero por encima del texto de enlace.

    En Internet Explorer 6 hay que pasar el puntero por encima del texto de enlace, en caso contrario el enlace no se activa.

    ul {list-style-type: none; margin:0; padding:0; width:160px;}
ul li {background:#FFFF99; margin-bottom:3px; border-bottom:1px solid #fff;}
ul li a {display:block; padding:4px;}
ul li a:hover {background-color:#FFCC66;}

    La solución

    Darle una anchura fija al enlace:

    ul {list-style-type: none; margin:0; padding:0; width:160px;}
ul li {background:#FFFF99; margin-bottom:3px; border-bottom:1px solid #fff;}
ul li a {display:block; padding:4px;width:160px;width:152px;}
ul li a:hover {background-color:#FFCC66;}

    Ejemplo de funcionamiento

    Atención: el efecto solo se observará en Internet Explorer 6 y anteriores.

    Enlace sin anchura definida

    Enlace con anchura definida

    Datos del artículo:

    CSS sprites (2): posicionamiento de la imagen de fondo

    Fecha de publicación: 2007/09/18

    Este artículo es una ampliación a CSS Sprites: rollover utilizando una sola imagen.

    En el artículo anterior se daban valores negativos para el eje de coordenadas Y en la propiedad CSS background-position. En este caso el valor se puede obtener de la siguiente forma: se resta a la altura total de la imagen la altura del sprite que se quiere ver y la coordenada Y de la propiedad background-position.

    Ejemplo: la altura total de una imagen con 2 sprites es de 100px. Cada sprite tiene una altura de 6px, y el sprite que está inicialmente tiene un background-position:0 4px;. Entonces se hará la siguiente resta: 100px-6px-4px=90. La posición del eje Y que habrá que dar será -90px.

    Datos del artículo:

    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:

    El elemento OL y el atributo start

    Fecha de publicación: 2007/07/18

    En el caso de crear una serie de listas ordenadas que tengan continuidad de una a otra puede ser interesante que algunas empiecen por un número distinto de 1.

    La solución a ese problema es el atributo start en el eelemento OL. Pero resulta que el W3C lo considera fuera de uso, por lo que solo valida para HTML 4.01 Transitional. Esto es lo que dice la referencia HTML acerca del atributo start:

    start = number [CN]
    Deprecated. For OL only. This attribute specifies the starting number of the first item in an ordered list. The default starting number is “1″. Note that while the value of this attribute is an integer, the corresponding label may be non-numeric. Thus, when the list item style is uppercase latin letters (A, B, C, …), start=3 means “C”. When the style is lowercase roman numerals, start=3 means “iii”, etc.

    Se puede hacer por CSS, pero aquí surge el inconveniente de que cuando CSS no esté disponible no se verá la numeración.

    No creo que sea lógico dejar fuera de uso este atributo, ya que se valor podría considerarse semántico, y no solo de presentación. Creo que en W3C no han estado muy acertados al tomar esta decisión.

    Saber más

    Datos del artículo:

    Información del sitio

    Outbook está basado en WordPress

    Licencia Reconocimiento-NoComercial-CompartirIgual

    Feed RSS: