Foros del Web » Creando para Internet » CSS »

Sangría francesa en listas

Estas en el tema de Sangría francesa en listas en el foro de CSS en Foros del Web. Hola: Ya he hecho muchas pruebas pero no consigo que la segunda línea de un item de una lista se posicione con sangría francesa, o ...
  #1 (permalink)  
Antiguo 14/02/2009, 04:46
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Sangría francesa en listas

Hola:

Ya he hecho muchas pruebas pero no consigo que la segunda línea de un item de una lista se posicione con sangría francesa, o sea más hacia el interior... pensé en poner un [margin/padding]-left del ul con un valor positivo y el text-indent del li con valor negativo, y en explorer y opera va bien, pero en los demás se puperpone el símbolo list-style con el texto (por el valor negativo)... probé fabricar algo con li:before pero en explorer no va, además de no poder poner el disc (lo maquillé con los diamantes... va código:

Código:
#prueba	{
	padding-left: 3em;
}

#prueba li	{
	text-indent: -1em;
}


#lista	{
	list-style: none;
	padding-left: 3em;
}
#lista li:before	{
	content: "\2666";
}
#lista li	{
	margin: 0;
	text-indent: -2em;
}
Me gustaría no usar ni javascript ni condiciones...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #2 (permalink)  
Antiguo 14/02/2009, 05:03
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Sangría francesa en listas

¿La segunda línea de texto, es decir, al margen del símbolo de lista, las segunda línea con respecto a la primera? buf, lo veo complicado.
Podrías poner el HTML, aunque esto me parece un poco raro, por lo que creo que no lo he entendido bien.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 14/02/2009, 07:05
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Sangría francesa en listas

Hola Mikel:

Sabía que te interesarías, y antes de postear me fijé en tu página.

Las sangrías francesas son así, en vez del sangrado normal hispano, a partir de la segunda línea empieza el indentado, así que para conseguir el efecto hay que poner un text-indent con valores negativos, y para párrafos normales se debe sangrar primero el contenedor para no perder el contenido....

No lo tengo en ninguna página visible, pero puedes pegar este código:

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
	http://www.caricatos.net/probador
</title>
<style type="text/css">
#prueba	{
	padding-left: 3em;
}

#prueba li	{
	text-indent: -1em;
}


#lista	{
	list-style: none;
	padding-left: 3em;
}
#lista li:before	{
	content: "\2666";
}
#lista li	{
	margin: 0;
	text-indent: -2em;
}
</style>
</head>
<body>
<ul id="lista">
<li>
dato normal
</li>
<li>
dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, 
dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, 
dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, 
</li>
<li>
dato normal
</li>
</ul>


<ul id="prueba">
<li>
dato normal
</li>
<li>
dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, 
dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, 
dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, 
</li>
<li>
dato normal
</li>
</ul>


</body>
</html>
... en mi famosos probador de scripts: Probador de scripts... los resultados en explorer son buenos, pero como no lo son en el resto pensé en hacer malabares.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #4 (permalink)  
Antiguo 14/02/2009, 10:03
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Sangría francesa en listas

Hola Caricatos.

Si he comprendido bien, quieres que todos los elementos tengan un indentado menos el primero, ¿correcto?

No se si esto será lo que necesitas, aunque supongo que ya lo habrás desechado por alguna razón:
Cita:
ul li {margin-left: 0; /*resto de propiedades*/}
ul li + li {margin-left: 3em; /*resto de propiedades*/}
Y en el caso de que fuese la primera línea de un texto, ¿serviría el pseudo-elemento "first-line"?

Aunque creo que vas por algo más complejo que no terminé de comprender.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 14/02/2009, 11:30
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Sangría francesa en listas

Esto así tan simple serviría tanto para IE6 como para Firefox, lo único es que la distancias es diferente en uno que en otro:
Cita:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
http://www.caricatos.net/probador
</title>
<style type="text/css">
#prueba li {
text-indent: -1em;
padding-left: 1em;
}
</style>
</head>
<body>
<ul id="prueba">
<li>
dato normal
</li>
<li>
dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo,
dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo,
dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo,
</li>
<li>
dato normal
</li>
</ul>
</body>
</html>
Si no te va bien yo buscaría o bien hacerlo con un span, o bien con una imagen de fondo en el LI.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 14/02/2009, 13:32
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Sangría francesa en listas

Hola:

