Foros del Web » Creando para Internet » CSS »

Marcadores del liasta fuera de lugar

Estas en el tema de Marcadores del liasta fuera de lugar en el foro de CSS en Foros del Web. Hola amigos, tengo un par de problemas que hace tiempo no puedo resolver y es que tengo en una <ul> items que ocupan varias lineas ...
  #1 (permalink)  
Antiguo 29/01/2006, 00:47
xav
 
Fecha de Ingreso: enero-2006
Ubicación: Argentina
Mensajes: 79
Antigüedad: 11 años, 10 meses
Puntos: 1
Marcadores del liasta fuera de lugar

Hola amigos, tengo un par de problemas que hace tiempo no puedo resolver y es que tengo en una <ul> items que ocupan varias lineas cuyo marcador (el puntito) se posisiona en la última línea y no en la primera, es decir cada item no comienza con ningún marcador. Y el otro problema es que elegí list-style-type: upper-alpha pero me aparecen todas letras A. Si alguien me pudiese aportar algún dato o solución le estaría muy agradecido. Bueno, me despido, saludos y hasta la próxima.

Javier.
  #2 (permalink)  
Antiguo 29/01/2006, 05:41
Avatar de jam1138
/** @package Moderador */
 
Fecha de Ingreso: julio-2004
Ubicación: sèveR led onieR lE
Mensajes: 9.368
Antigüedad: 13 años, 4 meses
Puntos: 101
... personalmente no alcanzo a comprender la idea, bueno sería mostrarás el código que manejas...

Bienvenido!
__________________
٩(͡๏̯͡๏)۶
» Cómo hacer preguntas de manera inteligente «

"100 años después, la revolución no es con armas, es intelectual y digital"
  #3 (permalink)  
Antiguo 29/01/2006, 09:19
xav
 
Fecha de Ingreso: enero-2006
Ubicación: Argentina
Mensajes: 79
Antigüedad: 11 años, 10 meses
Puntos: 1
Modificar posisión del marcador del item de una lista.

Entre las etiquetas <li> y </li> tengo texto suficiente como para que el item se vea como un bloque de código de 3 líneas altutra. El inconveniente es que el punto o marcador del item, que debería ubicarse a la izq. de la primer línea, se ubica a la izq. de la tercera. He probado list-style-position, marker-offset, margin, list-style-type pero sin tener éxito y no he encontrado en la web información alguna acerca del posicionamiento del marcador ni referencia a este problema. ¿Puede hacerse referencia al marcador para posicionarlo? Gracias de antemano. Saludos.
xav.

El código html es:
-----------------

<p>bla bla bla..</p><br>
<ul class="lista3">
<li>Certificado de estudios secundarios o constancia provisoria de haber finalizado</li>
<li>Documento Nacional de Identidad</li>
<li>Fotocopia de partida de nacimiento legalizada</li>
<li>2 fotografías de 4 x 4 de frente (no instantáneas)</li>
<li>Certificado de Grupo Sanguíneo y Factor RH</li>
</ul>
<p>bla bla bla..</p><br>


y el código css correspondiente es:
----------------------------------

..lista3 li{
font-family:Verdana, Arial, Helvetica, sans-serif;
width:250px;
text-align:left;
font-size:12px;
margin:0;
color: #000000;
line-height:17px;
}
  #4 (permalink)  
Antiguo 29/01/2006, 12:57
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
Hola a todos, hola xav

A tu código no le veo ningún problema, lo he probado y funciona correctamente, incluso he reducido el ancho de los li a 'width: 150px;' y se ve corectamente, todo en su sitio.

El problema tiene que estar en otro lado.

Sobre el list-style-type
  #5 (permalink)  
Antiguo 29/01/2006, 13:49
 
Fecha de Ingreso: diciembre-2001
Ubicación: Málaga
Mensajes: 328
Antigüedad: 16 años
Puntos: 0
Hola
Yo lo veo bien con Firefox, pero no con IE, que se ve como xav dice.
  #6 (permalink)  
Antiguo 29/01/2006, 13:55
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
Cita:
Iniciado por ¿es a mi?
Hola
Yo lo veo bien con Firefox, pero no con IE, que se ve como xav dice.
Hola a todos.

Pues ya sabeis donde esta el problema.
  #7 (permalink)  
Antiguo 29/01/2006, 14:07
 
Fecha de Ingreso: diciembre-2001
Ubicación: Málaga
Mensajes: 328
Antigüedad: 16 años
Puntos: 0
Cierto, ocurre en IE al limitar el ancho a 250 px. El por qué no lo sé, pero como bien dice Jorolo... ¡ya sabéis donde está el problema!
Un saludo
  #8 (permalink)  
Antiguo 04/02/2006, 12:48
xav
 
Fecha de Ingreso: enero-2006
Ubicación: Argentina
Mensajes: 79
Antigüedad: 11 años, 10 meses
Puntos: 1
Ok agradezco su ayuda y la atención dedicada a mi problema pero, sin mostrar desconformidad alguna (sino todo lo contrario) y sabiendo ahora dónde está el problema, pregunto: qué es lo mas aconsejable en estos casos? ¿Debo resignarme a no usar listas cuando algún item supere la atura de una línea o ,cosa que no veo como una solución viable, debería considerar la opción de ignorar a i.e.? Pido algún consejo porque he revisado las especificaciones de CSS2 del SIDAR y he vuelto a hacer nuevos intentos sin poder resolverlo hasta el momento.
Desde ya les agradezco.
Xav.
  #9 (permalink)  
Antiguo 04/02/2006, 12:49
xav
 
