Foros del Web » Creando para Internet » CSS »

Justificar texto dentro de una lista - Control de sangria

Estas en el tema de Justificar texto dentro de una lista - Control de sangria en el foro de CSS en Foros del Web. Hola Vengo leyendo varios articulos, buscando la solucion para poder controlar las sangrias de los items de una lista cuando se esta usando una imagen ...
  #1 (permalink)  
Antiguo 15/12/2010, 10:16
 
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 1
Antigüedad: 7 años, 3 meses
Puntos: 0
Pregunta Justificar texto dentro de una lista - Control de sangria

Hola
Vengo leyendo varios articulos, buscando la solucion para poder controlar las sangrias de los items de una lista cuando se esta usando una imagen como bullet.

Tengo una lista no ordenada <ul> que tiene varios items <li> .Algunos son cortos y otros largos. Cuando tengo un <li> que el texto genera una segunda linea por ser muy largo, el margen o sangria de la 2da linea no se alinea con la 1er linea de texto.

Me explico mejor con una imagen:



Esa linea roja que dibuje es donde quiero que se alinee todo el texto de esos <li>´s.


Detallo mi codigo HTML:

Código:
<ul class="listaprodserv">
        <li class="listaprodserv"><a href="#">Granallados convencionales y por circuito cerrado</a></li>
             <hr />
        <li class="listaprodserv"><a href="#">Arenados en seco y húmedo</a></li>
             <hr />
        <li class="listaprodserv"><a href="#">Aplicación con equipos Airless, convencionales y plurales</a></li>
             <hr />
        <li class="listaprodserv"><a href="#">Puesta en valor de estructuras</a></li>
</ul>
Detallo mi CSS:

Aclaro que use un margin-left:10px; para que se se peguen los items al borde de la caja, por diseño sin ir mas lejos...

Código:
.listaprodserv ul{margin:0; padding:0}

.listaprodserv li{
	list-style:url(../../img/generales/mota2.jpg);/*esta imagen tiene 12px ancho × 15px de alto*/
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#504f4f;
	list-style-position:inside;
	line-height:20px;
	margin-left:10px;}

.listaprodserv li a{
	color:#504f4f;
	list-style-position:inside;
	line-height:20px;
	text-decoration:none;}

.listaprodserv li a:hover{
	color:#797979;
	text-decoration:underline;}
Lo que ocurre es que la 2da linea de texto se alinea al comienzo de la imagen de la lista (bullet). Esto ocurre porque uso list-style-position:inside porque sino, no se ve el bullet...
Probe usando text-indent, pero solo se ve reflejado en la 1er linea del <li>.

Bueno, espero comentarios! gracias!
  #2 (permalink)  
Antiguo 15/12/2010, 11:30
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: Justificar texto dentro de una lista - Control de sangria

¿Y si pones un text-indent negativo y un padding a les elementos <li> de la lista?
  #3 (permalink)  
Antiguo 15/12/2010, 12:30
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Justificar texto dentro de una lista - Control de sangria

en primera esta linea no esta haciendo nada

Código CSS:
Ver original
  1. .listaprodserv ul{margin:0; padding:0}

ya que la lista no esta dentro de esa clase, la clase en la lista... por lo que solo debes poner la clase sin el ul.

y segunda si deseas que te respete el margen (sangria) en las listas en lugar de

list-style-position:inside; aplica outside

Código CSS:
Ver original
  1. .listaprodserv li{
  2.     list-style:url(../../img/generales/mota2.jpg);/*esta imagen tiene 12px ancho × 15px de alto*/
  3.     font-family:Arial, Helvetica, sans-serif;
  4.     font-size:14px;
  5.     color:#504f4f;
  6.     list-style-position:outside;
  7.     line-height:20px;
  8.     margin-left:10px;}
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #4 (permalink)  
Antiguo 15/12/2010, 12:42
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Justificar texto dentro de una lista - Control de sangria

la imagen del bullet ponesela a tu UL, no a tu li

http://www.w3schools.com/Css/pr_list-style-image.asp

slds.-
  #5 (permalink)  
Antiguo 15/12/2010, 17:06
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Justificar texto dentro de una lista - Control de sangria

Otra forma, además de la indicada por Dragón
Código CSS:
Ver original
  1. ul {margin:0 auto; padding:0; width: 200px;}
  2.  
  3. li{
  4.     list-style: disc;
  5.     font-family:Arial, Helvetica, sans-serif;
  6.     font-size:14px;
  7.     color:#504f4f;
  8. }
  9.  
  10. li a{
  11.   color: #504F4F;
  12.   display: block;
  13.   text-decoration: none;
  14.   padding-left: 10px;
  15.   }
  16.  
  17. li a:hover{
  18.     color:#797979;
  19.     text-decoration:underline;}
EL html es el publicado por usted.

Como verá, el list-style lo aplico a los |li| y el paddin a los enlaces |a|

Etiquetas: alinear, justificar, lista, sangria, text-indent
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 17:53.