como puedo modificar la distancia list-style-image:url('sqpurple.gif')

jor_0203 · #1 (**permalink**) 06/12/2011, 04:56

como puedo modificar la distancia list-style-image:url('sqpurple.gif'); y el contenido como la letra
mil gracias

Código Javascript:

Ver original<html>
<head>
<style type="text/css">
ul 
{
list-style-image:url('sqpurple.gif');
}
</style>
</head>
 
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

enaguimar · #2 (**permalink**) 06/12/2011, 06:00

No entiendo muy bien lo que quieres hacer, si lo puedes poner mas claro te podría ayudar.

jor_0203 · #3 (**permalink**) 06/12/2011, 11:11

Cita:

Iniciado por enaguimar

No entiendo muy bien lo que quieres hacer, si lo puedes poner mas claro te podría ayudar.

la imagen de la lista la quiero alegar y la quiero mover segun sea mi gusto , pero no se como hacerlo

kseso? · #4 (**permalink**) 06/12/2011, 11:22

Al ser outside el valor por defecto para list-style-position sólo necesita declarar un padding izquierdo a sus elementos de la lista .
Y en el caso de que por alguna razón tuviese declarado el valor inside para l-s-postion aplique el padding (o margin) al contenido de li (a´s, div´s...)

enaguimar · #5 (**permalink**) 06/12/2011, 11:30

Cita:

Iniciado por kseso?

Al ser outside el valor por defecto para list-style-position sólo necesita declarar un padding izquierdo a sus elementos de la lista .
Y en el caso de que por alguna razón tuviese declarado el valor inside para l-s-postion aplique el padding (o margin) al contenido de li (a´s, div´s...)

creo que ya queda explicado.
Saludos

jor_0203 · #6 (**permalink**) 06/12/2011, 19:14

Cita:

Iniciado por kseso?

Al ser outside el valor por defecto para list-style-position sólo necesita declarar un padding izquierdo a sus elementos de la lista .
Y en el caso de que por alguna razón tuviese declarado el valor inside para l-s-postion aplique el padding (o margin) al contenido de li (a´s, div´s...)

le puse esto y no logro separar la imagen de la letra

list-style-position: inside;
margin-left: 22px;
padding-left: 33px;

que puedo hacer

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body {
    background-color: #0033FF;
}
li{
    list-style-type: none;
    list-style-image: url(carpeta.png);
    list-style-position: inside;
    margin-left: 22px;
}
-->
</style>
</head>
<body>
<ul  >
   <li>Html</li>
  <li>Html</li>
  <li>Html</li>
  <li >Html</li>
  <li>Html</li>
  <li>Html</li>
</ul>
</body>
</html>

emprear · #7 (**permalink**) 06/12/2011, 19:31

te tendría que funcionar con tan solo darle un padding-left

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
ul {
list-style-image: url('bullet_on.png');
}
ul li {
padding-left: 150px;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

Estoy editando el post para comentarte, no tenes que poner magin-left sino padding-left

Saludos

jor_0203 · #8 (**permalink**) 06/12/2011, 21:11

Cita:

Iniciado por emprear

te tendría que funcionar con tan solo darle un padding-left

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
ul {
list-style-image: url('bullet_on.png');
}
ul li {
padding-left: 150px;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

Estoy editando el post para comentarte, no tenes que poner magin-left sino padding-left

Saludos

si yo hago esto muevo todo y no separo entre bullet_on.png con el contenido del li

emprear · #9 (**permalink**) 06/12/2011, 21:38

mirá
http://foros.emprear.com/css/bullet/bullet.html
testeado con IE9/8/7 Chrome Firefox Opera Safari5

pitufoweb · #10 (**permalink**) 06/12/2011, 21:42

Cuando necesito hacer algo similar, en ves de usar list-style-image, utilizo background-image. Creo que así tengo un poco mas de control sobre las imágenes.

Cita:

mirá
http://foros.emprear.com/css/bullet/bullet.html
testeado con IE9/8/7 Chrome Firefox Opera Safari5

@emprear
Como haces para probar con IE7/8/9?

Saludos

emprear · #11 (**permalink**) 06/12/2011, 21:54

Si tenés IE9, en herramientas vas a encontrar algo llamado "herramientas de desarrollo" (F12), dónde dice modo de explorador, marcas 7/8/ú 9 (no cambies "modo del documento" solo el del explorador, y el del documento se va a cambiar solo), hay que tener cuidado con esas páginas que tienen el meta X-UA compatible, porque ya están forzando un modo de compatibilidad
Funciona muy bien (hasta dónde la he usado al menos)

Saludos

alexk · #12 (**permalink**) 06/12/2011, 21:55

pitufoweb si estas en win2 con IE9, puedes comprobar 7, 8 y 9 claro

pitufoweb · #13 (**permalink**) 06/12/2011, 22:16

Gracias a los dos por la información. Haré algunas pruebas para ver como funciona.

Saludos

jor_0203 · #14 (**permalink**) 07/12/2011, 04:56

Cita:

Iniciado por emprear

Si tenés IE9, en herramientas vas a encontrar algo llamado "herramientas de desarrollo" (F12), dónde dice modo de explorador, marcas 7/8/ú 9 (no cambies "modo del documento" solo el del explorador, y el del documento se va a cambiar solo), hay que tener cuidado con esas páginas que tienen el meta X-UA compatible, porque ya están forzando un modo de compatibilidad
Funciona muy bien (hasta dónde la he usado al menos)

Saludos

esto lo hice asi me gustaria saber tu opinión si esto es correcto
mil gracias

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
 
* {
       padding:0px;
       margin:0px;
       background-color: #990033;
}
 
ul {
    list-style-image: url(carpeta.png);
    border: thin solid #0000FF;
    list-style-position: inside;
}
.mover_letra_de_li{
    position: relative;
    top: -10px;
    left: 19px;
}
li{
    height:50px;
}
-->
</style>
</head>
<body>
<ul>
   <li><span class="mover_letra_de_li">Html</span></li>
   <li><span class="mover_letra_de_li">Html</span></li>
 
</ul>
</body>
</html>

emprear · #15 (**permalink**) 07/12/2011, 05:16

no sé, seguramente no termino de interpretarte, si el objeto es crear una distancia horizontal entre la imagen y el texto del <li> te basta con el ejemplo que te deje unos post más arriba, todo eso que estas haciendo no se justifica.
Ahora que a lo mejor lo que queres no es solo esa distancia horizontal sino que tenga tambien una alineación vertical diferente, si es asi, podrias
modificar la imagen ó
no deberías usar list-style-image y usar un background posicionado para el los <li>

No se me osurre otra cosa

Saludos

kseso? · #16 (**permalink**) 07/12/2011, 07:27

¿Sería usted tan amable de hacerme un favor? Gracias
Relea atentamente mi respuesta y compare lo sugerido y lo que usted ha hecho. Especialmente lo resaltado (ahora en negritas).

Cita:

Iniciado por kseso?

Al ser outside el valor por defecto para list-style-position sólo necesita declarar un padding izquierdo a sus elementos de la lista .
Y en el caso de que por alguna razón tuviese declarado el valor insidepara l-s-postion aplique el padding (o margin) al contenido de li (a´s, div´s...)

Cita:

Iniciado por jor_0203

le puse esto y no logro separar la imagen de la letra

list-style-position: inside;
margin-left: 22px;
padding-left: 33px;

que puedo hacer

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">

</style>
</head>
<body>
<ul >
<li>Html</li>
<li>Html</li>
<li>Html</li>
<li >Html</li>
<li>Html</li>
<li>Html</li>
</ul>
</body>
</html>