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 a todos: Intento crear un pie de foto pero no tengo éxito. Este es mi código @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original .piefotonoticias { ...
  #1 (permalink)  
Antiguo 12/04/2010, 12:42
 
Fecha de Ingreso: marzo-2005
Mensajes: 149
Antigüedad: 12 años, 9 meses
Puntos: 0
Pie de foto

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

Código CSS:
Ver original
  1. .piefotonoticias {
  2. color: #862101;
  3. font-family: Arial, Helvetica, sans-serif;
  4. font-weight:bold;
  5. font-size:10;
  6. text-align: right;
  7. padding-right: 5px;
  8. }
  9. .imagenborde {
  10. border: solid 2px;
  11. border-color:#5A3801;
  12. }

Código HTML:
Ver original
  1. <div>
  2. <img class="imagenborde" src="web/imagenes/exterior.jpg" width="280" height="210">
  3. <div class="piefotonoticias">A la derecha el diputado, a la izquierda el alcalde y en el centro la homenajeada
  4. </div>
  5. </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.
  #2 (permalink)  
Antiguo 12/04/2010, 13:05
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Pie de foto

hola, probá con esto:

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

  #3 (permalink)  
Antiguo 12/04/2010, 15:27
 
Fecha de Ingreso: marzo-2005
Mensajes: 149
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Pie de foto

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
  #4 (permalink)  
Antiguo 12/04/2010, 15:30
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Pie de foto

Es tan fácil como modificar esto:

Código CSS:
Ver original
  1. .picholder p{font-size:12px;color:#f00;font-style:italic;width:// modificas este ancho a gusto y piaccere;}
  #5 (permalink)  
Antiguo 12/04/2010, 15:33
 
Fecha de Ingreso: marzo-2005
Mensajes: 149
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Pie de foto

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.
  #6 (permalink)  
Antiguo 12/04/2010, 15:37
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Pie de foto

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.-
  #7 (permalink)  
Antiguo 12/04/2010, 15:52
 
Fecha de Ingreso: marzo-2005
Mensajes: 149
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Pie de foto

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
  1. .picholder{
  2. float: right;
  3. overflow:hidden;
  4. text-align:center;
  5. border:1px solid #000;
  6. padding:4px;
  7. display:table-cell;
  8. }    
  9. .picholder img{display:block;
  10. }    
  11. .picholder p{
  12. font-size:12px;
  13. color:#f00;
  14. font-style:italic;
  15. width:25%;
  16. }

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

Gracias

Etiquetas: foto, pie
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 20:42.