Foros del web, para los que viven de bits

Bonez · 24-abr-2008, 04:04

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 · 24-abr-2008, 05:54

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 · 24-abr-2008, 08:49

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>

Bonez · 24-abr-2008, 11:21

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 · 24-abr-2008, 11:28

¡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 · 24-abr-2008, 12:49

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

IvanxM · 24-abr-2008, 21:28

Cita:

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

Bonez · 25-abr-2008, 10:50

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 · 25-abr-2008, 11:07

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 · 25-abr-2008, 11:13

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.

24-abr-2008, 04:04	#1 (permalink)
Bonez Fecha de Ingreso: noviembre-2002 Mensajes: 2.049	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.

24-abr-2008, 05:54	#2 (permalink)
Raulmmmm Fecha de Ingreso: marzo-2007 Ubicación: En otro lugar que tú Mensajes: 1.393	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.

24-abr-2008, 08:49	#3 (permalink)
daPhyre Fecha de Ingreso: marzo-2008 Ubicación: vhsa@tab.mx (Redirects to 127.0.0.1) Mensajes: 913	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> 京Cd௫京 fuegodigital.blogspot.com ¿Por qué dejar se usar tablas?

24-abr-2008, 11:21	#4 (permalink)
Bonez Fecha de Ingreso: noviembre-2002 Mensajes: 2.049	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.

24-abr-2008, 11:28	#5 (permalink)
Bonez Fecha de Ingreso: noviembre-2002 Mensajes: 2.049	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.

24-abr-2008, 12:49	#6 (permalink)
Raulmmmm Fecha de Ingreso: marzo-2007 Ubicación: En otro lugar que tú Mensajes: 1.393	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?

24-abr-2008, 21:28	#7 (permalink)
IvanxM Fecha de Ingreso: abril-2007 Mensajes: 48	Re: Lista con imágenes y texto oculto Cita: 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

25-abr-2008, 11:07	#9 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.998	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.

25-abr-2008, 11:13	#10 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.998	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.

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado