Foros del Web » Creando para Internet » CSS »

Lista con imágenes y texto oculto

Estas en el tema de Lista con imágenes y texto oculto en el foro de CSS en Foros del Web. 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> ...
  #1 (permalink)  
Antiguo 24/04/2008, 05:04
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.460
Antigüedad: 15 años, 4 meses
Puntos: 2097
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).

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

Gracias, y saludos.
  #2 (permalink)  
Antiguo 24/04/2008, 06:54
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
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.
  #3 (permalink)  
Antiguo 24/04/2008, 09:49
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
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>
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #4 (permalink)  
Antiguo 24/04/2008, 12:21
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.460
Antigüedad: 15 años, 4 meses
Puntos: 2097
Re: Lista con imágenes y texto oculto

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.
  #5 (permalink)  
Antiguo 24/04/2008, 12:28
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.460
Antigüedad: 15 años, 4 meses
Puntos: 2097
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.
  #6 (permalink)  
Antiguo 24/04/2008, 13:49
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
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?
  #7 (permalink)  
Antiguo 24/04/2008, 22:28
 
Fecha de Ingreso: abril-2007
Mensajes: 48
Antigüedad: 10 años, 8 meses
Puntos: 0
Re: Lista con imágenes y texto oculto

Cita:
Iniciado por Bonez Ver Mensaje
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
  #8 (permalink)  
Antiguo 25/04/2008, 11:50
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.460
Antigüedad: 15 años, 4 meses
Puntos: 2097
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.
  #9 (permalink)  
Antiguo 25/04/2008, 12:07
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.
  #10 (permalink)  
Antiguo 25/04/2008, 12:13
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 05:55.