elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Estamos en la red social de Mastodon


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [CSS] Capa por encima de todas ?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [CSS] Capa por encima de todas ?  (Leído 12,127 veces)
Diabliyo


Desconectado Desconectado

Mensajes: 1.441


shell# _


Ver Perfil WWW
[CSS] Capa por encima de todas ?
« en: 3 Noviembre 2010, 15:28 pm »

Buen dia.

Tengo un par de dudas respecto al CSS....

Me he bajado un Free CSS Template de internet para utilizarlo en mi plataforma web desarrollada en PHP, el problema es que una vez que termine de acondicionar el template y casi todo quedo bien, en la parte superior derecha el Template por defecto muestra una capa con la fecha actual, a esa capa solo le elimine la opcion de mostrar la fecha actual y puse un recuadro con menu desplegable (al hacer a:hover) y pues aparecen las opciones de la cuenta del usuario del sistema y demas cosas para el usuario registrado.

El primer problema es que, el menu de la parte superior derecha (el menu desplegable que ya mencione), queda detras de una capa que esta mas abajo, vaya, no alcanzo a ver TODAS las opciones del Menu, porque la capa que esta mas abajo se sobre pone encima.

Mi segunda duda es, como pueso hacer para que una capa se sobre ponga por encima de todas ?, es que quiero hacer el efecto con CSS y javascript de que cuando se pulse sobre una IMAGEN se abra una capa que este por encima de todas (capa en color negro, transparente).

Saludos !


En línea

Nakp
casi es
Ex-Staff
*
Desconectado Desconectado

Mensajes: 6.336

he vuelto :)


Ver Perfil WWW
Re: [CSS] Capa por encima de todas ?
« Respuesta #1 en: 3 Noviembre 2010, 20:01 pm »

con la propiedad z-index muy positiva :)


En línea

Ojo por ojo, y el mundo acabará ciego.
Diabliyo


Desconectado Desconectado

Mensajes: 1.441


shell# _


Ver Perfil WWW
Re: [CSS] Capa por encima de todas ?
« Respuesta #2 en: 3 Noviembre 2010, 20:58 pm »

con la propiedad z-index muy positiva :)

