Utilice list-style-image, en lugar de span. Creo que hay algunas diferencias entre como ordenamos, y cuales son las opciones que elegimos cada uno de nosotros a la hora de usar estilos. Yo personalmente utilice list-style-image porque siento que ese debe ser su uso (imagen de estilo de lista) como la palabra lo dice. Podria haber usado <span>, es simplemente la desicion de cada uno a la hora de maquetar. Muchas gracias por la ayuda y buen fin de semana!
El 4 de julio de 2009 13:09, Ignacio Ricci <ignacio.ri...@gmail.com>escribió: > Lo último que digo porque no vale la pena... > Los entities son caracteres especiales. Un bullet de una lista no es un > entity. > Es parte de como se ve una lista 'gráficamente', no es parte del contenido. > > No semántico realmente sería un span vacío. > Obviamente que agregarlo adentro del LI para crear que se vea algo > diferente > no es lo mejor, pero no es realmente tan grave como un tag vacío. > > La gente de ovillo busca aprender CSS. Y la verdad que si las personas > recomiendan usar entities como bullets convencidisimos y nadie les dice > nada > la verdad que me preocupa... > > 2009/7/4 Daniel Navarro <webpe...@gmail.com> > > > [Tú escribiste] > > > Primero que usar un entity para crear un bullet es ridículo. > > > > ¿Ridículo?¿por qué?. Supongo que lo dices porque ya existe un boliche > > predeterminado para las listas no ordenadas y, por lo tanto, no parece > > tener sentido el anularlo para incluir este carácter en el html. Sin > > embargo, el boliche predeterminado en las listas no ordenadas no se > > visualiza de forma coherente en diferentes navegadores. Si lo anulas y > > lo incluyes manualmente en el código consigues que se represente > > siempre igual, independientemente del navegador (aunque depende del > > tipo fuente elegida). Además, puedes usar otros caracteres, como el > > representado por la entidad » (comillas anguladas de cierre), y > > que no se encuentran entre los list-style-type. Aún así sigue siendo > > una mala opción de diseño debido a que rompe la separación > > estructura-estilo, pero no considero que sea ridículo. > > > > En http://webpelon.es/ovillo/2009-mes07-04-bullet_en_listas/ tienes un > > ejemplo. Prueba a visualizarlo en diferentes navegadores. > > > > > > > > > > [Tú escribiste] > > > Segundo. El span no es una etiqueta no semántica porque tiene > contenido. > > > > Que contenga contenido no significa que la etiqueta sea semántica. > > Depende del uso que se haga de la etiqueta. En este caso, se utiliza > > como artificio para que el color (estilo) de los elementos de lista > > sea distinto del de los boliches. > > > > Una buena forma de entenderlo es intentar describir el significado de > > la etiqueta mediante palabras y sin incluir referencias a estilos. Por > > ejemplo, en: > > <li><span>Ignacio</span> Ricci</li> > > <li><span>Daniel</span> Navarro</li> > > se puede describir el significado del span como "nombre de pila", > > pero en > > <li><span>Elemento primero</span></li> > > no vale decir que es "elemento de lista sin boliche" porque incluye > > una referencia a estilos, en este caso, al boliche. Y si lo definimos > > como "elemento de lista", entonces tiene el mismo significado que el > > <li> y no aporta nada a la estructura. > > > > > > > > > > [Tú escribiste] > > >Tercero. La técnica del span u otro tag lo usan muchos sitios. > > > > Sí, es cierto. Pero si existe otro método igual de sencillo y que > > evite el uso de esta etiqueta cuando no añade significado al código, > > entonces es preferible usarlo. > > > > > > > > > > [Tú escribiste] > > > Cuarto. De ultima utilizaría un list-style-image o un fondo para el li > > > en caso de necesitar más versatilidad. > > > > Delirium Design pedía alguna forma de colorear el boliche sin usar > > imágenes y yo he planteado dos formas. > > > > > > > > Saludos. > > > > > > > > > > > > > > > > El 4 de julio de 2009 00:55, Ignacio Ricci<ignacio.ri...@gmail.com> > > escribió: > > > Primero que usar un entity para crear un bullet es ridículo > > > > > > Segundo. El span no es una etiqueta no semántica porque tiene > > > contenido. > > > > > > Tercero. La técnica del span u otro tag lo usan muchos sitios. > > > > > > Cuarto. De ultima utilizaría un list-style-image o un fondo para el li > > > en caso de necesitar más versatilidad. > > > > > > Ignacio Ricci. > > > www.ignacioricci.com > > > > > > On Jul 3, 2009, at 19:27, Daniel Navarro <webpe...@gmail.com> wrote: > > > > > >> Tienes razón. Tú metes el texto entero en un span y le aplicas un > > >> formato que lo diferencia del boliche. Éste está incluido en el li > > >> pero no en el span. Aún así adolece de una etiqueta no semántica ( > > >> el > > >> span). Es otra forma diferente de hacerlo que no tiene nada que ver > > >> con la que yo he puesto (disculpas). > > >> > > >> El indicar el carácter de boliche en el html tiene el defecto de > > >> incluir más contenido no semántico, pero la ventaja de una > > >> presentación más coherente entre navegadores, además de poder usar > > >> más > > >> tipos de boliches que los predefinidos para las listas no ordenadas. > > >> > > >> Saludos. > > >> > > >> El 3 de julio de 2009 13:55, Ignacio Ricci<ignacio.ri...@gmail.com> > > >> escribió: > > >>> No tiene sentido agregar el entity del bullet... Es contenido > > >>> innecesario. > > >>> Con anidar un span en el Li ya está... > > >>> > > >>> 2009/7/3 Daniel Navarro <webpe...@gmail.com> > > >>> > > >>>> 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>•</span>Uno</li> > > >>>> <li><span>•</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 n > > >>>> ormas > > >>>> elementales del buen diseño web y que consiste en separar el dis > > >>>> eño de > > >>>> la estructura. Los boliches son diseño y deberían de especificar > > >>>> se 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 ca > > >>>> rácter > > >>>> • */ > > >>>> color: blue; > > >>>> margin-right: 0.3em; > > >>>> } > > >>>> > > >>>> En la propiedad content se puede indicar directamente el carácte > > >>>> r 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 indica > > >>>> r 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 nave > > >>>> gador > > >>>> 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 direc > > >>>> ción: > > >>>> http://lists.ovillo.org/mailman/listinfo/ovillo > > >>>> > > >>> > > >>> > > >>> > > >>> -- > > >>> ↓ Ignacio Ricci > > >>> www.ignacioricci.com > > >>> _______________________________________________ > > >>> 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 > > >> _______________________________________________ > > >> 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 > > > _______________________________________________ > > > 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 > > _______________________________________________ > > 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 > > > > > > -- > ↓ Ignacio Ricci > www.ignacioricci.com > _______________________________________________ > 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 > _______________________________________________ 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
