Foros del Web - Lista con imágenes y texto oculto

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - Lista con imágenes y texto oculto (http://www.forosdelweb.com/f53/lista-con-imagenes-texto-oculto-579433/)

Lista con imágenes y texto oculto

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). :pensando:

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

Gracias, y saludos.

Re: Lista con imágenes y texto oculto

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.

Re: Lista con imágenes y texto oculto

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>

Re: Lista con imágenes y texto oculto

Gracias Raul. :arriba:

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. :pensando:

Re: Lista con imágenes y texto oculto

¡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. :patada:

Re: Lista con imágenes y texto oculto

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

Re: Lista con imágenes y texto oculto

Cita:

Iniciado por Bonez (Mensaje 2377854)

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

Re: Lista con imágenes y texto oculto

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. :neurotico

Re: Lista con imágenes y texto oculto

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.

Re: Lista con imágenes y texto oculto

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.