Como puedo saber cual valor ponerle ?, ya que en el CSS existen como 2 o 3 capas que ya viene con un valor de z-index a: 999, 998 y 1. Y pues ya intente poniendo: z-index:1 (y valores hasta 100) y siempre esta por detras el menu desplegable :(...

Asi carga el menu desplegable... OJO con la clase, se llama date porque se supone que en esa parte mostraba le fecha actual, y pues yo prefiero mostrar un menú desplegable:
Código
  1. <style>
  2. .date {position:absolute; top:0; right:0; margin:0; width:150px;height:150px;}
  3. .date ul {padding: 0;margin: 0;list-style: none;text-align:center;float:right;padding-right:3px;}
  4. .date li {float: left;position: relative;width:110px;border:solid 1px #a8cdff;background-color:#e2eeff;
  5.            font-size:11px;padding:2px;}
  6. .date li ul {display: none;position: absolute;top: 1em;left: 0;}
  7. .date li:hover ul {display: block;}
  8. .date .list-in {text-align:left;margin-top:8px;margin-left:0px;}
  9. .date .list-in li {border:solid 0px #a8cdff;border-left-width:1px;border-bottom-width:1px;
  10.            border-right-width:1px;margin-left:0px;}
  11. </style>
Código
  1. <?php
  2.    echo '<div class="date">
  3.      <ul>
  4.       <li>Mi Perfil
  5.       <ul class="list-in">
  6.       <li><a href="#">Mis Campa&ntilde;as</a></li>
  7.       <li><a href="#">Mi Informaci'. acento("o"). 'n</a></li>
  8.       <li><a href="#">Configuraci'. acento("o"). 'n</a></li>
  9.       <li><a href="#">Salir</li>
  10.       </ul>
  11.       </li>
  12.      </ul>
  13.    </div>';
  14. ?>

Y la capa que se pone encima de mi menu desplegable es una capa que forma una barra larga donde posiciona un INPUT para el proceso de busqueda dentro del sitio, el style es el siguiente:

Código
  1. #search-tabs {position:relative; bottom:-1px; padding-left:260px;}
  2. #search-tabs ul {margin:0; padding:0; list-style:none;}
  3. #search-tabs ul li {display:inline; margin:0; padding:0;}
  4. #search-tabs ul li a {float:left; margin:0; padding:0 0 0 15px; text-align:center; cursor:pointer; font-size:120%;}
  5. #search-tabs ul li a span {float:left; display:block; padding:0 15px 0 0; line-height:35px;
  6.                        vertical-align:middle; text-decoration:underline;}
  7. #search-tabs ul li a.active {background:#F0F6FF url("../design/search-active.gif") 0 0 no-repeat;
  8.                         text-decoration:none; color:#2F2F2F; font-weight:bold;}
  9. #search-tabs ul li a.active span {background:#F0F6FF url("../design/search-active-02.gif") 100% 0 no-repeat;
  10.                         text-decoration:none;}
  11. #search-top {width:900px; height:6px; background:#DCEBFF url("../design/search-top.gif") 0 100% no-repeat; font-size:0;}
  12. #search {background:#DCEBFF url("../design/search.gif") 0 0 repeat-y; overflow:hidden;}
  13. #search-in {padding:0px 0px 0px 0px; background:url("../design/search-in.gif") 0 0 no-repeat; font-size:12px;}
  14. #search-in a {text-decoration:none;color:black;}
  15. #search-in a:hover {text-decoration:underline;color:black;}
  16. #search-bottom {width:900px; height:6px; background:#DCEBFF url("../design/search-bottom.gif") 0 0 no-repeat; font-size:0;}
  17. #search-input01, #search-input02, #search-input03, #search-input04, #search-input05 {width:500px; padding:3px;
  18.                        border:1px solid #66A6FF;}
  19. .search-submit {position:relative;bottom:-7px;font-size:12px;}
« Última modificación: 3 Noviembre 2010, 21:11 pm por Diabliyo » En línea

bizco


Desconectado Desconectado

Mensajes: 698


Ver Perfil
Re: [CSS] Capa por encima de todas ?
« Respuesta #3 en: 3 Noviembre 2010, 22:35 pm »

creo que lo que pasa es ese div esta encerrado dentro de otro con el z-index superior a tu div, en este caso aun teniendo tu div un z-index mas alto se mostraria por debajo.

Código:
.Uno
{
 position: absolute;
 width: 400px;
 height: 400px;
 background-color: blue;
 z-index: 200;
}

.Dos
{
 position: relative;
 width: 400px;
 height: 400px;
 background-color: green;
 left: 20px;
 z-index: 100;
}

y esto:

Código:
<div class="Uno"></div>
<div class="Dos"></div>

se mostrara encima el azul, pero con esto:

Código:
.Tres
{
 position: relative;
 width: 400px;
 height: 400px;
 background-color: red;
 left: 20px;
 z-index: 1000;
}

y estando asi:

Código:
<div class="Uno"></div>
<div class="Tres"><div class="Dos"></div></div>

se mostrara el verde encima del azul porque su contenedor tiene el z-index mas alto que el div azul.

No estoy seguro que sea ese tu caso, pero por lo que dices me temo que si. si puedes subir un ejemplo completo de tu problema (solo el html y css) y asi podemos mirarlo mejor.


PD: lo que quiero decir es que si tu div esta encerrado dentro de otro con un z-index inferior a ese div, se mostrara bajo de este de igual manera.

y si el div que se te pone encima esta encerrado dentro de otro con un z-index superior a tu z-index o al de tu contenedor, continuara poniendose encima. asi que no solo afecta el z-index de tu capa.
« Última modificación: 3 Noviembre 2010, 22:49 pm por ctlon » En línea

