Foros del Web » Diseño web » CSS »

Lista: cambiar el punto o numero por >>

Estas en el tema de Lista: cambiar el punto o numero por >> en el foro de CSS en Foros del Web. En algun sitio he visto que las lipicas listas <ul> <li> en vez de tener un punto para identificarlas tienen el simbolo >>, buscando en ...
  #1 (permalink)  
Antiguo 07/02/2006, 11:39
 
Fecha de Ingreso: octubre-2004
Mensajes: 878
Antigüedad: 10 años, 2 meses
Puntos: 1
Lista: cambiar el punto o numero por >>

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
  #2 (permalink)  
Antiguo 07/02/2006, 12:46
 
Fecha de Ingreso: diciembre-2001
Ubicación: Málaga
Mensajes: 328
Antigüedad: 13 años
Puntos: 0
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
  #3 (permalink)  
Antiguo 08/02/2006, 02:39
 
Fecha de Ingreso: octubre-2004
Mensajes: 878
Antigüedad: 10 años, 2 meses
Puntos: 1
ha ido perfecto gracias!!
  #4 (permalink)  
Antiguo 08/02/2006, 12:40
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.368
Antigüedad: 12 años, 1 mes
Puntos: 317
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
  #5 (permalink)  
Antiguo 13/02/2006, 11:16
Avatar de Diosus  
Fecha de Ingreso: noviembre-2003
Ubicación: Lima
Mensajes: 112
Antigüedad: 11 años, 1 mes
Puntos: 1
distancia de las listas

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
  #6 (permalink)  
Antiguo 13/02/2006, 14:46
 
Fecha de Ingreso: diciembre-2001
Ubicación: Málaga
Mensajes: 328
Antigüedad: 13 años
Puntos: 0
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
  #7 (permalink)  
Antiguo 14/02/2006, 02:46
 
Fecha de Ingreso: febrero-2006
Mensajes: 15
Antigüedad: 8 años, 10 meses
Puntos: 0
En esta direccion teneis un monton de ejemplos de como trabajar con listas
css.maxdesign.com.au/listamatic/
  #8 (permalink)  
Antiguo 14/02/2006, 18:08
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 9 años, 2 meses
Puntos: 1
:before

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> 
  #9 (permalink)  
Antiguo 15/02/2006, 02:12
 
Fecha de Ingreso: octubre-2004
Mensajes: 878
Antigüedad: 10 años, 2 meses
Puntos: 1
gracias a todos por responder, he aprendido mas de lo que quería incluso ;)
  #10 (permalink)  
Antiguo 16/02/2006, 14:20
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.368
Antigüedad: 12 años, 1 mes
Puntos: 317
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]

Última edición por furoya; 23/02/2006 a las 10:51
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:03.
SEO by vBSEO 3.3.2