Insertar texto sobre imagen

tak74786 · #1 (**permalink**) 09/12/2013, 16:25

Estoy intentanto insertar un taxto sobre una imagen para q quede algo asi como se muestra en las fotos de http://www.abc.es/ sale la imagen y una descripcion al pie si lo inspeccionan con firebug veran q es un div q esta en la imagen y el texto es como si fuera de la imagen pero no le encuentro como posicionarla como lo hacen ellos tengo mi codigo asi:

Código HTML:

Ver original<a href="link" rel="bookmark">
        <img src="dir_imagen" >
            <div id="sombra">
                <div id="teximg">
                    TEXTO
                </div>
            </div>
        </img>
    </a>

Código CSS:

Ver original#sombra{ 
    color:#FFF;
    width:auto;
    background:none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    position: relative;
    top:0px;
    left:0;
    min-height: 15px;
    padding: 5px 0;
    position: relative;
    z-index: 1;
}
 
#teximg{
    float:none;
    display: inline;
    float: left ;
    font-size: 12px;
    font-weight: normal ;
    margin: 0;
    padding: 0 10px;
    text-align: left;
}

es mas o menos lo q veo que hacen en la paginas antes nombrada pero no me funciona el texto me sale debajo de la imagen y no es paarte de la imagen.
Gracias por su colaboracion

emilio_alac05 · #2 (**permalink**) 09/12/2013, 17:00

Me imagino que te refieres cuando posicionas el cursor por encima si es asi ponle un title a tu imagen. ejemplo <img src="ruta de tu imagen' title="texto a mostrar"> saludos.

tak74786 · #3 (**permalink**) 10/12/2013, 08:14

No amigo eso no pero gracias, mira la pagina http://www.abc.es/ y fijate en las imagenes que tienen las noticias debajo (en la imagen) hay una descripcion como si fuera parte de la imagen pero si descargas o le das ver imagen veras q no ese texto no es parte de la imagen y si chequeeas con firebug veras q cuando inspeccionas la imagen sale como si fuese uno pero si te vas en detalle no son lo mismo no se si me explico

emilio_alac05 · #4 (**permalink**) 18/12/2013, 12:31

Hola amigo disculpa si tu intencion es ponerle la franja negra y el texto pues eso lo puedes hacer usando estilos css, podrias hacerlo creandolo dentro de un div o el mismo texto poniendole un span y un id o class.

ejemp.

Código:

<style>
   #texto{
    font-family: aqui el tipo de letra;
    background:#000;
    width:20px;
    height:20px;
    color:#fff;
   }
</style>

<div id="texto">Texto de muestra</div>

saludos espero haberte ayudado, buen dia.

alzacon · #5 (**permalink**) 18/12/2013, 20:26

Cita:

Iniciado por tak74786

(...) y si chequeeas con firebug veras q cuando inspeccionas la imagen sale como si fuese uno (...)

Código HTML:

<a href="link" rel="bookmark">
        <img src="dir_imagen" >
            <div id="sombra">
                <div id="teximg">
                    TEXTO
                </div>
            </div>
        </img>
    </a>

¿Por qúe no chequeas todos los elementos equivalentes a los tuyos para ver las diferencias (en el CSS)?

Si a ellos les funciona y a ti no, será que tu no estás haciendolo en algo como ellos.

ccessaro · #6 (**permalink**) 18/12/2013, 22:59

<title>Documento sin título</title>

<style type="text/css">
#slogan {background:url(../images/slogan-bg.jpg) no-repeat left top;width:980px;height:220px;margin:12px 0 0 0;position:relative;left:3px;color:#fff;text-shadow:1px 1px

#3e7901;position:relative}

#slogan h2 {font-size:26px;text-transform:uppercase;color:#fff}

#slogan h2 span {color:#262626}

#slogan .inside {
position:absolute;
left:363px;
top:26px;
width:576px
}
</style>

* Aqui esta para la hoja de stilos

</head>

<body>

<div id="slogan">
<div class="inside">
<h2><span>Your Domain Name</span> Helps the World to Find You</h2>
<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>
</div>
</div>

</body>
</html>

Como puedes ver prueba los div y en h2 y p titulo y texto, espero te sirva.

gnzsoloyo · #7 (**permalink**) 19/12/2013, 03:50

Por favor, @ccesaro, usa los HIIGHLIGHT para resaltar el código que posteas. Así como lo pones (incluyendo esos colores espantosos), resulta ilegible.