Texto sobre las fotos, lo he intentado, pero no lo pude hacer

[abelhoyos]

Hola a todos, tengo un site de noticias, y tengo una sección donde los titulares se muestran junto con la foto, necesito saber si pueden ayudarme a poner el texto sobre las fotos, asi como del diario www.elcomercio.pe, pueden ver el ejemplo en esa pagina.

Mi pagina en desarrollo es: Sanmartinenlinea.com y la seccion donde necesito poner el texto sobre las fotos es esta http://sanmartinenlinea.com/bannernoticias_original.php a la que llamo con un include.

He intentado con hacerlo pero solo he logrado hacer que el texto se monte uno sobre otro.

Espero su ayuda, Gracias.

[C2am]

Muestra como lo estas haciendo.
Si tu código es el del link que pones a tu web debo decirte que vas muy mal encaminado.
Un posible forma es:

Código HTML:

<div class="imagencontxt">
<img />
<p class="txtdeimg">texto de la imagen</p>
</div>
 

Y en el css

Código CSS:

.imagencontxt{
position:relative;}
 
.txtimg{
position:absolute;
left:0px;
bottom:0px;
z-index:2;
}
 

Es lo básico, luego deberás poner un fondo con una imagen semi-transparente al <p> que contiene el texto, etc.

Revisa el código de tu web porque tiene muchos errores, incluido este:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1" />
¿Cual es la codificación que usas utf-8 o iso?
Saludos

[kseso?]

Para este tipo de cuestiones viene muy bien echar mano de firebug o similares.
Así podrá ver qué propiedades/valores tienen declarado los distintos elementos.
Así, en el ejemplo de su consulta vemos que el texto está en:

Código CSS:

.media .title {
    background: url("/f/i/bg.destacados.png") repeat scroll 0 0 transparent;
    bottom: 0;
    left: 0;
    padding: 10px;
    position: absolute;
    width: 290px;
    z-index: 3;
 

y la imagen (dentro de un enlace) aparece después de ese texto en el html.

Rollo explicativo (puede saltárselo si sólo buscaba el código):
En el modelo de cajas que rige el comportamientos de los elementos de un documento web, todos y cada uno de dichos elementos ocupan un lugar "físico" y se aplica la máxima, como en el mundo real, de que dos elementos no pueden ocupar la misma posición al mismo tiempo.
Por lo tanto, para alterar dicho comportamiento, hay que actuar o declarar explícitamente en la propiedad "position"un valor tal que lo permita.

Position en w3c (traducción al castellano del sidar.org)
Una buena explicación, obra de Mikmoro

[abelhoyos]

Lo intentare, les aviso. Muchas gracias!

[abelhoyos]

chekeen esto:

http://www.cristalab.com/tutoriales/superposicion-de-objetos-de-html-overlapping-con-css-c184l/

y esto:

http://tympanus.net/jCapSlide/

Saludos

[kseso?]

¡¡¡¡¡¡¡¡¡¡Válgame todos los habitantes del averno!!!!!!!!
¿No pudo enlazar ejemplos mejores?

Iniciado por abelhoyos

chekeen esto:

http://www.cristalab.com/tutoriales/...con-css-c184l/
Quizás lo salve el que fuese escrito en 2006.
Encima resaltado:

Nota: La propiedad z-index solo aplica a elementos que tengan la propiedad position en absolute o relative.

Y hasta aquí pude leer:

Los elementos con position:absolute no tienen margenes pero sí bordes y padding.

y esto:

http://tympanus.net/jCapSlide/ <-- ¿desactivó el js? hágalo

Saludos

Lea atentamente los dos enlaces que le coloqué antes, por favor.