[u]nsigned


Desconectado Desconectado

Mensajes: 2.397

JS/Node developer


Ver Perfil WWW
Re: [CSS] Capa por encima de todas ?
« Respuesta #4 en: 4 Noviembre 2010, 18:57 pm »

Ponele un valor altísimo a la propiedad z-index de esa capa. 100000 por ejemplo
En línea

No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!
bizco


Desconectado Desconectado

Mensajes: 698


Ver Perfil
Re: [CSS] Capa por encima de todas ?
« Respuesta #5 en: 4 Noviembre 2010, 21:06 pm »

si, pero si no identifica cual es el problema si le pone 1000000000000000000000 de z-index pero esta encerrada dentro de otra con z-index 1, se mostrara bajo.
En línea

Diabliyo


Desconectado Desconectado

Mensajes: 1.441


shell# _


Ver Perfil WWW
Re: [CSS] Capa por encima de todas ?
« Respuesta #6 en: 4 Noviembre 2010, 23:10 pm »

Les dejo el code completo:

Como acostumbro a programar con includes para tener un codigo mas desglozado y facil acceso al momento de estar arreglando detalles extras...

main.css
Código
  1. #main {width:900px; margin:0 auto; text-align:left;}
  2. #header {position:relative; overflow:hidden; margin-bottom:-20px;border:solid 1px red;}
  3. #logo {margin:0; border:0;}
  4. #page {clear:both; margin:15px 0;}
  5. .date {position:absolute; top:0; right:0; margin:0; width:150px;height:150px;}

Codigo HTML/PHP: http://pastebin.com/0Sg6i36E.



----- EDITADO -----

Ya logre se mostrara el menu desplegable, y no era cuestion del z-index, sino del estilo #header, la propiedad de overflow, estaba inicializada en hidden y la cambie a visible.

Pero Aun tengo problemas, ya que no entiendo porque razon el menu desplegable se esconde cuando intento acceder a alguno de los elementos del menu :S.

Ahora les proporciono informacion de las capas que se involcrab por envima y por abajo de la capa donde esta el menu desplegable.

1- Se abre la capa #header que contiene la capa #logo y la clase .date dentro.
Código
  1. #header {position:relative; overflow:visible; margin-bottom:-20px;border:solid 1px red;}
  2. #logo {margin:0; border:0;}
  3. .date {position:absolute; top:0; right:0; margin:0; width:150px;height:150px;}

2- Continua la capa #search-tabs que es donde aparece una barra para busqueda, abarca todo el ANCHO del sitio.

Código
  1. #search-tabs {position:relative; bottom:-1px; padding-left:260px;border:solid 1px orange;}
  2. #search-tabs ul {margin:0; padding:0; list-style:none;}
  3. #search-tabs ul li {display:inline; margin:0; padding:0;}
  4. #search-tabs ul li a {float:left; margin:0; padding:0 0 0 15px; text-align:center; cursor:pointer; font-size:120%;}
  5. #search-tabs ul li a span {float:left; display:block; padding:0 15px 0 0; line-height:35px; vertical-align:middle; text-decoration:underline;}
  6. #search-tabs ul li a.active {background:#F0F6FF url("../design/search-active.gif") 0 0 no-repeat; text-decoration:none; color:#2F2F2F; font-weight:bold;}
  7. #search-tabs ul li a.active span {background:#F0F6FF url("../design/search-active-02.gif") 100% 0 no-repeat; text-decoration:none;}

Dejo una IMAGEN/SCREENSHOT para que visualizen el menu desplegable del lado superior derecho.

Saludos !
« Última modificación: 4 Noviembre 2010, 23:41 pm por Diabliyo » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Una olla encima de un router inhibiría su radio?
Hacking Wireless
flacc 7 4,386 Último mensaje 2 Julio 2012, 06:11 am
por .(sWeEtHaCk).
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines