Lista: cambiar el punto o numero por >>

wakewakeup · #1 (**permalink**) 07/02/2006, 11:39

En algun sitio he visto que las lipicas listas <ul> <li> en vez de tener un punto para identificarlas tienen el simbolo >>, buscando en google he encontrado esto:
http://www.w3schools.com/css/pr_list-style-type.asp

Pero no veo esa opción. Sabeis como puedo cambiar el punto ese por lo que yo quiera?
Graciasss

¿es a mi? · #2 (**permalink**) 07/02/2006, 12:46

Puedes crear la imagen que quieras, por ejemplo de 15 x 15 pixels para usarla. En el css pones
#lista {
list-style-image: url(imagenes/imagen.jpg);
}

Siendo imagenes la carpeta que la contiene y imagen.jpg la que hayas creado.
cuando pongas tu <ul id="lista"> te saldrá como quieres.
Igual hay otro método, pero este es el que conozco, ya que no soy ducho en ésto.
Saludos

wakewakeup · #3 (**permalink**) 08/02/2006, 02:39

ha ido perfecto gracias!!

furoya · #4 (**permalink**) 08/02/2006, 12:40

Hola wakewakeup , ¿es a mi? :

Y seguramente lo que viste era una imagen. En Firefox creo que se puede hacer algo con una combinación de :before y quotes , pero aún no funciona en otros.

Acá hay una simulación, puede que también te sirva.

Viñetas personalizables.

saludos

Diosus · #5 (**permalink**) 13/02/2006, 11:16

Hola
Quisiera saber si se puede personalizar la distancia de las listas, lo que ocurre es que tengo una lista en una columna y no me gusta mucho la distancia de separación que le da entre el borde de la celda y el punto de la lista.
Gracias por la atención

¿es a mi? · #6 (**permalink**) 13/02/2006, 14:46

El margen lo defines en el css

.lista {
margin:15px;
}
y usas <ul class="lista"> para que aparezca con el margen que has definido, en este caso 15 pixels.
Supongo que te refieres a esto
Saludos

pepean74 · #7 (**permalink**) 14/02/2006, 02:46

En esta direccion teneis un monton de ejemplos de como trabajar con listas
css.maxdesign.com.au/listamatic/

Jorolo · #8 (**permalink**) 14/02/2006, 18:08

Hola a todos.

Un ejemplo del uso de :before

Código HTML:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>before</title>
<meta http-equiv='Content-type' content='text/xml; charset=utf-8' />
<meta name='autor' content='Jorolo' />
 <style type='text/css'>
ul { list-style: none; list-style-position: inside;
				padding: 0.1ex;	  } 
li.nota:before { content: 'nota: '; color: red; }
li.nota2:before { content: '» '; } /* #187 */
li.nota3:before { content: '☺ '; } /* #9786 */
 </style>
</head>
<body>

<ul>
<li class='nota'>esto es un prueba de lista con :before</li>
<li class='nota2'>esto es lo que pedia wakewakeup (creo)</li>
<li class='nota3'>espero que os sirva</li>
</ul>

</body>
</html>

wakewakeup · #9 (**permalink**) 15/02/2006, 02:12

gracias a todos por responder, he aprendido mas de lo que quería incluso ;)

furoya · #10 (**permalink**) 16/02/2006, 14:20

Hola de nuevo :

Cita:

Iniciado por Diosus

...Quisiera saber si se puede personalizar la distancia de las listas...

Supongo que te refieres a la distancia de la viñeta. Hay un par de temas sobre eso

usando css y viñetas

Marcadores del liasta fuera de lugar

[edit]

Cuando sugerí que se podía usar before para simular una lista no me animé a poner un ejemplo para evitar el ya clásico "¡No me anda! ¡No me anda!" de los que no leen los mensajes.
Pero después de ver que nadie objetó el código de Jorolo, junté valor y me puse a trabajar con los quote . La única ventaja de este 'método' está en el anidamiento ... que es justamente lo que no pude usar.

Estoy apostando aque se trata de un error de mi parte, ya que es un poco difícil que Firefox lo soporte 'a medias' (el primer nivel funciona perfectamente).

Dejo el ejemplo.

Código:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>LISTAS.</title>

<style type="text/css">

body {font-size:100%}

Q { quotes: '\0022' '\0022' "\00ab" "\00bb"; font-style:italic; }
Q:before { content: open-quote }
Q:after  { content: close-quote  }


/*Q:before { content: open-quote counter(seccion) ","; counter-increment: seccion; counter-reset: 

sub-seccion;}*/
/*Q:after  { content: close-quote counter(seccion) ","; counter-increment: seccion; 

counter-reset: sub-seccion; }*/

dl { font-family:arial, helvetica, sans-serif; }
dd , dt { quotes: "\25a0 \00a0" "\25cf \00a0" "?" "?"; }
dt:before { content: open-quote; background-color:yellow; }
dd:before { content: close-quote; margin-left:-0.9em; }

</style>
</head>
<body>
<q>qweyuop, <q>asdfghjk</q> qwertyuio</q> <q>asdfghjk</q>


<hr>

<dl>
  <dt>alin a nivel.</dt>
   <dd>alin "indent". <br />alin "indent". </dd>
   <dd>alin "indent".</dd>
</dl>
</body>

</html>

Últimas consideraciones.

Estos trucos tienen la ventaja de 'escribir' los caracteres, por lo que al seleccionar y copiar también nos llevamos las viñetas, algo que no ocurre con las verdaderas listas.
Pero tienen la desventaja de funcionar bien solamente con inside ; ya que para verlas outside hay que usar un posiconamiento no siempre eficaz.

Existe también un CSS para crear listas ordenadas, pero es bastante complejo y recién va a ser útil en la próxima década, cuando desaparezcan las etiquetas <li> .

[/edit]