Pie de foto

[floren]

Hola, es la primera vez que escribo por aquí. He estado dando vueltas con la búsqueda, y aunque se plantea varias veces, no he llegado a ver la solución en ninguno de los hilos abiertos.

Tengo una web con artículos, una foto que se alinea a la derecha, y deseo colocar un pie de foto, a veces largo. Este texto debería ocupar 2 o 3 líneas, y sin embargo se queda en una sóla haciendo que la capa que aloja la foto se desplace hacia la izquierda (no sé si me explico )

Código:

.cajafoto{
	float : right;
	clear : none;
	padding:5px;
	border : 1px solid #E3E3E3;
}

.piefoto{
	clear: right;
	width: auto;
	font-size : 7pt;
	text-align : right;
}

Código PHP:

  echo "<div class=\"cajafoto\">"; 
echo "<img src=\"$foto\" alt=\"".$row[8]."\">\n"; 
echo "<div class=\"piefoto\">".$row['piefoto']."</div>"; 
echo "</div>";  
   

Y gracias por vuestras sugerencias.

[gazpachoymochil]

Lo que creo que te ocurre es que al indicar que la caja que contiene el pie de foto sea de un width: auto, a medida que vas insertando texto esta caja va haciéndose ancha. La solución sería ponerle un width fijo. Mi consejo es que pruebes con un width al azar (por ejemplo 15px) e intentes probar si funciona. Sino intentaremos solucionarlo de otra forma.

Suerte!

[floren]

Gracias Gazpachoymochil por tu respuesta (me imagino que le falta la "o" a tu nick )

Las últimas pruebas las hice con "auto", pero sin él también ocurre lo mismo. Intenté poner un ancho proporcional (50% del contenedor principar de la noticia), pero el problema es que si la foto es más grande, se sale de la caja.

Hasta ahora lo tenía con tablas, y en el primer TD colocaba la foto, y en el segundo el texto, adaptándose éste al ancho de aquella, y ocupando tantas líneas como hiciera falta.

También he probado a poner un único DIV, insertando en él la foto y el texto, pero ocurre exactamente lo mismo.

¿Alguna sugerencia?

[floren]

Vaya, lo he probado y de momento me saca del apuro. He aligerado código y se queda así:

Código:

.cajafoto{
	float : right;
	padding : 5px;
}

.piefoto{
	width : 200px;
	font-size : 7 pt;
	text-align : right;
}

Cuando me decías lo del ancho fijo, pensé que te referías al .cajafoto, pero releyendo ya me percatado del width en el .piefoto. Me soluciona el tema y espero que el usuario no suba imágenes demasiado estrechas.

Saludos,

Floren

[gazpachoymochil]

Jaja, lo de la "o" tienes razón. Al registrarme no sé si fue porque no se admitían más caracteres o que me faltó por teclear esa letra pero... da igual!!.

Y bueno, la verdad es que la solución que pensé es un poco :-p porque es cierto que has de ajustar el width de la clase ".piefoto" al ancho de la fotografía, pero sigo pensando que la solución es, más o menos, de ese tipo. La verdad es que si te funciona pues perfecto!!

Ta lueg!!