Lista con Imagenes y Texto

[davchi]

Hola a todos:
Tengo una lista y quiero que aparezca en cada lista una imagen distinta de 70px x 70px y a su lado 4 textos y quede centrado en altura

Y cuando hago el hover, q cambie el fondo del <li>

Algo como en la imagen q adjunto, pero no doy que quede bien

Alguna idea

el style es:
<style>
ul.masve {}

li.masve {
list-style-type: none;
float: left;
width:250px;
border: 1px solid #444;
}
li.masve a {
text-decoration: none;
display: block;
text-align: left;
background: #cdcdcd;
padding: 10px 0;
}

li.masve :hover {
text-decoration: none;
display: block;
text-align: left;
background: #cdcdcd;
padding: 10px 0;
}

li.masve a img {
display: block;
margin: 0 auto;
max-width: 70px;
}
</style>
y lo llamo en html :

Código:

<ul class="masve">
	<li><a href="url" title="">
	 <img class="ex2" src="images/55/19.jpg" height="70" width="70" alt="" />
       Texto1 <br />Texto2  <br />Texto3  <br />Texto4 </a>
	</li>
        <li><a href="url" title="">
	 <img class="ex2" src="images/55/20.jpg" height="70" width="70" alt="" />
       Texto1 <br />Texto2  <br />Texto3  <br />Texto4 </a>
	</li>
        <li><a href="url" title="">
	 <img class="ex2" src="images/55/21.jpg" height="70" width="70" alt="" />
       Texto1 <br />Texto2  <br />Texto3  <br />Texto4 </a>
	</li>
</ul>

[Lobito14]

Mira a ver si te vale algo así:

CSS:

Código CSS:

<style type="text/css">
        ul.masve {}
 
        li.masve {
            list-style-type: none;
            width:250px;
            border: 1px solid #444;
        }
 
        li.masve a {
            text-decoration: none;
            display: block;
            text-align: left;
            background: #cdcdcd;
            padding: 10px 0;
        }
 
        li.masve :hover {
            text-decoration: none;
            display: block;
            text-align: left;
            background: #cdcdcd;
            padding: 10px 0;
        }
 
        li.masve a img {
            display: block;
            margin: 0px 0px 0px 5px;
            max-width: 70px;
            float:left;
        }
 
        li.masve ul{
            list-style: none;
            padding-left: 100px;
        }
    </style>
 

HTML:

Código HTML:

<ul class="masve">
    <li class="masve">
        <a href="url" title="">
            <img class="ex2" src="images/55/19.jpg" height="70" width="70" alt="" />
            <ul>
                <li>Texto1</li>
                <li>Texto2</li>
                <li>Texto3</li>
                <li>Texto4</li>
            </ul>
        </a>
    </li>
 
    <li class="masve">
        <a href="url" title="">
            <img class="ex2" src="images/55/20.jpg" height="70" width="70" alt="" />
            <ul>
                <li>Texto1</li>
                <li>Texto2</li>
                <li>Texto3</li>
                <li>Texto4</li>
            </ul>
        </a>
    </li>
    <li class="masve">
        <a href="url" title="">
            <img class="ex2" src="images/55/21.jpg" height="70" width="70" alt="" />
            <ul>
                <li>Texto1</li>
                <li>Texto2</li>
                <li>Texto3</li>
                <li>Texto4</li>
            </ul>
        </a>
    </li>
</ul>
 

Una solución "rápida" y creo que es lo que quieres mas o menos, ya sobre esa base vas modificando como veas.

Prueba y nos cuentas.

Un saludo.

[davchi]

Lo he solucionado de la siguiente forma:

<style>
.thumbnails{
position:relative;
width:99%;
height:410px;
}

.thumbnails ul{
list-style:none;
position:absolute;
margin:0;
padding:0;
}

.thumbnails li{
position:relative;
display:block;
float:left;
clear:both;

}

.thumbnails li a{
color:#ebc4f6;
text-decoration: none;

}

.thumbnails li div{
position:relative;
display:none;
color:#FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.thumbnails .thumb{
position:relative;
display:block;
float:left;
cursor:pointer;
width:250px;
padding:5px;
color:#fff;
border-width:0 0 1px 0;
overflow:hidden;
}

.thumb img{
display:block;
float:left;
padding-right:5px;
}

.thumb p{
position:relative;
display:block;
overflow:hidden;
margin:0;
}

