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;
}