Posicionar sobre imagen

alvaro0022 · #1 (**permalink**) 22/02/2011, 00:03

Hola.

Tengo el siguiente problema con los thumbnails de mi sitio. Al pasar el mouse sobre ellos aparece el nombre de la imagen sobre un fondo negro; pero estoy aparece en la parte superior y me gustaría que aparezca en la parte inferior así:

Este es mi codigo css:

Código PHP:

  <style type="text/css">

*  {

border-width:    none;

margin:    0;

padding:    0;

}

 
.over  {

height:    228px;

overflow:    hidden;

position:    relative;

width:    304px;

}

 
.over span.tooltip  {

display:    none;

}

 
.over:hover span.tooltip  {

background-color:    #000000;

color:    #FFFFFF;

display:    list-item;

float:    left;

font-family:    Helvetica;

font-size:    10pt;

font-weight:    bold;

left:    0;

padding-bottom:    10px;

padding-top:    10px;

position:    absolute;

text-align:    left;

text-transform:    uppercase;

top:    0;

width:    304px;

z-index:    10;

}

 
body, html  {

height:    100%;

width:    100%;

}

</style>

</head>

<body>

<div class="over">{thumbnail}

<span class="tooltip">{image_name}</span></div>

</body>

</html>

Saludos!!

kseso? · #2 (**permalink**) 22/02/2011, 03:06

¿Ésta no es la misma consulta que ésta otra?

alvaro0022 · #3 (**permalink**) 22/02/2011, 07:01

Saludos Kseso

Gracias por la recomendacion de validacion. Pero este sitio http://www.picalls.com/picalls es solo un sitio de prueba.

No es la misma pregunta que el post anterior es distinte.

Slaudos!!

kseso? · #4 (**permalink**) 22/02/2011, 07:40

Y qué mas da que que la incidencia sea en 1 o en 500 páginas distintas si el código implicado que facilita es el mismo.

Uploaded with ImageShack.us

¿Ha intentado algo de lo indicado en su primera consulta? Esto es, depuración de errores y conversión a elemento de línea?

alvaro0022 · #5 (**permalink**) 22/02/2011, 08:13

Como no obtuve respuesta volví a preguntar pero ahora quiero otra cosa. No es lo mismo que antes.

Solo quiero que el texto con fondo negro aparezca en la parte inferior de cada imagen y no en la superior.

Saludos y disculpa las molestias.

kseso? · #6 (**permalink**) 22/02/2011, 08:21

Librosweb.es manual de inicio a css capítulo 5: posicionamiento
http://librosweb.es/css/capitulo5.html

GAST0N · #7 (**permalink**) 22/02/2011, 08:38

MODIFICA ESTA REGLA ..ASI:

Código:

.over:hover span.tooltip  { 
    background-color: #000000;
    color: #FFFFFF;
    display: list-item;
    float: left;
    font-family: Helvetica;
    font-size: 10pt;
    font-weight: bold;
    left: 0;
    text-align: left;
    text-transform: uppercase;
    top: 10px;
    width: 304px;
    z-index: 10;
    margin-top: 192px;
}