Fecha de Ingreso: enero-2006
Ubicación: Argentina
Mensajes: 79
Antigüedad: 11 años, 10 meses
Puntos: 1
Marcadores del liasta fuera de lugar

Ok agradezco su ayuda y la atención dedicada a mi problema pero, sin mostrar desconformidad alguna (sino todo lo contrario) y sabiendo ahora dónde está el problema, pregunto: qué es lo mas aconsejable en estos casos? ¿Debo resignarme a no usar listas cuando algún item supere la atura de una línea o ,cosa que no veo como una solución viable, debería considerar la opción de ignorar a i.e.? Pido algún consejo porque he revisado las especificaciones de CSS2 del SIDAR y he vuelto a hacer nuevos intentos sin poder resolverlo hasta el momento.
Desde ya les agradezco.
Xav.
  #10 (permalink)  
Antiguo 05/02/2006, 07:03
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
Cita:
Iniciado por xav
Ok agradezco su ayuda y la atención dedicada a mi problema pero, sin mostrar desconformidad alguna (sino todo lo contrario) y sabiendo ahora dónde está el problema, pregunto: qué es lo mas aconsejable en estos casos?
Buena pregunta
Cita:
Iniciado por xav
¿Debo resignarme a no usar listas cuando algún item supere la atura de una línea
Rendirse es de cobardes.
Cita:
Iniciado por xav
o ,cosa que no veo como una solución viable, debería considerar la opción de ignorar a i.e.?
Si no lo ves viable no lo hagas.
Algunos lo hacemos, pero lo cierto es que yo en ese sentido soy un privilegiado, los usuarios IE no están entre mi "público objetivo".
Cita:
Iniciado por xav
Pido algún consejo porque he revisado las especificaciones de CSS2 del SIDAR y he vuelto a hacer nuevos intentos sin poder resolverlo hasta el momento.
Hay una tercera opción, los hacks. Escribes tu codigo correctamente (tal y como lo estas haciendo) y para las cosas que no funcionan en IE usas un hack.
¿Cual?¿como? ni idea.
  #11 (permalink)  
Antiguo 05/02/2006, 14:48
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
Algunas consideraciones.

1.- Si vas a definir una secuencia con los elementos de la lista (A, B, C...) debes usar OL (lista ordenada o secuencial) y no UL (lista desordenada).

2.- El problema en IE lo está provocando la propiedad width en los elementos de la lista. Tal vez desde ahí debieras empezar a buscar la solución.

3. La solución más cercana que encontré fue:

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.lista3{
	list-style-type:upper-alpha;
	list-style-position:inside;
	width:250px;
	}
.lista3 li{
	margin:0;
	}
</style>
</head>
<body>
<div>
<ol class="lista3">
<li>Certificado de estudios secundarios o constancia provisoria de haber finalizado</li>
<li>Documento Nacional de Identidad</li>
<li>Fotocopia de partida de nacimiento legalizada</li>
<li>2 fotografías de 4 x 4 de frente (no instantáneas)</li>
<li>Certificado de Grupo Sanguíneo y Factor RH</li>
</ol>
</div>
</body>
</html>
__________________
El conocimiento es libre: Movimiento por la Devolución
  #12 (permalink)  
Antiguo 06/02/2006, 12:32
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Hola todos :

Encontré otra forma

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD>
<style>
.lista3 li{
font-family:Verdana, Arial, Helvetica, sans-serif;
width:250px;
text-align:left;
font-size:12px;
margin:0;
color: #000000;
line-height:17px;
background-color :yellow;
/* PERMITE ALINEAR LA VIÑETA (middle ; bottom)*/ 
vertical-align: top;
/*AJUSTE FINO DE POSICIÓN*/ 
position: relative;
top: -5px;
}

</style>

<BODY>



<p>bla bla bla..</p><br>
<ul class="lista3">
<li>Certificado de estudios secundarios o constancia provisoria de haber finalizado</li>
<li>Documento Nacional de Identidad</li>
<li>Fotocopia de partida de nacimiento legalizada</li>
<li>2 fotografías de 4 x 4 de frente (no instantáneas)</li>
<li>Certificado de Grupo Sanguíneo y Factor RH</li>
</ul>
<p>bla bla bla..</p><br>


</BODY></HTML>
Habría que estudiar razones y posibilidades de ésto.

saludos

[edit]

Epa!. No había visto lo de
Cita:
Iniciado por xav
...elegí list-style-type: upper-alpha pero me aparecen todas letras A...
Es un bugtosaurius. La única solución que hallé es

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD>
<style>
ol{list-style-type:upper-alpha;}
.lista3 li{
left:10px;
clear:both;
font-family:Verdana, Arial, Helvetica, sans-serif;
width:250px;
text-align:left;
font-size:12px;
margin:0;
color: #000000;
line-height:17px;
background-color :yellow;
/* PERMITE ALINEAR LA VIÑETA (middle ; bottom)*/ 
vertical-align: top;
/*AJUSTE FINO DE POSICIÓN*/ 
position: relative;
top: -5px;
}

</style>

<BODY>

<p>bla bla bla..</p><br>
<ol class="lista3">
<li value="1">Certificado de estudios secundarios o constancia provisoria de haber finalizado</li>
<li value="2">Documento Nacional de Identidad</li>
<li value="3">Fotocopia de partida de nacimiento legalizada</li>
<li value="4">2 fotografías de 4 x 4 de frente (no instantáneas)</li>
<li value="5">Certificado de Grupo Sanguíneo y Factor RH</li>
</ol>
<p>bla bla bla..</p>

</BODY></HTML>
[/edit]

Última edición por furoya; 16/02/2006 a las 14:06
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 04:52.