Sangría francesa en listas

caricatos · #1 (**permalink**) 14/02/2009, 04:46

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

Mikmoro · #2 (**permalink**) 14/02/2009, 05:03

¿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.

caricatos · #3 (**permalink**) 14/02/2009, 07:05

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

kseso? · #4 (**permalink**) 14/02/2009, 10:03

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

Mikmoro · #5 (**permalink**) 14/02/2009, 11:30

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.

caricatos · #6 (**permalink**) 14/02/2009, 13:32

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

Mikmoro · #7 (**permalink**) 14/02/2009, 18:20

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.

ssclamp · #8 (**permalink**) 14/02/2009, 18:54

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

Mikmoro · #9 (**permalink**) 14/02/2009, 19:11

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>• 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>

Se ve exactamente igual en todos los navegadores. No es lo mismo pero se simula bien

ssclamp · #10 (**permalink**) 14/02/2009, 19:17

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

caricatos · #11 (**permalink**) 15/02/2009, 02:05

Hola:

Muy interesante, no sabía que era "•" 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 • para el content...

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

Saludos