Código incompatible con Chrome y Explorer

Anonimo12 · #1 (**permalink**) 29/12/2013, 11:37

Buenas:

He añadido a mi página web el menú lateral de la siguiente página: http://www.comocrearmiweb.com/2013/0...l-con-css.html

En firefox funciona perfectamente pero al abrir la página desde chrome o explorer no se ve el degradado. He supuesto que la instrucción que crea el degradado no es compatible con estos dos navegadores pero no lo tengo claro. Si fuera así tampoco sé qué usar para obtener el mismo resultado pero que funcione en todos los navegadores.

¿Alguna idea?, un cordial saludo.

JustinKO · #2 (**permalink**) 29/12/2013, 13:24

Si te das cuenta el degradado es:

Código:

background:-moz-linear-gradient(#f90 0%, #f60 100%);

y la moz- es de mozilla. Por lo que te saldrá solo en firefox, Opera y compatibles.

En esta página puedes crear degradados y te genera el código css para todos lo navegadores. Solo tienes que copiar el código y pegarlo sustituyendo por el que tienes.

http://www.colorzilla.com/gradient-editor/

saludos

Anonimo12 · #3 (**permalink**) 29/12/2013, 22:06

Buenas. Ha funcionado, gracias.

Me gustaría retocar un par de cosas más:

-¿Cómo podría cambiar el separador de puntitos por una línea?.
-Si te fijas, al pasar el ratón por encima de los textos el menú lo detecta y puedes presionar sobre alguna opción, pero si lo pasas sobre una parte de la casilla en la que no hay texto no lo detecta y no hace nada aún cuando presiones. ¿Cómo podría solucionarlo?. He probado a intercambiar el orden de "<li><a href...></a></li>" a esto otro "<a href...><li></li></a>" para que el link englobe a toda la opción pero no ha funcionado así que supongo que es por el código css (que no controlo muy bien).

Aqui se puede ver el menú funcional: http://comocrearmiweb.comlu.com/menu-vertical.php

Gracias, un cordial saludo.

JustinKO · #4 (**permalink**) 30/12/2013, 11:12

Hola, respecto a tu primera pregunta, a la de la linea de puntos, mejor que decirte cómo se hace te invito a que busques cualquier tutorial sobre "bordes en CSS" y verás lo sencillo que es.
No me cuesta decirte cómo se hace, es más, tardaría menos que en escribirte esto que te estoy contando, pero creo que más útil va a ser esta respuesta que la otra.

Respecto a lo de los enlaces, decirte que los elementos 'a' (que es donde se activa el enlace) son de linea, y ocupan el espacio justo que ocupa el texto. Para conseguir lo que quieres, tienes que convertirlo en bloque (display: block) y darle alto y ancho, y entonces en esa zona es donde funcionará el enlace.
Esto también es algo básico también, deberías de leer otro tutorial sobre elementos de bloque y de linea. display:block, inline, inline-block etc

Un saludo y espero haber sido de ayuda.

Anonimo12 · #5 (**permalink**) 30/12/2013, 16:50

Me ha servido de mucho gracias. He conseguido cambiar los bordes pero en cuanto a los enlaces he mirado lo del display en este enlace http://librosweb.es/referencia/css/display.html

Pero no lo veo claro, ¿tengo que modificar el css o el html?, porque los tengo separados.

¿Algún ejemplillo?. Gracias de nuevo, Feliz Navidad.

JustinKO · #6 (**permalink**) 31/12/2013, 05:27

Hola, me alegro que te haya servido. Respecto a la otra pregunta, perdona que insista pero creo que para aprender deberías de currarte un poco más lo de investigar y aprender por tu cuenta, de poco sirve que te den soluciones si no aprendes el porqué de éstas y su funcionamiento.

Lo primero que he puesto en google es esto "convertir enlaces bloque menús" y el primer resultado que me aparece es éste:

http://www.documentoweb.com/Guia/CSS/Menus-con-CSS

Aquí te sale como hacerlo.

Un saludo y suerte