English to Spanish Translation by Trusted Translations, Inc.

Otras Traducciones de W3 en Spanish Translator Services

Este documento es una traducción del tutorial "A confetti menu" propiedad de Bert Bos publicado en el sitio de W3C.

La versión en inglés de esta especificación es la única con valor normativo y puede encontrarse en: http://www.w3.org/Style/Examples/007/maps.html

Hojas de estilo para la Web
Trucos y sugerencias para CSS

(Esta página usa hojas de estilo CSS)

Un menú de fantasía

El colorido menú que aparece más abajo no es más que un elemento DIV con unos pocos elementos P en su interior. El efecto visual se debe al hecho de que cada elemento P está posicionado individualmente y tiene asignados su fuente y su color propios. Esto funciona mejor con textos breves, ya que el efecto visual se basa en la superposición, pero si el texto es demasiado largo, se superpone tanto que se vuelve difícil de leer.

La hoja de estilo permite un menú formado por hasta 10 elementos, y el ejemplo anterior usa 8. El código fuente HTML del ejemplo anterior es éste:

<div class="map">
<p id="p1"><a href="http://www.w3.org/Style/CSS/#news">¿Qué hay de nuevo?</a>
<p id="p2"><a href="http://www.w3.org/Style/CSS/#learn">Aprender CSS</a>
<p id="p3"><a href="http://www.w3.org/Style/CSS/#browsers">Navegadores con CSS</a>
<p id="p4"><a href="http://www.w3.org/Style/CSS/#editors">Herramientas de creación</a>
<p id="p10"><a href="http://www.w3.org/Style/CSS/#specs">Especificaciones</a>
<p id="p6"><a href="http://www.w3.org/Style/CSS/Test">Suite de prueba CSS1</a>
<p id="p9"><a href="/StyleSheets/Core">Estilos básicos del W3C</a>
<p id="p8"><a href="http://jigsaw.w3.org/css-validator/">Validador CSS</a>
</div>

Obsérvese que el elemento DIV tiene asignada la clase "map" (lo que lo convierte en un contenedor para el menú) y los atributos ID de los elementos P. Los elementos P deben tener un ID (diferente) cada uno: p1, p2, ..., p10. No es necesario usar los ID en orden (como muestra el ejemplo). Para usar la hoja de estilo, puede copiarla en su propia hoja de estilo o usar la directiva @import o un elemento LINK para importar map.css directamente desde el sitio del W3C: ya sea

@import "http://www.w3.org/Style/map.css";

o si no

<link rel="stylesheet" href="http://www.w3.org/Style/map.css">

Explicación de la hoja de estilo

El modo en que funciona la hoja de estilo es el siguiente. Comienza por definir un elemento DIV cuya clase es "map". Crea un espacio de 190 píxeles de altura, dentro del cual se ubicarán los contenidos de los elementos P. A continuación, se asigna color y fuente a cada uno de los elementos, con ID entre p1 y p10, y se ubica cada uno de los elementos dentro del espacio creado por el DIV, por medio de la propiedad "margin": un margen superior negativo mueve el elemento hacia arriba dentro del espacio del DIV, mientras que un margen inferior positivo asegura que el próximo elemento vuelva a comenzar en el límite inferior del DIV.

(La debilidad de la hoja de estilo es que mide todas las distancias en píxeles. Si lo desea, puede modificarla para que use porcentajes, siempre que su navegador implemente CSS lo bastante bien).

DIV.map {                        /* Reservar algo de espacio para los enlaces */
  padding-top: 190px;
  margin-left: -2em;             /* Adapte esto a su página web... */
  margin-right: -2em;             /* Adapte esto a su página web... */
  margin-bottom: 4em;
  margin-top: 5em;
  clear: both;
  text-shadow: 0.2em 0.2em /* 0.2em */ silver }

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  white-space: nowrap }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
  text-decoration: none }

#p1, #p1 A   {color: #DDD; font: 100px/1 Impact, Helvetica Narrow, sans-serif}
#p2, #p2 A   {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A   {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A   {color: #37F; font: bold 40px/1 Courier New, Courier, monospace}
#p5, #p5 A   {color: #F73; font: bold 100px/1 "Verdana", sans-serif}
#p6, #p6 A   {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A   {color: #088; font: italic 80px/1 "Verdana", sans-serif}
#p8, #p8 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p9, #p9 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p10, #p10 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}

#p1  {text-align: right;  margin: -185px 0 85px 0}    /* arriba a la derecha */
#p2  {text-align: left;   margin: -190px 0 150px 5%}  /* arriba a la izquierda */
#p3  {text-align: right;  margin: -90px 35% 50px 0}   /* centro */
#p4  {text-align: right;  margin: -95px 0 55px 0}     /* centro a la derecha */
#p5  {text-align: left;   margin: -130px 0 30px 0}    /* centro a la izquierda */
#p6  {text-align: left;   margin: -40px 0 15px 35%}   /* abajo al centro */
#p7  {text-align: right;  margin: -80px 0 0px 0}    /* abajo a la derecha */
#p5  {text-align: left;   margin: -40px 0 20px 3%}    /* abajo a la izquierda */
#p9  {text-align: right;  margin: -25px 0 5px 0}      /* abajo a la derecha */
#p10 {text-align: left;   margin: -130px 0 70px 0}    /* centro a la izquierda */

Por supuesto, usted puede cambiar la hoja de estilo y probar fuentes, colores y posiciones diferentes, o crear otras reglas de estilo para más de 10 elementos. Además, observe los márgenes izquierdo y derecho del DIV: los hemos hecho negativos, de modo que el menú es más ancho que el texto circundante; pero en su página el margen tal vez no sea suficientemente ancho para esto, en cuyo caso quizá deba eliminar estas reglas.

Si prueba esta hoja de estilo, tal vez observe que no funciona muy bien en Netscape 4. Por supuesto, la culpa es de Netscape 4. No obstante ello, map-ns.css es una hoja de estilo similar que parece funcionar bien en el navegador mencionado. El truco siguiente, en el encabezado del documento HTML, permitirá que coexistan las dos versiones (la que es para Netscape 4 y la que se muestra más arriba, para navegadores que implementan mejor CSS):

<link href="map-ns.css" rel="stylesheet" type="text/css">
<link href="map.css" rel="stylesheet" type="text/css" media="all">

Los navegadores con implementaciones de CSS correctas leerán ambas hojas de estilo, pero las reglas de la segunda anulan las de la primera, de modo que (con la excepción de un poco de trabajo innecesario) no hay cambios. Pero Netscape 4 no cargará la segunda hoja de estilo, debido a la presencia del atributo "media", que no comprende.

Además, usted tal vez se pregunte por qué los elementos se ubican por medio de márgenes (negativos), cuando éste parece ser un candidato óptimo para las propiedades de posicionamiento absoluto. De hecho, se puede hacer lo mismo con "position", "left" y "right". La razón por la que en esta hoja de estilos se usan márgenes es que así funcionará también en navegadores que sólo implementen CSS1.

CSS ¡CSS válido!¡HTML 4.0 válido!

Bert Bos
creado el 5 de mayo de 2001;
última actualización $Date: 2007/01/15 13:13:05 $ GMT