Pues no se trata de eso kseso?, se trata de la segunda línea de cada elemento que no entra en una, o sea cuando se genera una segunda línea por desbordamiento.

Mikel: No va bien ni en explorer ni en opera... en el primero se pierden los discos y en el segundo se separa mucho.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #7 (permalink)  
Antiguo 14/02/2009, 18:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Sangría francesa en listas

Pues no sé muy bien, pero el ejemplo que he puesto:

- FF2 y 3, Chrome, Safari (win): espacio normal
- IE6, IE7, Opera 9.5: espacio más ancho, casi doble

Verse el bullet se ve en todos, sólo que en los IE + Opera el espacio es mayor.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 14/02/2009, 18:54
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
Respuesta: Sangría francesa en listas

Caricatos, ¿tienes algún problema en usar los valores del indentado en píxeles?; porque siguiendo el razonamiento de Mikel y aplicando valores en píxeles yo lo veo perfecto en ie6, ie7, opera, ff2, ff3 y chrome:

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
http://www.caricatos.net/probador
</title>
<style type="text/css">
#prueba li {
text-indent: -2px;
padding-left: 10px;
}
</style>
</head>
<body>
<ul id="prueba">
<li>
dato normal
</li>
<li>
dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, 
dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, 
dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, 
</li>
<li>
dato normal
</li>
</ul>
</body>
</html> 
Si no es esto lo que buscas, será que no lo he entendido.

Saludos
  #9 (permalink)  
Antiguo 14/02/2009, 19:11
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Sangría francesa en listas

No el problema es que la sangría francesa realmente se note, que es cuando IE y Opera cometen un error con el indentado negativo con respecto al símbolo.

¿Y probar este truquillo (no sería la primera vez, no para sangría francesa pero sí para otros problemas)?:
Cita:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
http://www.caricatos.net/probador
</title>
<style type="text/css">
#prueba li {list-style-type: none;
padding-left: 2em;
text-indent: -2em;
}
</style>
</head>
<body>
<ul id="prueba">
<li>&bull; dato normal</li>
<li>&bull; dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo,
dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo,
dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo</li>
<li>&bull; dato normal</li>
</ul>
</body>
</html>
Se ve exactamente igual en todos los navegadores. No es lo mismo pero se simula bien
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 14/02/2009, 19:17
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
Respuesta: Sangría francesa en listas

Mikel, si lo que se busca es lo que tú dices, tú código va perfecto: hace el indentado y se desplaza un poco más a la derecha que la caja de la primera línea. OK
  #11 (permalink)  
Antiguo 15/02/2009, 02:05
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Sangría francesa en listas

Hola:

Muy interesante, no sabía que era "&bull;" ese código, se vé que no lo busqué bien ... y ciertamente, lo que quería es que pudiese elegir el margen... supongo que con un em en decimales también conseguiría un sangrado pequeño (.1em por ejemplo )

Sabiendo lo del bull, me preparé un script para obtener el código, y modifiqué el before con ese valor:
li:before {content: "\2022";}

Con eso ya solo falla en explorer que parece que no admite before y after (supongo), así que se podría poner el condicional ...

Rectifico... es algo más "jodido"... añadí ese condicional (nunca lo había hecho, pero que que está bien)... y al probar el código en opera, También entra en la codición, y me salen 2 bolas...

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
http://www.caricatos.net/probador
</title>
<script>
hexa = "012356789ABCDEF";
function h(n)  {
 if (n < 16) return hexa.charAt(n);
 else return h(n / 16) + hexa.charAt(n % 16);
}
</script>
<style type="text/css">
li:before {content: "\2022";}

#prueba li {
list-style-type: none;
padding-left: 2em;
text-indent: -2em;
}

<!--[if IE]>
#prueba {
padding-left: 2.5em;
}
#prueba li {
padding-left: 0;
text-indent: -1.5em;
list-style-type: disc;
}
<![endif]-->
</style>

</head>
<body>
<ul id="prueba">
<li>dato normal</li>
<li>dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo,
dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo,
dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo, dato muy largo</li>
<li>dato normal</li>
</ul>
<span onclick="alert(h(this.innerHTML.charCodeAt(0)))">&bull;X</span>
</body>
</html>
Añadí el script para obtener el hexa del &bull; para el content...

De todos modos en la página que lo pensaba usar he determinado desistir...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
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 23:55.