Foros del Web » Creando para Internet » CSS »

Problema de alineado de texto con CSS

Estas en el tema de Problema de alineado de texto con CSS en el foro de CSS en Foros del Web. Se me plantea un problema que no se como resolver con CSS y XHTML. Imaginemos tres líneas de texto de diferente longitud, lo que pretendo ...
  #1 (permalink)  
Antiguo 19/10/2010, 18:23
 
Fecha de Ingreso: octubre-2010
Mensajes: 5
Antigüedad: 7 años, 1 mes
Puntos: 0
Problema de alineado de texto con CSS

Se me plantea un problema que no se como resolver con CSS y XHTML.

Imaginemos tres líneas de texto de diferente longitud, lo que pretendo es poder centrar horizontalmente la línea más larga de las tres (en el ancho total de la página) y que las otras dos se queden alineadas a la izquierda con respecto a esa más larga, pudiendo ser cualquiera de las tres la más larga.

La cuestión seria poder hacerlo con CSS de forma que si ampliamos el tamaño de la fuente, por ejemplo de font-size: 100% a font-size: 120% se siga cumpliendo la condición de alineación propuesta.

A lo mejor es muy fácil de hacer pero yo, en estas cuestiones, estoy un poco pez.

Gracias de antemano y saludos.
  #2 (permalink)  
Antiguo 19/10/2010, 19:16
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema de alineado de texto con CSS

hola catalineitor, podrias poner una imagen/captura del problema?
  #3 (permalink)  
Antiguo 20/10/2010, 02:26
 
Fecha de Ingreso: octubre-2010
Mensajes: 5
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Problema de alineado de texto con CSS

Esta sería la cuestión explicada graficamente:


Última edición por catalineitor; 20/10/2010 a las 02:40
  #4 (permalink)  
Antiguo 20/10/2010, 03:37
 
Fecha de Ingreso: septiembre-2010
Ubicación: http://nomenrecordo.blogspot.com/
Mensajes: 111
Antigüedad: 7 años, 2 meses
Puntos: 1
Respuesta: Problema de alineado de texto con CSS

Tienes que hacer flotar los 3 contenedores (float:left), ahora, para que se te cambien los width de cada uno pues ni idea.
  #5 (permalink)  
Antiguo 20/10/2010, 10:25
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema de alineado de texto con CSS

Hola catalineitor, estimo que solo con css no vas a poder lograr hacer lo que buscas.
podrías hacerlo con javascript pero te deberías tomar un gran trabajo. Ya que no hay modo de asignar un ancho a una etiqueta de línea como <span> por ejemplo, sin previamente convertirla a bloque con display:block; y como toda caja de bloque ocupa el 100% del ancho que encuentra en su contenedor deberías dar manualmente ese valor haciendo para ello un riguroso estudio de proporciones de acuerdo a la familia tipográfica que elijas.

Digo lo anterior basandome en este ejemplo que hice:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>centrado a la catalineitor</title>
		<style type="text/css">
		*{margin:0; padding:0;}
		body{
		font-size:13px;
		font-family:Tahoma;
		color:white;
		}
		#cotenedor{width:900px; overflow:hidden; background:red;}
		.flotan {float:left; width:280px; background:gray; padding:10px;}
		.parrafo {outline:1px solid blue;}
		.parrafo span{outline:1px solid red; margin:0 auto;}
		</style>
	</head>
	<body>
	<div id="contenedor">
		<div class="flotan">
			<p class="parrafo">
				<span>La línea número uno es la más larga</span><br />
				<span>Línea número dos</span><br />
				<span>Línea nº3</span>
			</p>
		</div>
		<div class="flotan">
			<p class="parrafo">
			<span>Línea número dos</span><br />
			<span>La línea número uno es la más larga</span><br />
			<span>Línea nº3</span>
			</p>
		</div>
		<div class="flotan">
			<p class="parrafo">
			<span>Línea nº3</span><br />
			<span>Línea número dos</span><br />
			<span>La línea número uno es la más larga</span>
			</p>
		</div>
	</div>
	</body>
