Autor Tema: [help] etiqueta img con texto sobre la imagen  (Leído 3383 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado tekun

  • -^- Elite Silver -^-
  • The Communiter-
  • *
  • Mensajes: 3221
  • Han convertido mi casa en cueva de mercaderes!!!!
    • www.tekun.es
[help] etiqueta img con texto sobre la imagen
« : julio 19, 2012, 11:59:18 am »
vaia, tengo un clavo con un pedazo de código html

tengo que insertar una imagen con la etiqueta <img> y, que tenga un texto sobre la imagen.. pero no logro hacerlo

no utilizo divs, porque donde lo voy a usar no me funcionan las imagenes en background... pero si puedo usar DIVS para el TEXTO, ahí si puedo contodos los poderes, así que ahí es donde necesito ayuda(según yo)... la onda esta así este es mi ejemplo de html que quiero modificar


Citar
<div align="left">
    <img src="http://www.sitioweb.com/imagen.gif" />
    <br/>
        <font face="Arial, Helvetica, sans-serif" size="6">Hola Comuniters</font>
    <br />
        Bienvenidos  a mi sitio
</div>

les explico el html(digo, por si las moscas), primero esta la etiqueta img, que tiene una imagen de 500x130 algo ancha... lo que necesito es que el texto Hola Comuniters(y lo demas), salga sobre la imagen...

pero ojo, noten, que todo el html que he escrito esta dentro de un DIV (align left), porque antes de ese DIV, tengo mas codigo html, les digo esto porque he intentado con ponerle al texto un div con la propiedad position:absolute, pero el mentado texto se va hasta el inicio de la "pagina", y eso obviamente no me sirve, quiero que el texto este sobre la imagen contenida en el DIV

Como hago?¿?¿

la imagen, a huevo debo de meterla con la etiqueta img src"bla bla bla" no puedo usar un div con un background... ese es el truco.. de ahi en el texto si puedo ocupar css sin ningún problem

jel plis
lo difícil lo hago rápido, con lo imposible, casi siempre me tardo un poquito

Desconectado g00mba

  • The Communiter-
  • *
  • Mensajes: 14587
  • SOMOS LEGION
    • ALABADO SEA MONESVOL
Re:[help] etiqueta img con texto sobre la imagen
« Respuesta #1 : julio 19, 2012, 12:11:40 pm »
probá poniendo el texto en un div con posicionamiento manual relativo (en tu caso creo que seria posicionamiento negativo).
<div position:relative, left:-5em>tutexto</div>

edit: corregido el nombre de lo que hay que hacer.
« Última Modificación: julio 19, 2012, 12:13:41 pm por g00mba »

Desconectado salvadoresc

  • Global Moderator
  • The Communiter-
  • *
  • Mensajes: 11652
  • Adobe Certified Expert en ACISEAPRENDE
    • Foro de Diseno - Pixeles al Desnudo
Re:[help] etiqueta img con texto sobre la imagen
« Respuesta #2 : julio 19, 2012, 12:16:25 pm »
el div debe tenerposicionamiento relativo, luego yo te recomiendo eliminar esa etiqueta font, podes usar etiqueta p o yo hice este ejemplo usando la etiqueta span a esos spans les pones posicionamiento absoluto y los moves con top, left, right o bottom segun sea necesario.

profit

Código: [Seleccionar]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.box {
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFF;
}
.box .hover1 {
position: absolute;
top: 20px;
left: 10px;
}
.box .hover2 {
position: absolute;
top: 40px;
left: 10px;
}
</style>
</head>

<body>
<div align="left" class="box">
  <img src="http://salvadoresc.com/uploads/2012/06/cropped-466515_10150756441444066_1036377669_o.jpg" />
    <br/>
<span class="hover1">Hola Comuniters</span>
    <br />
        <span class="hover2">Bienvenidos  a mi sitio</span>
</div>
</body>
</html>
« Última Modificación: julio 19, 2012, 12:18:15 pm por salvadoresc »
Awaken my child, and embrace the glory that is your birthright. Know that I am the Overmind; the eternal will of the Swarm.

haycoctelesamor.com

Desconectado spion

  • Sv Member
  • ***
  • Mensajes: 270
Re:[help] etiqueta img con texto sobre la imagen
« Respuesta #3 : julio 19, 2012, 12:19:31 pm »
vaia, tengo un clavo con un pedazo de código html

tengo que insertar una imagen con la etiqueta <img> y, que tenga un texto sobre la imagen.. pero no logro hacerlo

no utilizo divs, porque donde lo voy a usar no me funcionan las imagenes en background... pero si puedo usar DIVS para el TEXTO, ahí si puedo contodos los poderes, así que ahí es donde necesito ayuda(según yo)... la onda esta así este es mi ejemplo de html que quiero modificar


les explico el html(digo, por si las moscas), primero esta la etiqueta img, que tiene una imagen de 500x130 algo ancha... lo que necesito es que el texto Hola Comuniters(y lo demas), salga sobre la imagen...

pero ojo, noten, que todo el html que he escrito esta dentro de un DIV (align left), porque antes de ese DIV, tengo mas codigo html, les digo esto porque he intentado con ponerle al texto un div con la propiedad position:absolute, pero el mentado texto se va hasta el inicio de la "pagina", y eso obviamente no me sirve, quiero que el texto este sobre la imagen contenida en el DIV

Como hago?¿?¿

la imagen, a huevo debo de meterla con la etiqueta img src"bla bla bla" no puedo usar un div con un background... ese es el truco.. de ahi en el texto si puedo ocupar css sin ningún problem

lo que podes hacer es poner esa imagen como fondo del div y luego introducir el texto

<div class="tudiv">
    <p>Hola comuniters</p>
</div>


en un archivo css.

.tudiv{
     background: url(http://www.sitioweb.com/imagen.gif);
     height: 130px;
     weight: 500px;
     display: inline-block;
     float: left;
}

creo que seria lo mejor para vos hacerlo de esa manera.


Desconectado g00mba

  • The Communiter-
  • *
  • Mensajes: 14587
  • SOMOS LEGION
    • ALABADO SEA MONESVOL
Re:[help] etiqueta img con texto sobre la imagen
« Respuesta #4 : julio 19, 2012, 12:20:41 pm »
que feo tu modo chamba, venis a decir lo mismo pero asi bien bonito y fancy, puro pro. ya me voy mejor ya me ahuevo el chamba :(

Desconectado salvadoresc

  • Global Moderator
  • The Communiter-
  • *
  • Mensajes: 11652
  • Adobe Certified Expert en ACISEAPRENDE
    • Foro de Diseno - Pixeles al Desnudo
Re:[help] etiqueta img con texto sobre la imagen
« Respuesta #5 : julio 19, 2012, 12:27:18 pm »
XD sorry

spion, lee bien porfavor, el dijo claramente que no puede poner la imagen de fondo. debe de ir usando la etiqueta img obligatoriamente.
Awaken my child, and embrace the glory that is your birthright. Know that I am the Overmind; the eternal will of the Swarm.

haycoctelesamor.com

Desconectado Non Servium

  • Sv Member
  • ***
  • Mensajes: 426
  • Ilix Punx :)
Re:[help] etiqueta img con texto sobre la imagen
« Respuesta #6 : julio 19, 2012, 12:28:39 pm »
Tal y como dijeron todos pero en vivo  :yao_ming: : Aqui  :roll:
♫ Condenados a perder la libertad! Por no acatar las leyes que les asignaron. ♪ ♫
Decididos, decididos a emprender! Un camino largo y duro por no ser esclavos ♫


Watch

Desconectado tekun

  • -^- Elite Silver -^-
  • The Communiter-
  • *
  • Mensajes: 3221
  • Han convertido mi casa en cueva de mercaderes!!!!
    • www.tekun.es
Re:[help] etiqueta img con texto sobre la imagen
« Respuesta #7 : julio 19, 2012, 01:15:28 pm »
gracias spion, a los demás hay les deje el agradecimiento también....


guaaaooooo  que vergon es el foro.... GRACIAS :)
lo difícil lo hago rápido, con lo imposible, casi siempre me tardo un poquito

Desconectado Jaru

  • The Communiter-
  • *
  • Mensajes: 13252
  • some text
Re:[help] etiqueta img con texto sobre la imagen
« Respuesta #8 : julio 19, 2012, 01:54:00 pm »
N/A

Desconectado salvadoresc

  • Global Moderator
  • The Communiter-
  • *
  • Mensajes: 11652
  • Adobe Certified Expert en ACISEAPRENDE
    • Foro de Diseno - Pixeles al Desnudo
Re:[help] etiqueta img con texto sobre la imagen
« Respuesta #9 : julio 19, 2012, 02:13:21 pm »
naruto, veo que pusiste opacidad en el fondo detras del texto, una observacion con esto es que cuando haces eso... el texto hereda la opacidad tambien....
en lo personal prefiero hacer ese tipo de fondos con pngs con transparencia alfa, solo en casos que tengas texto encima del fondo opaco.
Awaken my child, and embrace the glory that is your birthright. Know that I am the Overmind; the eternal will of the Swarm.

haycoctelesamor.com