Foros del Web » Creando para Internet » HTML »

Insertar texto sobre imagen

Estas en el tema de Insertar texto sobre imagen en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/12/2013, 16:25
 
Fecha de Ingreso: diciembre-2013
Ubicación: Caracas
Mensajes: 9
Antigüedad: 11 años
Puntos: 0
Información Insertar texto sobre imagen

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
  1. <a href="link" rel="bookmark">
  2.         <img src="dir_imagen" >
  3.             <div id="sombra">
  4.                 <div id="teximg">
  5.                     TEXTO
  6.                 </div>
  7.             </div>
  8.         </img>
  9.     </a>

Código CSS:
Ver original
  1. #sombra{
  2.     color:#FFF;
  3.     width:auto;
  4.     background:none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
  5.     position: relative;
  6.     top:0px;
  7.     left:0;
  8.     min-height: 15px;
  9.     padding: 5px 0;
  10.     position: relative;
  11.     z-index: 1;
  12. }
  13.  
  14. #teximg{
  15.     float:none;
  16.     display: inline;
  17.     float: left ;
  18.     font-size: 12px;
  19.     font-weight: normal ;
  20.     margin: 0;
  21.     padding: 0 10px;
  22.     text-align: left;
  23. }
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

Última edición por pzin; 09/12/2013 a las 17:15 Razón: formato código
  #2 (permalink)  
Antiguo 09/12/2013, 17:00
 
Fecha de Ingreso: septiembre-2012
Mensajes: 75
Antigüedad: 12 años, 2 meses
Puntos: 2
Respuesta: Insertar texto sobre imagen

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.
  #3 (permalink)  
Antiguo 10/12/2013, 08:14
 
Fecha de Ingreso: diciembre-2013
Ubicación: Caracas
Mensajes: 9
Antigüedad: 11 años
Puntos: 0
Busqueda Respuesta: Insertar texto sobre imagen

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
  #4 (permalink)  
Antiguo 18/12/2013, 12:31
 
Fecha de Ingreso: septiembre-2012
Mensajes: 75
Antigüedad: 12 años, 2 meses
Puntos: 2
Respuesta: Insertar texto sobre imagen

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.
  #5 (permalink)  
Antiguo 18/12/2013, 20:26
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 11 años, 7 meses
Puntos: 31
Respuesta: Insertar texto sobre imagen

Cita:
Iniciado por tak74786 Ver Mensaje
(...) 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.
  #6 (permalink)  
Antiguo 18/12/2013, 22:59
Avatar de ccessaro  
Fecha de Ingreso: noviembre-2008
Mensajes: 11
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: Insertar texto sobre imagen

<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.
  #7 (permalink)  
Antiguo 19/12/2013, 03:50
Avatar de gnzsoloyo
Moderador criollo
 
Fecha de Ingreso: noviembre-2007
Ubicación: Actualmente en Buenos Aires (el enemigo ancestral)
Mensajes: 23.324
Antigüedad: 17 años
Puntos: 2658
Respuesta: Insertar texto sobre imagen

Por favor, @ccesaro, usa los HIIGHLIGHT para resaltar el código que posteas. Así como lo pones (incluyendo esos colores espantosos), resulta ilegible.
__________________
¿A quién le enseñan sus aciertos?, si yo aprendo de mis errores constantemente...
"El problema es la interfase silla-teclado." (Gillermo Luque)

Etiquetas: css, imágen, imagenes+php, php
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 01:30.