</html> 
Deberías determinar cuanto mide una cadena de caracteres de longitud "x" teniendo en cuenta que una letra "a" tiene mayor ancho que una letra "i" por ejemplo.

Una vez echo esto, contar los caracteres de tus lineas y tomar la linea que mayor cantidad de caracteres tenga y reemplazar este numero por el ancho proporcional calculado previamente.

Almacenas ese dato (ancho que calculaste) en una variable y se lo pasas al ancho de .parrafo{}(padre de los <span>) y al mismo tiempo centras el bloque .parrafo{} Tu estilo quedaría así .parrafo{width: amcho_variable ; margin:0 auto;}

Un verdadero quilombo!

Espero que alguien mas experimentado que yo pueda dar con una solución más simple que la mía, ya que mi propuesta no es muy práctica que digamos jaja.

Suerte!
  #6 (permalink)  
Antiguo 20/10/2010, 18:02
Avatar de HackmanC  
Fecha de Ingreso: enero-2008
Ubicación: Guatemala
Mensajes: 1.817
Antigüedad: 9 años, 10 meses
Puntos: 260
Sonrisa Respuesta: Problema de alineado de texto con CSS

Hola,

Posiblemente, usando display: inline-block.
http://foohack.com/2007/11/cross-bro...block-styling/

