Sangria de listas que me tiene loco

[MaXaC]

Holas, tengo un pequeño gran problema para mi, tengo unas cajas de contenido en el que trabajo con css, todo bien puse mi imagen de lista, lo alinee a la caja (q esta en una tabla), todas las lineas parten de la misma posicion osea justificado, peroooo, se me ocurrio q el espacio entre la imagen de lista y la primera letra era mucha, asi q busque la forma de acortarla, y encontre en unos de los post el uso de text-indent, pero solo funciona para la primera linea, para las demas no se como hacer, el amigo caricatos puso q debia utilizar margin-left pero todo se me malogra ; el codigo q tengo es:

ul {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 11px;
margin: 2px 0px 2px 0px;
}

ul li{
list-style-image: url(../img/bullet.gif);
margin: 2px 1px 2px 19px;
margin-left: 0px;
}

tal vez este haciendo algo mal, el resultado q me gustaria tener es con un minimo de espacio entre la primera letra y la imagen de lista y las lineas siguientes alineadas con la primera, espero puedan ayudarme, gracias!

[Zerjillo]

lo de ".ul" me suena extraño. ¿Has probado a poner "ul" sin el punto? Puesto que quieres darle estilo al tag ul, este, al igual que haces con "li", debe ir sin punto.

Mira a ver si es eso.

Un saludo

Zerjillo

[MaXaC]

si, lo del punto fue un error de transcripcion porque los tenia como clases, y para q se vea mas claro lo cambie pero no borre el punto, gracias por la aclaracion, bueno si me pudieran ayudar con mi problema porfa

[ramm]

Prueba modificando el valor padding-left y margin-left (ambos) de los li, que traen algo de esto por default.

[MaXaC]

Gracias por responder amigo Ramm, he seguido tus recomendaciones y las trate de aplicar pero nada, con el list-style-position: inside logro reducir el espacio entre la imagen y la primera letra, como con text-indent, pero no puedo con las demas lineas. Cambie algunas cosas en mi codigo

.lista {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 11px;
list-style-image: url(../img/bullet.gif);
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.lista li{
margin-top: 2px;
margin-bottom: 2px;
margin-left: 19px;
padding-left:0px;
}

produce el mismo resultado q el primero, trate de seguir lo q me dijo Ramm, al modificar el padding-left tanto en valores negativos o positivos no se modifica en nada, como dije no se como conseguir el alineamiento

[MaXaC]

Porfa, agradeceria enormemente una ayuda con mi problemilla

[evoarte]

Hola buenas noches:

prueba con esto:

* {margin:0px;border:0px;padding:0px;}

Salu2.

[MaXaC]

Hola, gracias por contestar, pero tu respuesta pone todo el texto de las listas al lado izquierdo, quitando las imagenes; pongo "margin-left: 19px;" para q me muestre el texto sin dejar de mostrar las imagenes (viñetas) de la lista, ya que reduciendolo se va para la izquierda.Este problemilla tendra solucion? que estoy haciendo mal??!!

[evoarte]

Hola:

Poniendo * {margin=0px; border=0px; padding=0px;} eliminas todos los márgenes, bordes y espaciados interiores que cada navegador incorpora a los elementos html, en este caso ul y li.

A partir de ahí puedes definirlos, a tu gusto, aplicandolos a ul y li.

Pon el código html de la lista y la parte css que le tienes asignada, y como quieres que te quede.

Salu2.

[MaXaC]

bueno para aclarar el tema, mis listas estan en una tabla ,luego el codigo que tengo en la pagina es:

Código:

<td width="170px" height="100%" align="left" valign="top" background="img/bg02x2.gif"> 
 <ul class="lista">
     <li>Preocupa Falla Geologica en la ciudad</li>
     <li>Sra Zulema Mejia de Bravo en la ciudad</li>
  </ul>
</td>

y en mi hoja de estilos:

Código:

.lista {	
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 11px;
	list-style-image: url(../img/bullet.gif);
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	}

.lista li{
	 margin-top: 2px;
	 margin-bottom: 2px;
	 margin-left: 19px;
	}

el margin-left: 19px; es porq si le pongo menos se oculta la imagen de la viñeta

Dejo las imagenes, la primera es como esta actualmente:




y asi me gustaria que quede, les juro que he probado las maneras de hacerlo pero nada



Espero se resuelva esto, gracias!

[Jorolo]

Hola MaXaC.

Con CSS2.

Código:

<STYLE type="text/css">
.lista {
	list-style-type: none;
	}

 .lista LI:before { 
   	      display: marker;
	      content: url("../img/bullet.gif");
      }
 </STYLE>

Con CSS1.

Seguramente podrias apañarte con un:
list-style-position: inside;

[Melenium]

Amigo yo tengo la solucion y sin nesesitar que hacer una Lista. Bueno como ven el las listas no se permite bajar la sangria por eso eh desarrollado este Codigo:
Codigo CSS:

div.menu {

width: 150px;
height: 200px;

padding-left: 5px;
padding-top: 9px;

background-color: #fff;

border: 1px solid #000;

content-align: center;
float: center;
align: center;

}

Codigo HTML

<!--Main Menu -->
<div class="menu"><center><p><b>Menu principal</b></p></center>
<!--List -->
<p><img src="imagen de lista" align=left>&nbsp;Planos Guitarras &nbsp;&nbsp;&nbsp;&nbsp;Acusticas.</p>
<p><img src="imagen de lista" align=left>&nbsp;Planos Guitarras &nbsp;&nbsp;&nbsp;&nbsp;Electricas.</p>
<p><img src="imagen de lista" align=left>&nbsp;Planos Guitarras &nbsp;&nbsp;&nbsp;&nbsp;Electroacusticas.</p>
<p><img src="imagen de lista" align=left>&nbsp;Miselania de Planos.</p>
<!--End List -->
</div>
<!-- End Main Menu -->

Yo le agrege esta imagen:

Ustedes veran si la cambian.

[Melenium]

Codigo en Accion:

[arthpix]

Al parecer tu problema no son los margins sino los paddings. El navegador no está heredando el padding 0 del padre. Prueba asi:

Código CSS:

ul.lista { /* Recomendable especificar "ul.lista" para evitar recorrer todo el dom buscándolo */
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 11px;
    list-style-image: url(../img/bullet.gif);
    /* Se puede usar la forma corta en estos */
    margin: 0;
    padding: 0;
    }
 
ul.lista li{ /* Idem que con "ul.lista" */
     margin-top: 2px;
     margin-bottom: 2px;
     margin-left: 19px;
     /* Especificar el padding de los elementos li también */
     padding-left: 0;
    }
 

Edito: 13 de noviembre de 2005???????????
Por favor, no revivan temas viejos!!!