Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   Notas al pie de una imagen (http://www.forosdelweb.com/f53/notas-pie-imagen-413082/)

sjam7 28/07/2006 21:51

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?

tunait 29/07/2006 04:02

Buenas,

en mi firefox me sale el texto bajo la imagen en dos líneas :pensando:

sjam7 29/07/2006 09:35

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 :pensando:

sjam7 29/07/2006 09:57

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>


tunait 29/07/2006 10:29

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 :arriba:

sjam7 29/07/2006 10:51

si, por ahora lo quite por que me descompuso el diseño de la pagina, estoy haciendo pruebas en local pero no encuentro como

tunait 29/07/2006 11:25

¿Has probado cómo se comporta IE usando width en luegar de max-width?

sjam7 29/07/2006 13:15

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


La zona horaria es GMT -6. Ahora son las 00:48.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.