Código CSS:
Ver original
  1. #contenedor { width: 100&#37;; font-size: 9px; }
  2. .flotan { float: left; text-align: center; width: 30%; border: 2px solid #000; padding: 40px 6px; margin: 0px 6px; }
  3. .parrafo { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; text-align: left; }

Y usando el código de cristian_cena, que use como base,

Código HTML:
Ver original
  1. <div id="contenedor">
  2.         <div class="flotan">
  3.             <p class="parrafo">
  4.                 <span>La línea número uno es la más larga</span><br />
  5.                 <span>Línea número dos</span><br />
  6.                 <span>Línea nº3</span>
  7.             </p>
  8.         </div>
  9.         <div class="flotan">
  10.             <p class="parrafo">
  11.             <span>Línea número dos</span><br />
  12.             <span>La línea número uno es la más larga</span><br />
  13.             <span>Línea nº3</span>
  14.             </p>
  15.         </div>
  16.         <div class="flotan">
  17.             <p class="parrafo">
  18.             <span>Línea nº3</span><br />
  19.             <span>Línea número dos</span><br />
  20.             <span>La línea número uno es la más larga</span>
  21.             </p>
  22.         </div>
  23.     </div>

Saludos,
  #7 (permalink)  
Antiguo 20/10/2010, 18:46
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema de alineado de texto con CSS

Ahhh HackmanC, lo suyo es excelente! felicidades.

edito: digno de faq su aporte.

Última edición por cristian_cena; 20/10/2010 a las 18:51
  #8 (permalink)  
Antiguo 21/10/2010, 06:00
 
Fecha de Ingreso: octubre-2010
Mensajes: 5
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Problema de alineado de texto con CSS

Extraordinario.

La imágen que puse eran tres ejemplos de pantallas independientes, no tenian que aparecer los tres a la vez, con lo que será más sencillo el código, la idea era poder poner cualquier texto e independientemente de su longitud se alineara a la izquierda con respecto a la línea más larga que siempre tenía que salir centrada.

Aunque no dudo que la solución de "cristian_cena" funcione, la veo más complicada que la de "HackmanC", aunque és muy profunda para mi nivel de CSS, pero intentaré destriparla, asimilarla y adaptarla con cuidado.

Muchas gracias a los dos por vuestro interés, y saludos.

Catalineitor.
  #9 (permalink)  
Antiguo 21/10/2010, 09:07
 
Fecha de Ingreso: octubre-2010
Mensajes: 66
Antigüedad: 7 años, 2 meses
Puntos: 7
Respuesta: Problema de alineado de texto con CSS

Basándome en la solución de HackmanC, pero arreglando posibles bugs con IE y display-block:

Código HTML:
Ver original
  1. <div class="contenedor">
  2.     <span class="centrado">
  3.         <p>La línea número uno es la más larga</p>
  4.         <p>Línea número dos</p>
  5.          <p>Línea nº3</p>
  6.     </span>
  7. </div>

Código CSS:
Ver original
  1. .contenedor{
  2.     background: #c00;   /* test */
  3.     width: 400px;  /* por ejemplo */
  4.     text-align: center;
  5. }
  6. .centrado{
  7.     background:#fff; /* test */
  8.     display: inline-block;
  9.     text-align: left;
  10. }

display inline-block puede no funcionar correctamente en IE6 y 7 si se aplica sobre un elemento que no sea inline por defecto (por eso mi .centrado es un span)

Última edición por hdennison; 21/10/2010 a las 09:15
  #10 (permalink)  
Antiguo 28/10/2010, 05:57
 
Fecha de Ingreso: octubre-2010
Mensajes: 5
Antigüedad: 7 años, 1 mes
Puntos: 0
Pregunta Respuesta: Problema de alineado de texto con CSS

Ante todo gracias a los tres, "hdennison", "HackmanC" y "cristian_cena".

Tengo el problema a medio resolver, me funciona a medias, mejor empiezo desde el principio aportando más información al respecto por si puede ayudar.

Mis conocimientos de CSS y XHTML, se remontan a leer manuales y hacer algunas pruebas, o sea que tengo la mente un poco embotada ultimamente por ello.

Digo XHTML en lugar de HTML porque lo que estoy haciendo es un libro electrónico, en formato .epub que internamente consta de hojas de estilo en cascada CSS y de documentos XHTML (simplificando un poco el tema).

A modo informativo, en cuanto a las convenciones de como hay que realizar un .epub, no teneis que preocuparos, las tengo claras e incluso chequeo los .epub con una utilidad llamada "epubcheck" y están perfectos.

Internamente cada capítulo del libro es un documento XHTML al que le cargo una CSS de siguiente manera:

Código HTML:
<link rel="stylesheet" type="text/css" href="../Styles/libro.css"/> 
La cuestión es que en cada capítulo tengo lógicamente textos diferentes, entre los que se encuentra el bloque que me da tantos quebraderos de cabeza, dicho bloque es una especie de comentario de 2, 3 o 4 líneas de texto que va firmado. Lo que pretendo, como comenté en el primer mensaje, es centrar con respecto al ancho total de la página la línea más larga de entre esas 2, 3 o 4 que pertenecen al comentario, que el resto de líneas se alineen a la izquierda con respecto a la más larga y que además la firma, que pongo al final de dicho comentario siempre se coloque a la derecha utilizando de tope la línea larga.

El código CSS que utilizo lo saqué de la aportación de "HackmanC" adaptándolo un poco a la cuestión (puede que la aplicación que le he dado no sea la correcta):

Código CSS:
Ver original
  1. body{/*Estilo general del libro*/
  2.     margin: 0px 10px;
  3.     color: black;
  4.     font-family: Georgia, "Times New Roman", Times, serif;
  5.     font-style: normal;
  6.     font-weight: normal;
  7.     font-size: 100%;
  8.     line-height: 140%;
  9.     text-decoration: none;
  10. }
  11. #contenedor{/*Contenedor del Comentario*/
  12.     width: 100%;
  13.     text-align: center;
  14. }
  15. .parrafo{/*Efecto para el Comentario*/
  16.     display: -moz-inline-stack;
  17.     display: inline-block;
  18.     text-align: left;
  19. }
  20. .entradilla{/*Estilo del Comentario*/
  21.     font-size:105%;
  22.     font-style: italic;
  23. }
  24. .firma-entradilla{/*Estilo de la Firma del Comentario*/
  25.     font-size:90%;
  26.     font-style: normal;
  27.     font-variant: small-caps;
  28. }
  29. p{/*Párrafos de texto mas separados y sangrados en la primera linea*/
  30.     margin: 1ex 0px;
  31.     text-indent: 1.2em;
  32. }

Y el código XHTML que utilizo es el siguiente:

