tengo un problema con unas cajas de texto. El código que tengo hace que al situar el cursor sobre la imagen muestre una div con el texto que yo indique. El funcionamiento es normal, lo que pasa es que todas las imagenes éstas, que despliegan la información al poner el cursor sobre ellas, se alinean en vertical, y no quiero que hagan eso, lo que quiero es que se alineen de manera independiente y queden justo detrás de cada frase, os pongo ejemplos y luego el código.
Con lo que tengo se me queda así y es lo que no quiero:
Característica uno ........................... (i)
Característica dos laaaaaaaaarga .. (i)
Característica tres corta ................. (i)
Y yo quiero que se me quede así:
Característica uno (i)
Característica dos laaaaaaaaarga (i)
Característica tres corta (i)
Os pongo el código y me decís qué cambiar, que me estoy volviendo loco, ya no sé qué probar. He probado con divs, con tablas, dentro de la celda, fuera, divs dentro de divs...
Código HTML:
div.globinf {
position: relative;
float: right;
}
div.globinf span {
display: none;
}
div.globinf:hover {
background: none;
z-index: 999;
}
div.globinf:hover span {
display: inline;
position: absolute;
top: -42px;
left: Xpx;
background-image: url(imagenes/fondo_black.png);
background-repeat:no-repeat;
color: #F2F2F2;
padding: 18px;
width:250px;
height:auto;
text-align:justify;
text-shadow:0px 0px 4px #000;
}
Código HTML:
Característica uno <div class="globinf"> <img src="imagenes/info.png"></div> <br> Característica dos <div class="globinf"> <img src="imagenes/info.png"></div>
