Página Inicial de WebUsable

Página anterior Página Inicial de WebUsable Disminuir tamaño de letra Aumentar tamaño de letra Mapa de WebUsable Envía tus comentarios
 

 Ejemplos y trucos útiles con CSS's

(Alguno de los ejemplos sólo funcionan en Internet Explorer)

Temas relacionados: DHTML y CSS's | Tabla de Referencia de CSS's | Tablas y CSS's

Contenido:
  1. Botones
  2. Äreas de trabajo
  3. Variaciones en los textos
    1. 3.1 Simulación de sombras
    2. 3.2 Resaltados
    3. 3.3 Cambios de enfoque
    4. 3.4 Enmarcados
  4. Menús de navegación
    1. 4.1 Barra de Opciones con Rollover
    2. 4.2 Barra de Opciones con Rollover y Opción Seleccionada
    3. 4.3 Menú Dinámico Multinivel
  5. Barras de Herramientas
    1. 5.1 Barra de Iconos con Rollover
    2. 5.2 Barra de Iconos con Opciones Subordinadas
    3. 5.3 Barra de Iconos con Rollover y Opción Seleccionada
  6. Posicionamiento de objetos
    1. 6.1 Posicionamiento flotante
    2. 6.2 Contenedor contenido
    3. 6.3 Superposición de capas
  7. Ocultar objetos
    1. 7.1 Ayuda de contexto
    2. 7.2 Simulación de ventanas Pop-up

  1. Botones
  2. Äreas de trabajo
  3. Variaciones en los textos
  4. Menús de navegación
  5. Barras de Herramientas

  6. Posicionamiento de objetos

    1. 6.1 Posicionamiento flotante:

      Ya hemos visto posicionamiento de "layers" al trabajar con el Menú Dinámico Multinivel. Sin embargo, en este caso utilizabamos posicionamientos relativos.

      Utilizar capas flotantes mediante la propiedad float puede ser muy sencillo y cómodo en determinados casos. No permite la misma flexibilidad que la propiedad position pero tiene la ventaja que es muy sencilla de usar. Veamos el siguiente ejemplo:

       
      Usabilidad
      		  
        Más sitios útiles  
           

      En este caso hemos utilizado la propiedad float para colocar el icono de flechas de "más enlaces" a la derecha de la última opción de navegación sin necesidad de complicar la estructura de la "Tabla de opciones". Veamos como lo hemos implementado:

      Apuntamos las clases con las que hemos construído el Menú de Opciones de Navegación:

      .RecAreaTopLeft {background-image:url(../images/RecAreaTopLeft.gif);background-repeat:no-repeat;line-height: 12px;}
      .RecAreaTopRight {background-image:url(../images/RecAreaTopRight.gif);background-repeat:no-repeat;line-height: 12px;}
      .RecAreaBottomLeft {background-image:url(../images/RecAreaBottomLeft.gif);background-repeat:no-repeat;line-height: 12px;}
      .RecAreaBottomRight {background-image:url(../images/RecAreaBottomRight.gif);background-repeat:no-repeat;line-height: 12px;}
      .RecAreaShiftLeft {background-image:url(../images/RecAreaShiftLeft.gif);background-repeat:repeat-y;width: 12px;}
      .RecAreaShiftRight {background-image:url(../images/RecAreaShiftRight.gif);background-repeat:repeat-y;width: 12px;}
      .RecAreaShiftTop {background-image:url(../images/RecAreaShiftTop.gif);background-repeat:repeat-x;heigth: 12px;}
      .RecAreaShiftBottom {background-image:url(../images/RecAreaShiftBottom.gif);background-repeat:repeat-x;heigth: 12px;}
      .RecAreaTable {background: #1D4C55;color:#FFFFFF;padding: 3px;font-weight:normal;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;}
      .squareHeader {width: 162px;height: 17px;background: #FCBE00;color:#000000;font-weight:bold;font-size: 10px;cursor: hand;border: groove 2px #CFCCAE;text-indent: 8px;font-family: verdana,arial,helvetica,sans-serif;}
      ul.RecAreaList {list-style-type: none;list-style-position: outside;color:#FFFFFF;text-indent: -50px;font-weight: normal;font-size:10px;margin-bottom: -2px;margin-top: -4px;font-family:verdana, arial, helvetica, sans-serif;}

      Y las pseudo-clases de los Hipertextos de Navegación:

      a.textLink:link {color:#FFFFFF;cursor: hand;font-weight: normal;font-size:11px;text-decoration: none;font-family: arial,helvetica,sans-serif;}
      a.textLink:hover {color:#FCE200;cursor: hand;font-weight: normal;font-size:11px;text-decoration: none;font-family: arial,helvetica,sans-serif;}
      a.textLink:active {color:#FFFFFF;cursor: hand;font-weight: normal;font-size:11px;text-decoration: none;font-family: arial,helvetica,sans-serif;}
      a.textLink:visited {color:#FFFFFF;cursor: hand;font-weight: normal;font-size:11px;text-decoration: none;font-family: arial,helvetica,sans-serif;}

      A nivel decorativo incluímos una función Javascript típica para cambiar las imágenes-marcadores de los hiperenlaces:

      imagenes = new Array(8);
      for (i=0; i<8; i++) imagenes[i]=new Image();
      imagenes[6].src="images/RecList1.gif";
      imagenes[7].src="images/RecList2.gif";
      var Click=1;
      function SwapRec(imgName, imgNum)
      {
      document.images[imgName].src = imagenes[imgNum].src;
      }

      El código HTML para disponer los objetos que componen el menú no aporta información de especial valor (y puede observarse viendo el código fuente de la página con el browser). Sin embargo, incluiremos el código para activar el "swaping" de marcadores:

      <li> <a class="textLink" href="http://www.uie.com/" target="window" OnMouseOver="SwapRec('uie',7)" OnMouseOut="SwapRec('uie',6)"> <img src="images/RecList1.gif" border="0" name="uie" width=7 height=5> User Interface Engineering</a></li>

      Y finalmente el código HTML para hacer flotar abajo y a la derecha del Menú de Navegación el contenedor de "más enlaces":

      <span class="boxMoreLink"><a href="usefullTools.htm#usability"> <img src="images/more.gif" alt="Más sitios útiles" border="0"></a></span>

      Con lo que sólo nos queda describir la clase que implementan dicho contenedor:

      .boxMoreLink {float: right;margin: -7px -8px;}

      Como puede observarse, es tan sencillo como indicar que el contenedor de "más enlaces" flotará a la derecha del contenedor-padre dentro del que se encuentra indicando unas distancias en pixels al margen del mismo para una adecuada ubicación.


      2. Inicio de página


    2. 6.2 Contenedor contenido:

      La potencia que tiene el posicionamiento de cajas en CSS2 es tal que dada cualquier estructura de objetos, como por ejemplo como la manejada anteriormente:.

      Datos de contacto
      (*) Teléfono particular:
      (*) Teléfono móvil:
      (*) Email:

      Permite posicionar en el contenedor global de la misma cualquier estructura adicional sin alterar en absoluto el código HTML utilizado para construirla:

      Datos de contacto
      (*) Teléfono particular:
      (*) Teléfono móvil:
      (*) Email:
      Cosultar cliente:
      Cliente:

      Bueno, salvo haber aumentado un poco el ancho del contenedor principal para "hacer sitio" a la estructura adicional. Evidentemente esto supone una comodidad muy grande ya que implementarlo en HTML puro y duro supone reestrucutrar totalmente el sistema de tablas.

      Las clases adicionales que se han incluído para formatear el módulo adicional son:

      .ejSection6 {background: #FFFFFF;border: 1px solid #FF0000;padding: 3px;}
      .ejStit6 {background: #FF0000;color: #FFFFFF;font-size: 11px;font-weight: normal;text-align: center;font-family: verdana, arial, helvetica,sans-seriff;z-index: 10;margin-bottom: 5px;}
      .ejStit7 {color: #FF0000;font-size: 11px;font-weight: bold;text-align: center;font-family: verdana, arial, helvetica,sans-seriff;z-index: 10;margin-bottom: 5px;}
      .ejLabel6 {color: #000000;font-size: 10px;font-weight: normal;text-align: right;font-family: verdana, arial, helvetica,sans-seriff;}
      .ejInput6 {background: #DEC4C0;color: #000000;font-size: 11px;font-weight: normal;text-decoration: none;border: 2px outset #F8E3E0;font-family: Verdana, Arial, Helvetica, sans-serif;}

      Y situamos ambos contenedores en 2 layers posicionados por las clases:

      .subOptContainer6 {position: relative;top: 0px; left: 0px;visibility: visible;z-index-1;}
      .subOptContainer7 {position: relative;top: -54px; left: 242px;visibility: visible;z-index-2;}

      Como se ve, la solución es mucho más "limpia" y "económica" que resstructurar de nuevo todo el código HTML para modificar el formulario inicial.


      3. Inicio de página


    3. 6.3 Superposición de capas:

      Utilizando posicionamiento relativo y la propiedad z-index para establecer la prioridad de visualización de capas se puede implementar fácilmente la superposición de formularios mostrada a continuación. (Esta misma metodología de trabajo ya fue utilizada en el caso del Menú Dinámico Multinivel):

      Datos de contacto
      (*) Teléfono particular:
      (*) Teléfono móvil:
      (*) Email:
      Debe registrarse previamente:
      E-mail:
      Clave:

      La forma de hacerlo es tan sencilla como situar ambos formularios en 2 capas, posicionarlas adecuadamente, y asociarlas la prioridad de visualización deseada:

      .subOptContainer6 {position: relative;top: -5px; left: 10px;z-index-1;}
      .subOptContainer7 {position: relative;top: -67px; left: 250px;z-index-2;}

      De nuevo resaltar la sencillez de la solución en contraposición a la complejidad que implica superponer ambos formularios utilizando sólo HTML



Capítulos:
Capítulo anterior Botones Äreas de trabajo Textos Menús Barras de Herramientas Posicionamiento de objetos Ocultar objetos Capítulo siguiente

Temas relacionados: DHTML y CSS's | Tabla de Referencia de CSS's | Tablas y CSS's

  
 
WebUsable.com © Todos los derechos reservados.
Subir al inicio de página Página anterior Página Inicial de WebUsable Imprimir esta página Envía tus comentarios Recomienda esta página a un amigo Mapa de WebUsable