.thumbnails li:hover .thumb{
background:#56425b;
}
</style>

y en HTML

Código:

<div class="thumbnails">
	<ul>
		<li>
			<a href="#" title="">
				<div class="thumb">
					<img class="ex2" src="images/55/1.jpg" height="70" width="70" alt="" />
	                <p>texto1 <br />texto2 <br />texto3 <br />texto4</p>
	          	</div>
	  		</a>
		</li>
		<li>
			<a href="#" title="">
				<div class="thumb">
					<img class="ex2" src="images/55/2.jpg" height="70" width="70" alt="" />
	                <p>texto1 <br />texto2 <br />texto3 <br />texto4</p>
	          	</div>
	  		</a>
		</li>
		<li>
			<a href="#" title="">
				<div class="thumb">
					<img class="ex2" src="images/55/3.jpg" height="70" width="70" alt="" />
	                <p>texto1 <br />texto2 <br />texto3 <br />texto4</p>
	          	</div>
	  		</a>
		</li>
	</ul>
</div>

Se ve perfecto, pero cuando lo voy a validar, me dice que hay error en "<div class="thumb">" Me dice q no puedo poner ese tipo de elementos dentro de <a>

[loganbdn]

No puedes poner un elemento de bloque como DIV dentro de un elemento en línea como A

[davchi]

Ya aca modifique el ejemplo que me paso Lobito14

Código:

<style type="text/css">
ul.masve {}

li.masve {
list-style-type: none;
width:99%;
}

li.masve a {
text-decoration: none;
display: block;
text-align: left;
color:#FFF;
padding: 2px 0;
height: 76px;
}

li.masve :hover {
text-decoration: none;
display: block;
text-align: left;
background: #56425b;
padding: 2px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

li.masve a img {
display: block;
margin: 2px 0 0 5px;
max-width: 70px;
float:left;
}

li.masve ul{
list-style: none;
padding-left: 80px;
}
li.masve a ul {
list-style: none;
padding-left: 80px;
padding-top: 2px;
}

li.masve :hover ul  {
list-style: none;
padding-left: 80px;
padding-top: 2px;
}
</style>

y en HTML:

Código:

<ul class="masve">
    <li class="masve">
        <a href="url" title="">
            <img class="ex2" src="images/55/19.jpg" height="70" width="70" alt="" />
            <ul>
                <li>Texto1</li>
                <li>Texto2</li>
                <li>Texto3</li>
                <li>Texto4</li>
            </ul>
        </a>
    </li>
 
    <li class="masve">
        <a href="url" title="">
            <img class="ex2" src="images/55/20.jpg" height="70" width="70" alt="" />
            <ul>
                <li>Texto1</li>
                <li>Texto2</li>
                <li>Texto3</li>
                <li>Texto4</li>
            </ul>
        </a>
    </li>
    <li class="masve">
        <a href="url" title="">
            <img class="ex2" src="images/55/21.jpg" height="70" width="70" alt="" />
            <ul>
                <li>Texto1</li>
                <li>Texto2</li>
                <li>Texto3</li>
                <li>Texto4</li>
            </ul>
        </a>
    </li>
</ul>

Pero sigo poniendo dentro de la etiqueta <a> otro elemento por lo q no se valida bien

Alguna sugerencia

[Lobito14]

No entiendo cual es el problema que tienes ahora.

Saludos.

[pzin]

Iniciado por loganbdn

No puedes poner un elemento de bloque como DIV dentro de un elemento en línea como A

En HTML5 si se puede.

[davchi]

El problema es que sigo poniendo dentro de una etiqueta <a href> otras etiquetas, y esto no me lo valida W3C,

[pzin]

¿Qué tipo de documento tienes especificado? ¿HTML4.1? ¿5?

[davchi]

Estoy usando

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

es lo unico que me marca error cuando lo valido, tampoco tiene que ser una lista, puede ser en div

[pzin]

Pues es eso, no se pueden poner elementos de bloque en un enlace.

[loganbdn]

Pero si lo haces asi aunque el Navegador te lo acepte y te lo visualize bien en HTML4 o HTML5 es una mala practica.

Por eso da error de validación y mas aun en XHTML estricto !!

Si pones un IMG dentro de un A esta bien pero le tienes que quitar el width y height y darle el estilo en un fichero CSS sino el XHTML no valida.

Por otra parte no debes poner un Ul, Li dentro de un A como estas haciendo porque son de bloque y tampoco te va a validar en XHTML