Foros del Web » Creando para Internet » CSS »

Notas al pie de una imagen

Estas en el tema de Notas al pie de una imagen en el foro de CSS en Foros del Web. Hola, estoy creando un portal y estoy empezando a maquetar todo con CSS dejando a un lado las tablas, ahora lo que quiero hacer es ...
  #1 (permalink)  
Antiguo 28/07/2006, 22:51
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
Notas al pie de una imagen

Hola, estoy creando un portal y estoy empezando a maquetar todo con CSS dejando a un lado las tablas, ahora lo que quiero hacer es en el area de noticias poner una nota al pie de una foto dentro del texto del articulo.

El CSS de la "tabla" esta asi:
Código HTML:
<div style="margin-top:5px; margin-bottom:10px">
<div align="left" style="background-image:url(images/fondopestana.jpg); background-repeat:repeat-x; border:1px solid #f96; width:360px; margin-top:10px; padding:3px; color:#006; border:1px solid #f63; font-weight:bold">
<div style="background-image:url(images/listaiconos4.gif);<%=icono%> ; background-repeat:no-repeat; padding-left:25px; height:18px"> TITULO DE LA NOTICIA</div></div>
    <div align="left" style="width:360px; padding:3px; border:1px solid #f93; border-top:0">

<div align="right" style="float:right"><img src="<%=imagen%>" align="left" style="margin:5px; border: 2px solid #ccc" alt="<%=rs("titulo")%>"><br clear="left">
<span style="font-size:9px"><%=rs("notaimagen")%></span>
</div>


 <div style="font-family:Tahoma, Arial, Verdana; font-weight:bold; font-size:11px; color:#666"><%=comentario%></div>


<%if id<>"" then%>
    <div style="font-family:Tahoma, Arial, Verdana; font-weight:normal; font-size:11px; color:#575757; margin-top:10px"><%=contenido%></div>

<%if rs("origen")<>"" then%>
<br clear="all">
<div style="font-size:11px">Fuente: <a href="<%if instr(rs("enlaceorigen"),"http://") then response.write rs("enlaceorigen") else response.write "http://"&rs("enlaceorigen")%>" target="_blank"><%=rs("origen")%></a></div><%end if%>

<%else%>
<p align="right" style="font-size:11px">
<%if rs("videourl")<>"" then%>
    <a href="videos.asp?id=<%=rs("id")%>" class="video">Ver video</a>
<%end if%>

<a href="noticias.asp?id=<%=rs("id")%>&amp;cat=<%=rs("categoria")%>" class="search">Ver nota completa</a>
</p><br clear="all">

<%end if%>
    </div>
</div> 
Perdon el codigo ASP que va pero solo es para mostrar o no algunas cosas, lo que esta en negritas es la parte de la foto, quiero que se vea la foto y una nota de esa imagen abajo de ella en un recuadro sin marcos

Actualmente esta asi: www.ajalas.com/noticias.asp?id=514

Y lo que quiero es esto:
http://www.mx.terra.com/ligaseuropea...EI4270,00.html

Pueden ver que incluso en el ejemplo hay texto arriba y abajo de la foto, en la mia el texto se alarga en una sola linea y se recorre la foto, por lo menos en Firefox.

¿Como podria hacer lo que quiero?
¿Tengo divitis?
  #2 (permalink)  
Antiguo 29/07/2006, 05:02
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Buenas,

en mi firefox me sale el texto bajo la imagen en dos líneas
  #3 (permalink)  
Antiguo 29/07/2006, 10:35
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
si, hice unos cambios y parece que se acerca a lo que deseo, lo voy a probar en IE y pongo los cambios que le hice, a ver si es la forma correcta de hacerlo
  #4 (permalink)  
Antiguo 29/07/2006, 10:57
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
Como siempre IE haciendo la diferencia y como casi siempre para mal

En el IE me muestra el texto en una sola linea y me recorre la imagen, lo tengo asi:

Código HTML:
<div style="float:right">
<img src="imagen.gif" align="left" style="margin:5px; border: 2px solid #ccc">
<br clear="all">
        <div style="margin-top:-5px; margin-left:5px; font-size:9px; max-width:150px; text-align:left; color:#666; font-style:italic">
NOTA AL PIE
</div>
    </div> 
  #5 (permalink)  
Antiguo 29/07/2006, 11:29
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
sjam7, no veo nota al pie de imagen ... ¿estas haciendo cambios ahora?


Agrego: IE no reconoce el atributo min-width ni max-width, debes aplicarle el width directamente
  #6 (permalink)  
Antiguo 29/07/2006, 11:51
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
si, por ahora lo quite por que me descompuso el diseño de la pagina, estoy haciendo pruebas en local pero no encuentro como
  #7 (permalink)  
Antiguo 29/07/2006, 12:25
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
¿Has probado cómo se comporta IE usando width en luegar de max-width?
  #8 (permalink)  
Antiguo 29/07/2006, 14:15
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
voy a problarlo pero como todo es dinamico, las fotos no son siempre del mismo tamaño por eso habia intentado hacerlo con valores relativos pero intentare eso que dices y te comento
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 08:33.