Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

safas

menu drop down somo atras de slideshow

Recommended Posts

Olá pessoal,

estou com o seguinte problema: Tenho um menu drop down horizontal, e logo abaixo um slideshow com os principais destaques. O que ocorre é que quando coloco este slideshow quando passa o mouse sobre as categorias do menu, no que ele abre as informaçoes de cada, estas ficam atras do destaque, ou seja, ficam escondidas, como se estivessem num plano de fundo, e o slideshow em primeiro plano, entenderam?

 

alguem já passou por isso, ou sabe como resolver?

mto obrigado =)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Define o menu drop down com um z-index maior que o do slider e caso não esteja usando um position absolute no menu drop, coloque position relative para o z-index funcionar..

 

Abrass

Compartilhar este post


Link para o post
Compartilhar em outros sites

Define o menu drop down com um z-index maior que o do slider e caso não esteja usando um position absolute no menu drop, coloque position relative para o z-index funcionar..

 

Abrass

 

aí vai depender, se o slide show, ñ for swf, pq se for, z-index ñ funfa...

acredite, sei doq estou falando....

Compartilhar este post


Link para o post
Compartilhar em outros sites

aí vai depender, se o slide show, ñ for swf, pq se for, z-index ñ funfa...

acredite, sei doq estou falando....

 

Ai é só definir um z-index menor para o elemento no qual o swf esta encapsulado e setar o wmode do swf como opaque ou transparent.. =)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ai é só definir um z-index menor para o elemento no qual o swf esta encapsulado e setar o wmode do swf como opaque ou transparent.. =)

 

a parte do wmode eu ja consegui...

mas o z-index tentei de todas as maneiras mas n deu certo...

cheguei a colocar z-index: 99 pro menu e z-index 1 pro swf e ele sempre fica por cima..

posso estar falando besteira...

mas se puder me dar um exemplo ae.

pq nessa questão, nunca tive êxito !

 

tanto que no final, acabei por exportar meu swf como gif, ai sim, ele ficou por baixo...

Compartilhar este post


Link para o post
Compartilhar em outros sites

olá pessoal, vou fazer o seguinte, abaixo está o link do menu drop down que estou usando, que alias me passaram aqui pelo forum e também o link do sistema de destaque que usei como base para montar o meu, que na pratica é a mesma coisa, porem no menu, nao utilizo banco de dados como cita a materia original do autor.

 

Link Menu Drop Down

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

 

Link do Sistema de Destaque

http://blog.thiagobelem.net/criando-um-sistema-de-destaques-parte-1/

 

Ambos, sempre quando usei sempre funcionou, agora é a primeira vez que uso ambos juntos. Ah, o sistema nao é swf como falaram.

bom, vejam os links. Quem souber entender como corrigir o problema desde ja agradeço novamente a ajuda =)

 

até mais pessoal

Compartilhar este post


Link para o post
Compartilhar em outros sites

1 - Tanto o teu menu quanto o teu sistema de destaque devem estar com position:absolute;

2 - o z-index do menu deve ser maior que o z-index do destaque.

3 - Para funcionar os dois devem estar se referenciando por algum outro elemento com propriedade position:relative;

 

OBS: Talvez o menu tenha a lista de dropdown "por fora" dai é neste elemento que tens q aplicar o position:absolute; com o z-index maior de todos.

 

Se postares o código ai ajuda muito.

 

Att

Leandro Rodeghiero

http://www.maisumpixel.com.br

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Amigo,

obrigado pelas dicas, mas mesmo assim, nao consegui fazer funcionar =/

 

Olhe abaixo os CSS, veja se voce identifica aonde devo fazer as modificaçoes para funcionar corretamente.

 

MENU

body, ul, li {

font-size:14px;

font-family:Arial, Helvetica, sans-serif;

line-height:21px;

text-align:left;

}

 

#menu {

list-style:none;

width:940px;

margin:30px auto 0px auto;

height:43px;

padding:0px 40px 0px 20px;

/* Rounded Corners */

 

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

/* Background color and gradients */

 

background: #014464;

background: -moz-linear-gradient(top, #5846F7, #6765F6);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#99CDFF), to(#64B1FF));

/* Borders */

 

border: 1px solid #5748FD;

-moz-box-shadow:inset 0px 0px 1px #000000;

-webkit-box-shadow:inset 0px 0px 1px #edf9ff;

box-shadow:inset 0px 0px 1px #edf9ff;

}

 

#menu li {

float:left;

display:block;

text-align:center;

position:relative;

padding: 4px 10px 4px 10px;

margin-right:30px;

margin-top:7px;

border:none;

}

 

#menu li:hover {

border: 1px solid #777777;

padding: 4px 9px 4px 9px;

 

