Lista con imágenes y texto oculto

[pzin]

Muy buenas,

quería saber si era posible, crear una lista, ocultar el texto y dejar una imagen.
Por ejemplo,

Código HTML:

<ul>
<li>Uno</li>
<li>Dos</li>
</ul> 

entonces, donde dice Uno, ocultarlo y poner la imagen de un 1, e igual con el Dos.

He intentado hacerlo ocultando LI y luego meterle una imagen, pero claro, también me oculta la imagen (que la intento poner de fondo).

Es para hacer un menú con imágenes, pero para que los buscadores tengan algo para leer.

Gracias, y saludos.

[Raulmmmm]

Puedes ponerle font-size: 0, así sí que funciona. O puedes poner directamente la imagen y el alt, aunque no sé si así lo leen los buscadores.

[daPhyre]

Si este es el caso, recomendaría que usaras mejor las imagenes directo. Hasta donde se, la propiedad alt de las imagenes son para poner el texto y que los buscadores puedan leerlo:

<li><img src="uno.gif" alt="uno" /></li>

[pzin]

Gracias Raul.

Al final tenía que meter un elemento dentro de li, mostrarlo como bloque y flotarlo, para tener "algo" con qué poner el fondo. Costó un poco, pero indudablemente tu idea fue genial.

daPhyre, no sé si tendrá tanto en cuenta un buscador el ALT de una imagen como el texto de un enlace.

[pzin]

¡Uy!
Como siempre IE dando por el horto. Resulta que para IE7, el tamaño de cero es algo más grande que cero. Éstos chicos de MS andan mal en mates.

[Raulmmmm]

¡Anda, es verdad! Si dicen los de Microsoft que 0 es algo... ¿adónde vamos a ir a parar?

[IvanxM]

Iniciado por Bonez

Gracias Raul.

Al final tenía que meter un elemento dentro de li, mostrarlo como bloque y flotarlo, para tener "algo" con qué poner el fondo. Costó un poco, pero indudablemente tu idea fue genial.

daPhyre, no sé si tendrá tanto en cuenta un buscador el ALT de una imagen como el texto de un enlace.

Bonez, estaria bueno que comentes como lo hiciste asi los que recien empezamos podamos aprender de ustedes.
pone algun ejemplo.
gracias
Ivan

[pzin]

Pues al final conseguí que funcionara para FF, IE6 e IE7. Imagino que se verá bien en otros exploradores también, aunque no probé.

Así quedó:
HTML

Código HTML:

<ul>
<li><a href="#" id="menuInicio"><strong id="txt">Inicio</strong><span></span></a></li>
<li><a href="#" id="menuRestaurantes"><strong id="txt">Restaurantes</strong><span></span></a></li>
<li><a href="#" id="menuCocinas"><strong id="txt">Cocinas</strong><span></span></a></li>
<li><a href="#" id="menuContacto"><strong id="txt">Contacto</strong><span></span></a></li>
</ul> 

CSS

Código HTML:

#cabecera ul{
position:absolute;
top:0;
text-align:right;
width:900px;
}
/* hack IE-6 */ * html #cabecera ul{margin-top:15px;}
/* hack IE-7 */ *:first-child+html #cabecera ul{margin-top:15px;}


#cabecera li{
display:inline;
}


#menuInicio,#menuRestaurantes,#menuCocinas,#menuContacto{font-size:0;}
/* hack IE-6 */ * html #txt{display:none;}
/* hack IE-7 */ *:first-child+html #txt{display:none;}

#menuInicio span,#menuRestaurantes span,#menuCocinas span,#menuContacto span{
height:178px;
display:block;
float:left;
margin-top:-2px;
}

#menuInicio span{
background:transparent url(/imagenes/menu/inicio.png);
width:80px;
margin-left:450px;
}
/* hack IE-6 */ * html #menuInicio span{margin-left:110px;}
/* hack IE-7 */ *:first-child+html #menuInicio span{margin-left:220px;}

#menuRestaurantes span{
background:transparent url(/imagenes/menu/restaurantes.png);
width:134px;
}

#menuCocinas span{
background:transparent url(/imagenes/menu/cocinas.png);
width:97px;
}

#menuContacto span{
background:transparent url(/imagenes/menu/contacto.png);
width:115px;
}

#menuInicio span:hover,#menuRestaurantes span:hover,#menuCocinas span:hover,#menuContacto span:hover{
background-position:0 -179px;
}

Evidentemente márgenes y demás cosillas es a gusto y necesidad de cada cual.
Lo único que aún me falta por solucionar es lo de que IE6 no reconoce la pseudo-clase :hover en otro elemento que no sea A.

[Mikmoro]

Sí, y otra cosa: ¿has probado a validar ese código? No puedes poner 4 veces el mismo id (txt).

¿Para qué estás usando el strong?

Mikel.

[Mikmoro]

Por otro lado, no sé si te he entendido bien con lo que quieres hacer, pero según entiendo hay una manera mucho más sencilla: pones la imagen de fondo de elemento "a", luego dentro pones un span con el texto y lo ocultas con display: none.

Me refiero a algo así:

<li><a href="#" id="menuInicio"><span>Inicio</span></a></li>

y en la css:

#menuInicio{
background:transparent url(/imagenes/menu/inicio.png);
width:80px;
margin-left:450px;
text-decoration: none;
}

a span {
display: none;
}

a#menuInicio:hover {
background-position:0 -179px;
}

Funcionará en IE6 igual que en FF sin problemas. Ahora se trata de que le des el tamaño deseado y eso al elemetno "a".

Prueba y ya contarás.

Mikel.