Hola,

El 2 de julio de 2009 20:18, Delirium
Design<deliriumindes...@gmail.com> escribió:
> habria alguna forma de ponerlo color solo al boliche , asi no uso una imagen
> , si no que le pongo el color que quiero al redondel.
> Hasta ahora me cambia el redondel junto con el texto.


Si existe un carácter que te sirva como boliche, entonces puedes
aplicar estilo a éste sin tener que usar una imagen de fondo.

Una solución  consiste en establecer el boliche directamente en el
archivo html y englobarlo en algún elemento (ej. span) para poder
aplicarle estilo (esto ya te lo ha indicado Ignacio Ricci):

[html]
        <ul>
          <li><span>&bull;</span>Uno</li>
          <li><span>&bull;</span>Dos</li>
        </ul>

[css]
        li {
          list-style-type: none;  /* elimina boliches */
        }
        
        li span {
          color: green;
          margin-right: 0.3em;  /* separa el boliche del texto */
        }

El inconveniente de esta solución es que no respeta una de las normas
elementales del buen diseño web y que consiste en separar el diseño de
la estructura. Los boliches son diseño y deberían de especificarse en
el css.



En navegadores compatibles con el pseudoelemento :before se puede
hacer lo siguiente:
[css]
        li {
          list-style-type: none;  /* elimina boliches */
        }

        li:before {
          content: "\2022"; /* codificación en hexadecimal del carácter &bull;  
*/
          color: blue;
          margin-right: 0.3em;
        }

En la propiedad content se puede indicar directamente el carácter que
se quiera usar como boliche, pero si usas uno que no sea ASCII básico
tendrás que tener cuidado en guardar el archivo css con la
codificación apropiada (yo uso utf-8 sin BOM en mis archivos). Para
evitar los problemas de codificación al guardar, es mejor indicar el
equivalente hexadecimal, en este caso \2022. Tienes una tabla de
referencia en http://ascii.cl/es/codigos-html.htm
        
Lamentablemente hay  navegadores como IE6 que no aceptan la anterior
regla, aunque puedes indicarle algún list-style sólo a este navegador
mediante el uso de los comentarios condicionales.
[html]
        <!--[if lte IE 6]>
                <link rel="stylesheet" type="text/css" href="ie6.css" />
        <![endif]-->


[ie6.css]
         li {
          list-style: disc inside;
        }


Saludos
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo

Responder a