/* Background color and gradients */

 

background: #F4F4F4;

background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

 

/* Rounded corners */

 

-moz-border-radius: 5px 5px 0px 0px;

-webkit-border-radius: 5px 5px 0px 0px;

border-radius: 5px 5px 0px 0px;

}

 

#menu li a {

font-family:Arial, Helvetica, sans-serif;

font-size:17.0px;

color: #0000;

display:block;

outline:0;

text-decoration:none;

text-shadow: 2px 1px 2px #FFFFFF;

}

 

#menu li:hover a {

color:#64B1FF;

text-shadow: px 0px 1px #000;

}

#menu li .drop {

padding-right:21px;

background:url("img/drop.png") no-repeat right 8px;

}

#menu li:hover .drop {

background:url("img/drop.png") no-repeat right 7px;

}

 

.dropdown_1column,

.dropdown_2columns,

.dropdown_3columns,

.dropdown_4columns,

.dropdown_5columns {

margin:4px auto;

float:left;

position:absolute;

left:-999em; /* Hides the drop down */

text-align:left;

padding:10px 5px 10px 5px;

border:1px solid #777777;

border-top:none;

 

/* Gradient background */

background:#F4F4F4;

background: -moz-linear-gradient(top, #CCCC, #CCCC);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFF), to(#64B1FF));

 

/* Rounded Corners */

-moz-border-radius: 0px 5px 5px 5px;

-webkit-border-radius: 0px 5px 5px 5px;

border-radius: 0px 5px 5px 5px;

}

 

.dropdown_1column {width: 140px;}

.dropdown_2columns {width: 280px;}

.dropdown_3columns {width: 420px;}

.dropdown_4columns {width: 560px;}

.dropdown_5columns {width: 700px;}

 

#menu li:hover .dropdown_1column,

#menu li:hover .dropdown_2columns,

#menu li:hover .dropdown_3columns,

#menu li:hover .dropdown_4columns,

#menu li:hover .dropdown_5columns {

left:-1px;

top:auto;

}

 

.col_1,

.col_2,

.col_3,

.col_4,

.col_5 {

display:inline;

float: left;

position: relative;

margin-left: 5px;

margin-right: 5px;

}

.col_1 {width:130px;}

.col_2 {width:270px;}

.col_3 {width:410px;}

.col_4 {width:550px;}

.col_5 {width:690px;}

 

#menu .menu_right {

float:right;

margin-right:0px;

}

#menu li .align_right {

/* Rounded Corners */

-moz-border-radius: 5px 0px 5px 5px;

-webkit-border-radius: 5px 0px 5px 5px;

border-radius: 5px 0px 5px 5px;

}

 

#menu li:hover .align_right {

left:auto;

right:-1px;

top:auto;

}

 

#menu p, #menu h2, #menu h3, #menu ul li {

font-family:Arial, Helvetica, sans-serif;

line-height:21px;

font-size:12px;

text-align:left;

text-shadow: 1px 1px 1px #CCCC;

}

#menu h2 {

font-size:21px;

font-weight:400;

letter-spacing:-1px;

margin:7px 0 14px 0;

padding-bottom:14px;

border-bottom:1px solid #CCCC;

}

#menu h3 {

font-size:14px;

margin:7px 0 14px 0;

padding-bottom:7px;

border-bottom:1px solid #888888;

}

#menu p {

line-height:18px;

margin:0 0 10px 0;

}

 

#menu li:hover div a {

font-size:12px;

color:#015b86;

}

#menu li:hover div a:hover {

color:#029feb;

}

 

 

.strong {

font-weight:bold;

}

.italic {

font-style:italic;

}

 

.imgshadow { /* Better style on light background */

background:#FFFFFF;

padding:4px;

border:1px solid #777777;

margin-top:5px;

-moz-box-shadow:0px 0px 5px #666666;

-webkit-box-shadow:0px 0px 5px #666666;

box-shadow:0px 0px 5px #666666;

}

.img_left { /* Image sticks to the left */

width:auto;

float:left;

margin:5px 15px 5px 5px;

}

 

#menu li .black_box {

background-color:#333333;

color: #eeeeee;

text-shadow: 1px 1px 1px #000;

padding:4px 6px 4px 6px;

 

/* Rounded Corners */

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

 

/* Shadow */

-webkit-box-shadow:inset 0 0 3px #000000;

-moz-box-shadow:inset 0 0 3px #000000;

box-shadow:inset 0 0 3px #000000;

}

 

#menu li ul {

list-style:none;

padding:0;

margin:0 0 12px 0;

}

#menu li ul li {

font-size:12px;

line-height:24px;

position:relative;

text-shadow: 1px 1px 1px #ffffff;

padding:0;

margin:0;

float:none;

text-align:left;

width:130px;

}

#menu li ul li:hover {

background:none;

border:none;

padding:0;

margin:0;

}

 

#menu li .greybox li {

background:#F4F4F4;

border:1px solid #bbbbbb;

margin:0px 0px 4px 0px;

padding:4px 6px 4px 6px;

width:116px;

 

/* Rounded Corners */

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-khtml-border-radius: 5px;

border-radius: 5px;

}

#menu li .greybox li:hover {

background:#ffffff;

border:1px solid #aaaaaa;

padding:4px 6px 4px 6px;

margin:0px 0px 4px 0px;

}

 

 

 

Do Destaque

 

a img { border: none; }

 

#blocoDestaques {

position: relative;

}

 

#blocoDestaques ul,

#blocoDestaques ul li {

list-style: none;

}

 

#blocoDestaques,

#blocoDestaques ul,

#blocoDestaques ul li,

#blocoDestaques ul li img {

margin: 0px;

padding: 0px;

 

width: 999px;

height: 300px;

}

 

#blocoDestaques ul li {

position: relative;

}

 

#blocoDestaques ul li div.fundo {

width: 0px;

height: 0px;

 

position: absolute;

bottom: 0px;

left: 0px;

 

background: black;

}

 

#blocoDestaques ul li p {

margin: 0px;

padding: 10px 15px;

 

position: absolute;

bottom: 0px;

left: 0px;

 

line-height: 20px;

font-family: Verdana, Arial, sans-serif;

font-size: 14px;

}

 

#blocoDestaques ul li p a {

color: white;

text-decoration: none;

}

 

#blocoDestaques a.faixa {

width: 100px;

height: 100px;

 

position: absolute;

top: -5px;

left: -5px;

z-index: 100;

 

background: transparent url('../img/faixa.png') 0 0 no-repeat;

}

 

#blocoDestaques div.paginas {

position: absolute;

top: 5px;

right: 5px;

 

z-index: 100;

}

 

 

#blocoDestaques div.paginas a {

height: 20px;

width: 20px;

 

display: block;

float: left;

margin-left: 2px;

 

color: white;

font-size: 10px;

font-family: Verdana, Arial, sans-serif;

text-decoration: none;

text-align: center;

line-height: 20px;

outline: none;

 

background: black;

}

 

#blocoDestaques div.paginas a:hover,

#blocoDestaques div.paginas a.activeSlide {

background: #9FAA27;

font-weight: bold;

}

 

#blocoDestaques ul li p,

#blocoDestaques ul li div.fundo { display: none; }

 

Desde já muito obrigado pela força, =)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá pessoal,

hoje fiz um outro teste. Peguei um arquivo qualquer em flash, uma apresentaçao e joguei logo abaixo do menu. O flash nao tem nenhum codigo, nada, e o menu fica por de trás dele.

 

A unica coisa que nao ficou por de tras foi uma imagem em jpg qualquer, aí mostra corretamente. Pelo jeito, o problema entao é do menu. Caso alguem tenha alguma sugestao de como corrigir, por favor, poste aqui, estou aqui tentando rs...

 

até mais

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá pessoal,

hoje fiz um outro teste. Peguei um arquivo qualquer em flash, uma apresentaçao e joguei logo abaixo do menu. O flash nao tem nenhum codigo, nada, e o menu fica por de trás dele.

 

A unica coisa que nao ficou por de tras foi uma imagem em jpg qualquer, aí mostra corretamente. Pelo jeito, o problema entao é do menu. Caso alguem tenha alguma sugestao de como corrigir, por favor, poste aqui, estou aqui tentando rs...

 

até mais

 

 

 

 

Olá colega!

Eu estou usando esse mesmo menu drop down que você está usando, que por sinal é um ótimo menu.

É o seguinte, eu também estava com esse mesmo problema, tenho um slide no meu blog junto com esse menu, mas o slide ficava por cima do menu.

Pra resolver isso coloquei z-index:999; em todas as #menu li { e resolveu o meu problema.

 

 

 

#menu li {  
   float:left;  
   text-align:center;  
   position:relative;  
   padding: 4px 10px 4px 10px;  
   margin-right:30px;  
   margin-top:7px;  
   border:none; 
   z-index:999; 
} 

 

 

Espero ter ajudado. :)

Compartilhar este post


Link para o post
Compartilhar em outros sites

coloca teu flash em uma div e coloca ela em uma classe...

dai vc coloca o z-index dessa classe menor que o z-index da classe do menu

Compartilhar este post


Link para o post
Compartilhar em outros sites

Will Knippelberg,

 

veja a data dos tópicos antes de postar. É interessante postar uma solução caso o tópico não tenha soluções, mas já há o suficiente para resolver o problema.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.