Problema con la position absolute dentro de una lista

[asalto_27]

Hola Tengo el suguiente Problema con la position absolute dentro de una lista:

El estilo solo lo toma para los div de la primera fila:

http://dozen.cl/dozen/clases.php

/***********Css************/
.ContClases{
float: left;
overflow: auto;
width: 100%;
height: auto;
background: red;
padding-bottom: 15px;
}

.ContClases ul{
background-color: #181818;
float: left;
width: auto;
height: auto;
padding-left: 18px;
padding-bottom: 18px;
}
.ContClases ul li{
float: left;
width: 304px;
height: 196px;
margin-right: 16px;
margin-top: 17px;
background:white;
}
.ContImgClase{
float: left;
width: 304px;
height: 196px;
}
.TxtImgClase{
background: rgba(43, 40, 40, 0.29);
position: absolute;
width: 304px;
height: 88px;
top: 720px;
}
.TxtImgClase p{
text-align: center;
color: #0A8F9B;
font-size: 24px;
width: auto;
margin-top: 15px;
margin-bottom: 10px;
height: auto;
}
/************Gracias******************/

[C2am]

El problema es el maquetado que le haces.
Prueba cambiando esto:

Código HTML:

<li><div class="ContImgClase"><img src="images/Noticias/noticia2.jpg"><div class="TxtImgClase"><p>aerobox</p></div></div></li>
 

Por esto:

Código HTML:

<li><div class="ContImgClase"><img src="images/Noticias/noticia2.jpg"><p class="TxtImgClase">aerobox</p></div></li>
 

Luego:

Código CSS:

.ContImgClase{
position:relative
width: 304px;
height: 196px;
}
.TxtImgClase{
background: rgba(43, 40, 40, 0.29);
position: absolute;
width: 304px;
height: 88px;
top: 720px; /*aquí cambias el valor o mejor cambias a Bottom: 10px, para posicionarlo respecto a la base de la caja que contiene la imagen */
}
 

Puede que exista algún error, ya que no he probado el código, pero esa es la idea.

La teoría dice que para posicionar un elemento en forma absoluta con respecto a su contenedor (y no a la pantalla), es necesario declarar al elemento padre la position: relative, o absolute o fixed. Si el padre o contenedor no lo tiene definido, busca al ancestro, es decir al contenedor del contenedor y así sucesivamente hasta llegar al body.

http://www.librosweb.es/css/capitulo..._absoluto.html

Saludos

[Sasjuarez]

Que tal asalto_27

lo que tenes que hacer es simplemente agregar a todos los elementos de la lista una posicion relativa como dice C2am y bajarle un poco a top de TxtImgClase. Proba y nos contas

Código CSS:

.ContClases{
float: left;
overflow: auto;
width: 100%;
height: auto;
background: red;
padding-bottom: 15px;
}
 
.ContClases ul{
background-color: #181818;
float: left;
width: auto;
height: auto;
padding-left: 18px;
padding-bottom: 18px;
}
.ContClases ul li{
float: left;
width: 304px;
height: 196px;
margin-right: 16px;
margin-top: 17px;
background:white;
position:relative; /** Posicion relativa **/
}
.ContImgClase{
float: left;
width: 304px;
height: 196px;
}
.TxtImgClase{
background: rgba(43, 40, 40, 0.29);
position: absolute;
width: 304px;
height: 88px;
top: 120px; /** Y le bajamos un poco a top **/
}
.TxtImgClase p{
text-align: center;
color: #0A8F9B;
font-size: 24px;
width: auto;
margin-top: 15px;
margin-bottom: 10px;
height: auto;
}
 

Te dejo una imagen de como quedo!