Foros del web, para los que viven de bits

sjam7 · 28-jul-2006, 21:51

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-jul-2006, 04:02

Buenas,

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

sjam7 · 29-jul-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

sjam7 · 29-jul-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-jul-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

sjam7 · 29-jul-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-jul-2006, 11:25

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

sjam7 · 29-jul-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

29-jul-2006, 09:57	#4 (permalink)
sjam7 Fecha de Ingreso: noviembre-2002 Ubicación: Guadalajara, Mexico Mensajes: 3.254	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>

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado

29-jul-2006, 04:02	#2 (permalink)
tunait Moderadora Fecha de Ingreso: noviembre-2002 Ubicación: Terok Nor Mensajes: 14.905	Buenas, en mi firefox me sale el texto bajo la imagen en dos líneas

29-jul-2006, 09:35	#3 (permalink)
sjam7 Fecha de Ingreso: noviembre-2002 Ubicación: Guadalajara, Mexico Mensajes: 3.254	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

29-jul-2006, 10:29	#5 (permalink)
tunait Moderadora Fecha de Ingreso: noviembre-2002 Ubicación: Terok Nor Mensajes: 14.905	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

29-jul-2006, 10:51	#6 (permalink)
sjam7 Fecha de Ingreso: noviembre-2002 Ubicación: Guadalajara, Mexico Mensajes: 3.254	si, por ahora lo quite por que me descompuso el diseño de la pagina, estoy haciendo pruebas en local pero no encuentro como

29-jul-2006, 11:25	#7 (permalink)
tunait Moderadora Fecha de Ingreso: noviembre-2002 Ubicación: Terok Nor Mensajes: 14.905	¿Has probado cómo se comporta IE usando width en luegar de max-width?

29-jul-2006, 13:15	#8 (permalink)
sjam7 Fecha de Ingreso: noviembre-2002 Ubicación: Guadalajara, Mexico Mensajes: 3.254	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