Pie de foto

etanol · #1 (**permalink**) 12/04/2010, 11:42

Hola a todos:
Intento crear un pie de foto pero no tengo éxito.
Este es mi código

Código CSS:

Ver original.piefotonoticias {
color: #862101;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:10;
text-align: right;
padding-right: 5px;
}
.imagenborde {
border: solid 2px;
border-color:#5A3801;
}

Código HTML:

Ver original<div>
<img class="imagenborde" src="web/imagenes/exterior.jpg" width="280" height="210">
<div class="piefotonoticias">A la derecha el diputado, a la izquierda el alcalde y en el centro la homenajeada
</div>
</div>

Se me ocurre que podría darle un "width" al div contenedor de 280 pero el problema está que tengo imagenes de diferentes anchuras.

Alguien puede ayudarme??
Gracias de antemano.

DragonX · #2 (**permalink**) 12/04/2010, 12:05

hola, probá con esto:

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>New Document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style>
    .picholder{overflow:hidden;text-align:center;border:1px solid #000;padding:4px;display:table-cell;}
    .picholder img{display:block;}
    .picholder p{font-size:12px;color:#f00;font-style:italic;}
    </style>
  </head>
  <body>
    <div class="picholder">
      <img src="img a mostrar" alt="" />
      <p>A la derecha el diputado, a la izquierda el alcalde y en el centro la homenajeada</p>
    </div>
  </body>
</html>

etanol · #3 (**permalink**) 12/04/2010, 14:27

Gracias por la respuesta pero el problema que se plantea con el código que has escrito es que no limita horizontalmente la extensión del comentario del pie de foto (es tan largo horizontalmente como el comentario del pie de foto).

Alguna sugerencia?? Gracias

DragonX · #4 (**permalink**) 12/04/2010, 14:30

Es tan fácil como modificar esto:

Código CSS:

Ver original.picholder p{font-size:12px;color:#f00;font-style:italic;width:// modificas este ancho a gusto y piaccere;}

etanol · #5 (**permalink**) 12/04/2010, 14:33

Lo que sucede es que las imágenes que hay que comentar tienen diferentes dimensiones (por tanto anchuras "width").

Me refiero si hay algo para que se adapte al ancho de la imagen.

Gracias.

DragonX · #6 (**permalink**) 12/04/2010, 14:37

utilizando porcentaje, ya que el div que contiene todo se acomoda a la imagen.

Si tu imagen mide 800px, el texto del footer va a ocupar el 25% (si al width le pones 25%), del tamaño de la foto. Si la foto mide 1.000px va a suceder lo mismo.

Vos probaste lo que te puse o no te parece que sea lo que estas preguntando y ni lo probaste?

Slds.-

etanol · #7 (**permalink**) 12/04/2010, 14:52

Claro que si lo he probado, por eso se me plantea el problema que he descrito (por lo menos en IE), lo que sucedía es que no había pensado en los porcentajes

. Lo siento.

Ya resuelto el tema del width... una última duda que se me plantea:
¿cómo hago el float?

...porque he probado:

Código CSS:

Ver original.picholder{
float: right;
overflow:hidden;
text-align:center;
border:1px solid #000;
padding:4px;
display:table-cell;
}    
.picholder img{display:block;
}    
.picholder p{
font-size:12px;
color:#f00;
font-style:italic;
width:25%;
}

Código HTML:

Ver original<body>
sdkjfñlksfdjñsldf sldkjfsñldjf ñsldjfsñ dfñ sdñlfj sñj sdfñlkjs sdklfjs dlf sa&ntilde;ldfjsd 
&ntilde;lsdjf sdf &ntilde;lksdjf &ntilde;sklfj &ntilde;slkdfj s&ntilde;lkfj sdflkjs 
dlfkjs d&ntilde;flkjs d&ntilde;flkjs&ntilde;l kfs&ntilde;lkjf sa&ntilde;lkjf skdfj 
&ntilde;slk fs&ntilde;ljd f&ntilde;lskdjf lsjd fls&ntilde;d fl&ntilde;s dflksjd 
&ntilde;lfj s&ntilde;ljf &ntilde;slkf lskj flks fl&ntilde;kjs dlfjsl fdjsl&ntilde;d 
flksjd flks klfjs dfjls dfl&ntilde;sa jfd&ntilde;ljsd&ntilde;lf js&ntilde;ldj 
f&ntilde;slajd f&ntilde;lksj f&ntilde;lsdj f&ntilde;slkj fsldk f 
<div class="picholder"><img src="web/imagenes/exterior.jpg" width="280" height="210" alt="" />
  <p>A la derecha el diputado, a la izquierda el alcalde y en el centro la homenajeada</p>    
</div>  
</body>

...y en IE me aparece la imagen debajo y el texto no envuelve la imagen

Gracias