Foros del Web » Creando para Internet » CSS »

Pie de foto

Estas en el tema de Pie de foto en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/09/2006, 16:52
Avatar de floren  
Fecha de Ingreso: febrero-2005
Ubicación: Málaga
Mensajes: 134
Antigüedad: 12 años, 10 meses
Puntos: 0
Pie de foto

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.
  #2 (permalink)  
Antiguo 11/09/2006, 18:31
 
Fecha de Ingreso: febrero-2005
Mensajes: 105
Antigüedad: 12 años, 9 meses
Puntos: 1
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!
  #3 (permalink)  
Antiguo 12/09/2006, 00:53
Avatar de floren  
Fecha de Ingreso: febrero-2005
Ubicación: Málaga
Mensajes: 134
Antigüedad: 12 años, 10 meses
Puntos: 0
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?
  #4 (permalink)  
Antiguo 12/09/2006, 01:09
Avatar de floren  
Fecha de Ingreso: febrero-2005
Ubicación: Málaga
Mensajes: 134
Antigüedad: 12 años, 10 meses
Puntos: 0
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
  #5 (permalink)  
Antiguo 12/09/2006, 05:36
 
Fecha de Ingreso: febrero-2005
Mensajes: 105
Antigüedad: 12 años, 9 meses
Puntos: 1
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!!
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 22:31.