Código HTML:
Ver original
  1. <div id="contenedor">
  2.     <div class="parrafo" style="margin-bottom: 40px">
  3.         <span class="entradilla">Tus ovejas, que tan mansas acostumbraban a ser…</span>
  4.         <br />
  5.         <span class="entradilla">devoran a los mismos hombres.</span>
  6.         <br />
  7.         <p class="firma-entradilla" style="text-align: right">
  8.         – Thomas More, <i>Utopia</i> (1516)</p>
  9.     </div>
  10. </div>

Ojo a la "firma-entradilla" que si la coloco en un <span class="firma-entradilla" style="text-align: right"> no me alinea el texto a la derecha, por eso lo he puesto en un <p class="firma-entradilla".......

Como entiendo que es complicado de comprender a simple vista (yo porque ya estoy con ello varios días) os pongo una captura de como queda (el recuadro representa el ancho total de la pantalla):




Y ahora es cuando me dareis todos en la cabeza cuando os diga que:

1.- Utilizo un Macintosh para realizar todo ésto con un editor llamado "Coda" (a mi entender muy bueno).

2.- Que siempre chequeo el código con dicho programa para que no se salga de las convenciones: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


3.- Que en pantalla funciona todo, tanto en el visualizador que incorpora dicho programa como si lo visualizo con "Mozilla Firefox" o "Safari".

4.- Que el .epub una vez generado lo cargo en un "iPad" de Apple que lee perfectamente libros electrónicos en formato .epub.


Y por fin, el comportamiento al leer el libro en el "iPad" es el siguiente:

1. Cuando el capítulo que visualizo tiene más texto después del citado comentario (tanto texto como para que salte a una segunda página) todo funciona de muerte.

2. Pero si en cualquier capítulo después del citado comentario no hay texto suficiente para volver una página (o si es el único elemento de la página) entonces no funciona del todo, y la última línea (la de la firma) no me la alinea a la derecha, se queda a la izquierda y con el sangrado de "text-indent: 1.2em;" que tiene el elemento <p>.

No tengo ningún otro lector de libros electrónicos para poder probar que pasa en éste caso concreto, si no ya lo habría probado.

Ya sé que lo tengo complicado, pero si se os ocurre qué es lo que puede estar pasando os agradeceré cualquier aportación al respecto, los "Ibuprofeno" diarios con el tema se están convirtiendo en algo habitual.

Saludos.
  #11 (permalink)  
Antiguo 28/10/2010, 09:13
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema de alineado de texto con CSS

Bueno, con esta última información relativa al texto en cuestión, todo cambia.
No son 3 /p/ que variarían en su contenido aleatoriamente.
Lo que tenemos es una cita compuesta por un frase (más bien breve) y como colofón, el autor, obra y fecha.
La cita propiamente dicha se alínea justificada (o a la izquierda) Todo depende de un pequeño detalle. A ver si nota las sutiles diferencia entre una y otra. *(1)
El pie de la cita (autor, obra, año) en una línea aparte y alineada a la derecha.
Fíjese en el siguiente ejemplo que tenía por ahí.
La parte que le concierne principalmente es el pie, más exáctamente esta parte de código html:
Código HTML:
Ver original
  1. <p class="entradilla">Tus ovejas, que tan mansas acostumbraban a serdevoran a los mismos hombres.
  2.         <span class="autor-entradilla"> Thomas More, <span class="obra-entradilla">Utopia</span> (1516) -</span></p>

El css asociado está en el /head/.
*(1) También se podría poner el pie de cita en otro párrafo /<p></p>/ con su clase correspondiente y abría más libertad de juego.

Desconozco el comportamiento en el lector de .epub

Ya dirá cómo lo ve y si es apropiado a sus necesidades.

P.D.: en esa parte del html he respetado su etiquetado. Aunque creo que sería más apropiado utilizar el tag natural que le correspondería:
Código HTML:
Ver original
  1. <cite>Tus ovejas, que tan mansas acostumbraban a serdevoran a los mismos hombres.
  2. <span class="autor"> Thomas More, <span class="obra">Utopia</span> (1516) -</span></cite>

Última edición por kseso?; 28/10/2010 a las 09:37

Etiquetas: Ninguno
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 16:14.