Fondo transparente en una capa

[cobolero_poseido]

Hola gente, estoy tratando de hacer un menu horizontal como el que esta en la pagina de nvidia(dot)com (lo pongo asi porque no me permiten poner enlaces por tener menos de 30 posts), si se fijan cuando se despliega el menu (cuando pasamos por arriba en alguna opcion) se muestra una capa (supongo que es una capa) con fondo un poco transparente, lo que queria saber es como se pone un fondo transparente en una capa, desde ya muchas gracias

[hq1]

Hay una propiedad de CSS muy interesante para el color del fondo:

background-color: transparent;

aunque no se muy bien como funciona, pero espero que te sirva de pista para investigar y contarnos el resultado

[jaimetl]

En www(punto)locualo.net/programacion/capa-transparencia-usando-css/00000003.aspx
tienes un ejemplo de como aplicar transparencia a una capa (Yo tampoco te puedo poner la url completa porque tengo menos de 30 días de antiguedad).

[caricatos]

Hola:

Pues en principio se trata de estilos, y usando background-color: transparent, la transparencia es total, y no exactamente lo del enlace.
Lo que quieres es niveles de opacidad, (opacity: .5), pero el problema que aunque ahora es estándar, explorer no lo soporta y en su lugar implementa el filtro alfa: -filter:alpha(opacity=50)-

Saludos

[Trizi]

Un alma caritativa me podría decir cómo hacer ese menu? Llevo días comiendome el coco y probando de todo, pero nada

Gracias y perdón si ésto no debía ir aquí pero es precisamente un menú de ese tipo lo que ando buscando

[kaninox]

es un menu algo complejo por el uso de doom por lo menos pa mi...
has intentado con programas como dhtml menu ;)

[Trizi]

Iniciado por kaninox

es un menu algo complejo por el uso de doom por lo menos pa mi...
has intentado con programas como dhtml menu ;)

Si, he probado, pero mis limitados conocimientos me frenan ^^ Cómo te explicaría yo... uhmmm.. pues que al sacar el código, los enlaces de las imagenes me van a C/Archivos de programas/ bla bla bla.. osea, a la carpeta de dicho programa asi que solo yo veo el menú jeje.. en otros pc's nada de nada...

Bueno, me conformaré con menús sosos hasta que vaya aprendiendo mas de este complicado mundo ^^

Muchas gracias de todas formas

[kseso?]

Si ya lo tienes con dthml menu y tu problema es de enlace absoluto

los enlaces de las imagenes me van a C/Archivos de programas/ bla bla bla.. osea, a la carpeta de dicho programa asi que solo yo veo el menú jeje.. en otros pc's nada de nada...

la solucción es sencilla:
Cualquier editor de texto, el bloc de notas por ejemplo, te permitirá reemplazar la parte del enlace "C/archivos/bla-bla/imagenes/imag1.png" por un enlace relativo tipo "../imagenes/imag1.png" con un solo toque de ratón.
Algo por el estilo utilicé para el menú en mi página WuenWisquiWueno.devillasbuenas.es

[sjam7]

ijole, mira, si se te complica el implementar un archivo ya creado por dhtml no te compliques la existencia y lee, lee y lee, antes de intentar cosas mas complicadas, por que o te desepcionas o desesperas.

si algo tan simple como corregir rutas relativas lo ves complicado creo que te complicaras mas intentando implementar CSS ahora, creo que estos casos no son los mas aptos para comenzar, no quieras comenzar a correr si no sabes ni gatear, no lo tomes a mal, es simplemente un consejo de seguir un orden "LOGICO" de las cosas, el hacer lo que quieres es simple, pero el adaptar rutas relativas lo es mucho mas

suerte

[c_keeper]

Hombre, por la estructura de la web de nvidia, se puede ver el código más o menos bien... eso si, es un kakao impresionante..

Joe, es que el mayor problema de las transparencias es que afectan a toda la capa, por lo menos tal y como yo he trabajado alguna vez con ellas..

La verdad es que no tengo ni idea de como hacer que el fondo sea algo transparente y el texto de la capa se pueda leer bien... siempre se me ha transparentado todo...

A ver que soluciones hay..

Saludos

[c_keeper]

Iniciado por sjam7

ijole, mira, si se te complica el implementar un archivo ya creado por dhtml no te compliques la existencia y lee, lee y lee, antes de intentar cosas mas complicadas, por que o te desepcionas o desesperas.

si algo tan simple como corregir rutas relativas lo ves complicado creo que te complicaras mas intentando implementar CSS ahora, creo que estos casos no son los mas aptos para comenzar, no quieras comenzar a correr si no sabes ni gatear, no lo tomes a mal, es simplemente un consejo de seguir un orden "LOGICO" de las cosas, el hacer lo que quieres es simple, pero el adaptar rutas relativas lo es mucho mas

suerte

Es cierto, en ésto como en todo hay que seguir un orden para aprender eficientemente.

Un saludo.

[c_keeper]

Bueno, como no sabia lo de poder poner "transparent" como valor de fondo he hecho algunas pruebas..

y bueno, veo que la solución puede ser utilizar la propiedad alpha en un div que sea simplemente el "fondo" del botón (ya que transparenta también el texto y no nos interesa), y luego justo encima otro div con el fondo transparente, que el comportamiento que veo que tiene es mostrar solo el texto, pero correctamente.

Ambos colocados con posiciones absolutas para que coincidan bien y tendriamos ese efecto.

Luego ya el tema de que el menu se despliegue y tal... ya es un asunto de programación en Javascript... pero tampoco creas que es muy complicado, en esa página de nvidia veo un código que no sé por donde cogerlo, pero vaya, yo creo que con jugar con los eventos onMouseOver y onMouseOut y la propiedad CSS visibility de los divs ya sobra...

Saludos!!

[Trizi]

Iniciado por kseso?

Si ya lo tienes con dthml menu y tu problema es de enlace absoluto

la solucción es sencilla:
Cualquier editor de texto, el bloc de notas por ejemplo, te permitirá reemplazar la parte del enlace "C/archivos/bla-bla/imagenes/imag1.png" por un enlace relativo tipo "../imagenes/imag1.png" con un solo toque de ratón.
Algo por el estilo utilicé para el menú en mi página WuenWisquiWueno.devillasbuenas.es

Si si, ya lo se, eliminar esa ruta y sustituirla por la ruta directamente a la imagen, y lo hago, (gracias sjam7 y c_keeper pero corregir rutas quién no sabe? entonces apaga y vámonos) lo que pasa que no es tan sencillo como eso. Cada "botón" tiene varias imagenes, le cambio la ruta a todas, ubico la imagen en la carpeta correspondiente pero sigue habiendo algo no se donde coñe, que sigue estando mal y no son las rutas.

Gracias a todos por vuestra ayuda, seguiré intentándolo, no obstante, he conseguido códigos de menús como el que busco que me dan menos dolores de cabeza que hacerlo con ese programa, asi que, sjam7 sin apenas saber gatear ya corro los 100 metros

[bombon74]

Hola Trizi:
No se si te sirva pero en el codigo html de la pagina de nvidia.com declaro el codigo CSS para el menu (a lo mejor ya lo viste, pero yo lo acabo de encontrar y por eso te lo comento) y puso este estilo que creo es lo que estas buscando.

Espero te sirva.
Saludos

Código HTML:

.ulMenuLevel2{
list-style-type:none;
position:absolute;
margin: 0;
padding:0;
display:none;

background-color:#333333; 
filter: alpha(opacity=90); 
-moz-opacity: 0.9;
KhtmlOpacity: .9;
opacity: .9;
font-family: arial;
font-size:8pt;
}