Foros del Web » Creando para Internet » CSS »

Sangria de listas que me tiene loco

Estas en el tema de Sangria de listas que me tiene loco en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/11/2005, 00:05
 
Fecha de Ingreso: abril-2005
Ubicación: Lima-Peru
Mensajes: 313
Antigüedad: 12 años, 7 meses
Puntos: 1
Sangria de listas que me tiene loco

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!

Última edición por MaXaC; 07/11/2005 a las 09:15
  #2 (permalink)  
Antiguo 07/11/2005, 06:48
 
Fecha de Ingreso: febrero-2005
Mensajes: 396
Antigüedad: 12 años, 10 meses
Puntos: 1
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
  #3 (permalink)  
Antiguo 07/11/2005, 09:21
 
Fecha de Ingreso: abril-2005
Ubicación: Lima-Peru
Mensajes: 313
Antigüedad: 12 años, 7 meses
Puntos: 1
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
  #4 (permalink)  
Antiguo 07/11/2005, 15:23
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 13 años, 5 meses
Puntos: 0
Prueba modificando el valor padding-left y margin-left (ambos) de los li, que traen algo de esto por default.
  #5 (permalink)  
Antiguo 08/11/2005, 00:50
 
Fecha de Ingreso: abril-2005
Ubicación: Lima-Peru
Mensajes: 313
Antigüedad: 12 años, 7 meses
Puntos: 1
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
  #6 (permalink)  
Antiguo 09/11/2005, 18:11
 
Fecha de Ingreso: abril-2005
Ubicación: Lima-Peru
Mensajes: 313
Antigüedad: 12 años, 7 meses
Puntos: 1
Porfa, agradeceria enormemente una ayuda con mi problemilla
  #7 (permalink)  
Antiguo 09/11/2005, 18:41
 
Fecha de Ingreso: julio-2002
Mensajes: 813
Antigüedad: 15 años, 4 meses
Puntos: 2
Hola buenas noches:

prueba con esto:

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

Salu2.
  #8 (permalink)  
Antiguo 09/11/2005, 21:34
 
Fecha de Ingreso: abril-2005
Ubicación: Lima-Peru
Mensajes: 313
Antigüedad: 12 años, 7 meses
Puntos: 1
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??!!
  #9 (permalink)  
Antiguo 10/11/2005, 10:07
 
Fecha de Ingreso: julio-2002
Mensajes: 813
Antigüedad: 15 años, 4 meses
Puntos: 2
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.
  #10 (permalink)  
Antiguo 10/11/2005, 20:29
 
Fecha de Ingreso: abril-2005
Ubicación: Lima-Peru
Mensajes: 313
Antigüedad: 12 años, 7 meses
Puntos: 1
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!
  #11 (permalink)  
Antiguo 13/11/2005, 13:10
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 2 meses
Puntos: 1
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;
  #12 (permalink)  
Antiguo 12/03/2010, 14:23
 
Fecha de Ingreso: marzo-2010
Mensajes: 2
Antigüedad: 7 años, 9 meses
Puntos: 0
De acuerdo Respuesta: Sangria de listas que me tiene loco

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:
Cita:
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
Cita:
<!--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.
  #13 (permalink)  
Antiguo 12/03/2010, 14:30
 
Fecha de Ingreso: marzo-2010
Mensajes: 2
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: Sangria de listas que me tiene loco

Codigo en Accion:
  #14 (permalink)  
Antiguo 12/03/2010, 15:11
Avatar de arthpix  
Fecha de Ingreso: diciembre-2003
Ubicación: Cancún
Mensajes: 2.340
Antigüedad: 14 años
Puntos: 93
Respuesta: Sangria de listas que me tiene loco

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:
Ver original
  1. ul.lista { /* Recomendable especificar "ul.lista" para evitar recorrer todo el dom buscándolo */
  2.     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  3.     font-size: 11px;
  4.     line-height: 11px;
  5.     list-style-image: url(../img/bullet.gif);
  6.     /* Se puede usar la forma corta en estos */
  7.     margin: 0;
  8.     padding: 0;
  9.     }
  10.  
  11. ul.lista li{ /* Idem que con "ul.lista" */
  12.      margin-top: 2px;
  13.      margin-bottom: 2px;
  14.      margin-left: 19px;
  15.      /* Especificar el padding de los elementos li también */
  16.      padding-left: 0;
  17.     }


Edito: 13 de noviembre de 2005???????????
Por favor, no revivan temas viejos!!!
__________________
Antes de hacer rabietas infórmate: Linux != Windows

Última edición por arthpix; 12/03/2010 a las 15:15 Razón: Arrrrgh!!!! no me fijé en la fecha del hilo
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 09:18.