alexandremanowar 0 Denunciar post Postado Março 27, 2006 E a e pessoal Estou fazendo um menu de css com lista html ele esta funcionando legal com excessão do alinhamento. Tipo assim o código html tem uma opção feita com <select name=".."> e quando eu passo o mouse pelo menu ele fica abaixo da opção select porem eu quero que o menu fique acima de tudo. Olha como ficou: Erro no menu. Ficou abaixo Como eu disse o menu ficou abaixo e preciso que fique acima! Alguém sabe onde estou errando? Estou usando esse código para fazer o menu: Esse é o código das listas <ul> e <li> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" /><link href="dhtml-horiz.css" rel="styleSheet" type="text/css" /><script language="Javascript" src="dhtml.js" type="text/Javascript"></script><style type="text/css">body{ text-transform: capitalize;}</style><head><body><ul id="navmenu"> <li><a href="home.php">home</a></li> <li><a href="#">cadastro</a> <ul> <li><a href="#">prestadores</a></li> <li><a href="#">seguradoras</a></li> <li><a href="#">seguros</a> <ul> <li><a href="#">agricola</a></li> <li><a href="#">vida</a></li> <li><a href="#">segurados</a></li> </ul> </li> <li><a href="#">colaboradores</a> <ul> <li><a href="#">medicos</a></li> <li><a href="#">hospitais</a></li> <li><a href="#">clínicas</a></li> <li><a href="#">laboratórios</a></li> <li><a href="#">delegacias</a></li> <li><a href="#">cartórios</a></li> <li><a href="#">corretores</a></li> <li><a href="#">advogados</a></li> <li><a href="#">outros</a></li> </ul> </li> </ul> </li> <li><a href="#">consulta</a> <ul>..... Esse é o código que javascript que faz o controle: navHover = function() { var lis = document.getElementById("navmenu").getElementsByTagName("LI"); for (var i=0; i<lis.length; i++) { lis[i].onmouseover=function() { this.className+=" iehover"; } lis[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" iehover\\b"), ""); } }}if (window.attachEvent) window.attachEvent("onload", navHover); E esse é o código css /* Root = Horizontal, Secondary = Vertical */ul#navmenu { margin: 0; border: 0 none; padding: 0; width: 500px; /*For KHTML*/ list-style: none; height: 24px;}ul#navmenu li { margin: 0; border: 0 none; padding: 0; float: left; /*For Gecko*/ display: inline; list-style: none; position: relative; height: 24px;}ul#navmenu ul { margin: 0; border: 0 none; padding: 0; width: 160px; list-style: none; display: none; position: absolute; top: 24px; left: 0;}ul#navmenu ul li { float: none; /*For Gecko*/ display: block !important; display: inline; /*For IE*/}/* Root Menu */ul#navmenu a { border: 1px solid #FFF; border-right-color: #CCC; border-bottom-color: #CCC; padding: 0 6px; float: none !important; /*For Opera*/ float: left; /*For IE*/ display: block; background: #EEE; color: #666; font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; height: auto !important; height: 1%; /*For IE*/}/* Root Menu Hover Persistence */ul#navmenu a:hover,ul#navmenu li:hover a,ul#navmenu li.iehover a { background: #CCC; color: #FFF;}/* 2nd Menu */ul#navmenu li:hover li a,ul#navmenu li.iehover li a { float: none; background: #EEE; color: #666;}/* 2nd Menu Hover Persistence */ul#navmenu li:hover li a:hover,ul#navmenu li:hover li:hover a,ul#navmenu li.iehover li a:hover,ul#navmenu li.iehover li.iehover a { background: #CCC; color: #FFF;}/* 3rd Menu */ul#navmenu li:hover li:hover li a,ul#navmenu li.iehover li.iehover li a { background: #EEE; color: #666;}/* 3rd Menu Hover Persistence */ul#navmenu li:hover li:hover li a:hover,ul#navmenu li:hover li:hover li:hover a,ul#navmenu li.iehover li.iehover li a:hover,ul#navmenu li.iehover li.iehover li.iehover a { background: #CCC; color: #FFF;}/* 4th Menu */ul#navmenu li:hover li:hover li:hover li a,ul#navmenu li.iehover li.iehover li.iehover li a { background: #EEE; color: #666;}/* 4th Menu Hover */ul#navmenu li:hover li:hover li:hover li a:hover,ul#navmenu li.iehover li.iehover li.iehover li a:hover { background: #CCC; color: #FFF;}ul#navmenu ul ul,ul#navmenu ul ul ul { display: none; position: absolute; top: 0; left: 160px;}/* Do Not Move - Must Come Before display:block for Gecko */ul#navmenu li:hover ul ul,ul#navmenu li:hover ul ul ul,ul#navmenu li.iehover ul ul,ul#navmenu li.iehover ul ul ul { display: none;}ul#navmenu li:hover ul,ul#navmenu ul li:hover ul,ul#navmenu ul ul li:hover ul,ul#navmenu li.iehover ul,ul#navmenu ul li.iehover ul,ul#navmenu ul ul li.iehover ul { display: block;}Como eu faço para deixar o menu acima de tudo? Compartilhar este post Link para o post Compartilhar em outros sites
Hunter_ 0 Denunciar post Postado Março 27, 2006 Kd o <select> no teu codigo, ele ta aonde? no body? Compartilhar este post Link para o post Compartilhar em outros sites
alexandremanowar 0 Denunciar post Postado Março 27, 2006 PO cara é mesmo esqueci de falar do select rsrsrs foi mal. Ele esta em outro códio esta nesse código: <HTML><HEAD> <TITLE>Documento PHP</TITLE></HEAD><BODY><? include "menuprint.html"; echo "<br><br><select name='sd'>"; echo "<option>Escolha a opção desejada</option>"; echo "</select>";?></BODY></HTML> Então os códigos lá em cima são para formar o menu. E nesse código eu adiciono o menu! Você sabe onde esta o problema? Compartilhar este post Link para o post Compartilhar em outros sites
micox 2 Denunciar post Postado Março 27, 2006 Veja sobre o z-index. Talvez o problema seja a falta dele. Compartilhar este post Link para o post Compartilhar em outros sites
alexandremanowar 0 Denunciar post Postado Março 27, 2006 Cara já coloquei e não deu certo. Olha como ficou com zindex: /* Root = Horizontal, Secondary = Vertical */ul#navmenu { z-index: 25; margin: 0; border: 0 none; padding: 0; width: 500px; /*For KHTML*/ list-style: none; height: 24px;}.... Não deu certo também Compartilhar este post Link para o post Compartilhar em outros sites
micox 2 Denunciar post Postado Março 27, 2006 É... realmente nosso amiguinho IE não ajuda. Só é possível através de gambiarras tipo iframe. Veja: ... Nos meus testes coloquei um iframe oculto na página: <iframe id="iFrameMenu" src="" style="visibility: hidden; position: absolute; z-index: 2;"></iframe> Criei o como com um zIndex menor: <select id="combo" style="z-index:1" > Os <DIV> do menu eu criei normal, só que na hora de mostrar eles na tela a jogada é colocar o <IFRAME>, na mesma posição do <DIV> com a mesma altura e larguro, e com um zIndex menor. Neste caso, o <DIV> vai esconder completamente o <IFRAME> e vai parecer que ele nem existe. Só que, se por algum motivo alheio a nossa vontade, tiver um <SELECT> no mesmo espaço onde ta o <DIV>, o <IFRAME> vai fazer com que o <SELECT> fique atraz do <DIV> que está na frente. ... Fonte: http://erainfo.blogspot.com/2004/09/mostra...-um-select.html Não leia só o que eu coloquei aqui. Vá no link que passei e leia ele inteiro pra entender melhor. Tem até exemplo. Descobri isso através de http://www.guj.com.br/posts/list/16060.java Tags pra busca: select option div frente abaixo sobre trás atrás posicionar iframe por oculto esconde combo swf flash combo Compartilhar este post Link para o post Compartilhar em outros sites
alexandremanowar 0 Denunciar post Postado Março 28, 2006 E a e cara beleza! Cara eu li o artigo inteiro, entendi a idéia, mas estou tentando aqui e não esta funcionando! Olha como estou fazendo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" /><link href="dhtml-horiz.css" rel="styleSheet" type="text/css" /><script language="Javascript" src="dhtml.js" type="text/Javascript"></script><style type="text/css">body{ text-transform: capitalize;}</style><head><body><iframe id="iFrameMenu" src="" style="visibility: hidden; position: absolute; z-index: 2;"></iframe><div id="navmenu" class="menu"><ul id="navmenu"> <li><a href="home.php">home</a></li> <li><a href="#">cadastro</a> <ul> <li><a href="#">prestadores</a></li> <li><a href="#">seguradoras</a></li> <li><a href="#">seguros</a> <ul> <li><a href="#">agricola</a></li> <li><a href="#">vida</a></li> <li><a href="#">segurados</a></li> </ul> </li> <li><a href="#">colaboradores</a> <ul> <li><a href="#">medicos</a></li> <li><a href="#">hospitais</a></li> <li><a href="#">clínicas</a></li> <li><a href="#">laboratórios</a></li> <li><a href="#">delegacias</a></li> <li><a href="#">cartórios</a></li> <li><a href="#">corretores</a></li> <li><a href="#">advogados</a></li> <li><a href="#">outros</a></li> </ul> </li> </ul> </li> <li><a href="#">consulta</a> <ul> <li><a href="#">prestadores</a> <ul> <li><a href="#">nome</a></li> <li><a href="#">região</a></li> <li><a href="#">CPF</a></li> <li><a href="#">CPS</a></li> <li><a href="#">hist.exclusão</a></li> </ul> </li> <li><a href="#">seguradoras</a> <ul> <li><a href="#">nome</a></li> <li><a href="#">região</a></li> <li><a href="#">CSEG</a></li> <li><a href="#">CNPJ</a></li> <li><a href="#">hist.exclusão</a></li> </ul> </li> <li><a href="#">seguros</a> <ul> <li><a href="#">agricola</a> <ul> <li><a href="#">nome</a></li> <li><a href="#">região</a></li> <li><a href="#">CPF</a></li> <li><a href="#">nº sinistro</a></li> <li><a href="#">cagri</a></li> </ul> </li> <li><a href="#">vida</a> <ul> <li><a href="#">nome</a></li> <li><a href="#">região</a></li> <li><a href="#">CPF</a></li> <li><a href="#">nº sinistro</a></li> <li><a href="#">cvida</a></li> </ul> </li> <li><a href="#">segurados</a> <ul> <li><a href="#">nome</a></li> <li><a href="#">região</a></li> <li><a href="#">CPF</a></li> <li><a href="#">CSegu</a></li> <li><a href="#">hist.exclusão</a></li> </ul> </li> </ul> </li> <li><a href="#">beneficiarios</a> <ul> <li><a href="#">nome</a></li> <li><a href="#">CPF</a></li> </ul> </li> <li><a href="#">colaboradores</a> <ul> <li><a href="#">médicos</a> <ul> <li><a href="#">CRM</a></li> <li><a href="#">Nome</a></li> <li><a href="#">região</a></li> <li><a href="#">especialidade</a></li> </ul> </li> <li><a href="#">hospitais</a> <ul> <li><a href="#">nome</a></li> <li><a href="#">região</a></li> </ul> </li> <li><a href="#">clínicas</a> <ul> <li><a href="#">nome</a></li> <li><a href="#">região</a></li> </ul> </li> <li><a href="#">Laboratórios</a> <ul> <li><a href="#">nome</a></li> <li><a href="#">região</a></li> </ul> </li> <li><a href="#">delegacias</a> <ul> <li><a href="#">nome</a></li> <li><a href="#">região</a></li> </ul> </li> <li><a href="#">cartórios</a> <ul> <li><a href="#">nome</a></li> <li><a href="#">região</a></li> </ul> </li> <li><a href="#">corretores</a> <ul> <li><a href="#">nome</a></li> <li><a href="#">região</a></li> </ul> </li> <li><a href="#">advogados</a> <ul> <li><a href="#">nome</a></li> <li><a href="#">região</a></li> </ul> </li> <li><a href="#">outros</a> <ul> <li><a href="#">nome</a></li> <li><a href="#">região</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">alteração</a> <ul> <li><a href="#">prestadores</a> <ul> <li><a href="#">CPS</a></li> <li><a href="#">nome</a></li> <li><a href="#">CPF</a></li> </ul> </li> <li><a href="#">seguradoras</a> <ul> <li><a href="#">CSEG</a></li> <li><a href="#">nome</a></li> <li><a href="#">CNPJ</a></li> </ul> </li> <li><a href="#">seguros</a> <ul> <li><a href="#">CSEGU</a></li> <li><a href="#">CPF</a></li> </ul> </li> <li><a href="#">colaboradores</a> <ul> <li><a href="#">médicos</a> <ul> <li><a href="#">CRN</a></li> <li><a href="#">CPF/CNPJ</a></li> <li><a href="#">nome</a></li> </ul> </li> <li><a href="#">hospitais</a> <ul> <li><a href="#">CNPJ</a></li> <li><a href="#">nome</a></li> </ul> </li> <li><a href="#">clínicas</a> <ul> <li><a href="#">CNPJ</a></li> <li><a href="#">nome</a></li> </ul> </li> <li><a href="#">laboratórios</a> <ul> <li><a href="#">CNPJ</a></li> <li><a href="#">nome</a></li> </ul> </li> <li><a href="#">delegacias</a> <ul> <li><a href="#">NºDP</a></li> <li><a href="#">nome</a></li> </ul> </li> <li><a href="#">cartórios</a> <ul> <li><a href="#">CNPJ</a></li> <li><a href="#">nome</a></li> </ul> </li> <li><a href="#">corretores</a> <ul> <li><a href="#">CPF/CNPJ</a></li> <li><a href="#">nome</a></li> </ul> </li> <li><a href="#">outros</a> <ul> <li><a href="#">CPF/CNPJ</a></li> <li><a href="#">nome</a></li> </ul> </li> </ul> </li> <li><a href="#">sinistros</a> <ul> <li><a href="#">agricola</a></li> <li><a href="#">vida</a></li> </ul> </li> </ul> </li> <li><a href="#">excluir</a> <ul> <li><a href="#">prestadores</a> <ul> <li><a href="#">CPS</a></li> <li><a href="#">nome</a></li> <li><a href="#">CPF</a></li> </ul> </li> <li><a href="#">seguradoras</a> <ul> <li><a href="#">CSEG</a></li> <li><a href="#">nome</a></li> <li><a href="#">CNPJ</a></li> </ul> </li> <li><a href="#">seguros</a> <ul> <li><a href="#">CSEGU</a></li> <li><a href="#">CPF</a></li> </ul> </li> <li><a href="#">colaboradores</a> <ul> <li><a href="#">médicos</a> <ul> <li><a href="#">CRN</a></li> <li><a href="#">CPF/CNPJ</a></li> <li><a href="#">nome</a></li> </ul> </li> <li><a href="#">hospitais</a> <ul> <li><a href="#">CNPJ</a></li> <li><a href="#">nome</a></li> </ul> </li> <li><a href="#">clínicas</a> <ul> <li><a href="#">CNPJ</a></li> <li><a href="#">nome</a></li> </ul> </li> <li><a href="#">laboratórios</a> <ul> <li><a href="#">CNPJ</a></li> <li><a href="#">nome</a></li> </ul> </li> <li><a href="#">delegacias</a> <ul> <li><a href="#">NºDP</a></li> <li><a href="#">nome</a></li> </ul> </li> <li><a href="#">cartórios</a> <ul> <li><a href="#">CNPJ</a></li> <li><a href="#">nome</a></li> </ul> </li> <li><a href="#">corretores</a> <ul> <li><a href="#">CPF/CNPJ</a></li> <li><a href="#">nome</a></li> </ul> </li> <li><a href="#">outros</a> <ul> <li><a href="#">CPF/CNPJ</a></li> <li><a href="#">nome</a></li> </ul> </li> </ul> </li> <li><a href="#">sinistros</a> <ul> <li><a href="#">agricola</a></li> <li><a href="#">vida</a></li> </ul> </li> </ul> </li> <li><a href="sair.php">sair</a></li></ul> </div><select id="combo" style="z-index:1"><option>teste1</option><option>teste2</option></select></body></html> Onde estou errando? Compartilhar este post Link para o post Compartilhar em outros sites
micox 2 Denunciar post Postado Março 28, 2006 Lembre-se que você não tem só menus, você tem menus, submenus, subsubmenus, etc...Talvez você terá que adaptar um pouco o script do cara... Compartilhar este post Link para o post Compartilhar em outros sites
Luciano Lemgruber 0 Denunciar post Postado Outubro 12, 2006 ae galera se vcs puderem repassar esse link é o melhor que já achei sobre o div fica sobre o flash e select http://dotnetjunkies.com/WebLog/jking/arch...10/30/2975.aspx so que como o meu div você pode levar para os lados eu ainda fiquei sem resolver 100% :( mas eh o melhor esquema que vi, e outra o codigo é bem pequeno. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif abraços Compartilhar este post Link para o post Compartilhar em outros sites
Giovani 104 Denunciar post Postado Outubro 13, 2006 Beleza Luciano, fica a dica ai para quem precisar! Compartilhar este post Link para o post Compartilhar em outros sites
Luciano Lemgruber 0 Denunciar post Postado Outubro 14, 2006 Se quiserem ver como ficou acessem meu site, o endereço esta lá embaixo da página. nao sei se pode ser passado o endereco aqui mas nao é pra propaganda nao é pra ver como ficou o resultado, como no firefox o iframe sem conteudo aparece transparente o problema estava no IE ( pra variar ) que eu arrastava a janela e ficava aquele BRANCAO atras foi só usar o ( filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); ) da microsoft e pelo desenho do site as parte que usam flash ou select ficam encobertas de boa. eh isso ai vou aproveitar e colar o codigo aqui tbm ( vai que sai do ar o link que passei ) <html><head> <script> function DivSetVisible(state) { var DivRef = document.getElementById('PopupDiv'); var IfrRef = document.getElementById('DivShim'); if(state) { DivRef.style.display = "block"; IfrRef.style.width = DivRef.offsetWidth; IfrRef.style.height = DivRef.offsetHeight; IfrRef.style.top = DivRef.style.top; IfrRef.style.left = DivRef.style.left; IfrRef.style.zIndex = DivRef.style.zIndex - 1; IfrRef.style.display = "block"; } else { DivRef.style.display = "none"; IfrRef.style.display = "none"; } } </script></head><body> <form> <select> <option>A Select Box is Born ....</option> </select> </form> <div id="PopupDiv" style="position:absolute; top:25px; left:50px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100"> .... and a DIV can cover it up<br>through the help of an IFRAME. </div> <iframe id="DivShim" src="java script:false;" scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px; display:none;"> </iframe> <br> <br> <a href="#" onclick="DivSetVisible(true)">Click to show DIV.</a> <br> <br> <a href="#" onclick="DivSetVisible(false)">Click to hide DIV.</a></body></html> ai na parte do iframe eu mudei pra isso: <iframe id="DivShim" scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px; display:none; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);"></iframe> percebam que eu simplesmente tirei o src do iframe tbm, porque ficava aparecendo um false atras da dvi e como a minha div da pra mexer ficava estranhao um false ali no meio do nada e o lance do filter pra ficar transparente no IE. é isso ai galera eu tava atras de alguma coisa assim faz tempo entao se puder ser útil ta valendo qualquer coisa se quiserem ver rodando www.guiacidademorena.com.br/ vou deixar como dica também UM EXCELENTE EDITOR DE TEXTO PARA AS PÁGINAS, TANTO ASP COMO PHP E ETC. GRÁTIS http://www.fckeditor.net/ abraços ahh tava esquencendo os credito pra quem nao acessar o site do cara que fez o codigo é o Joe King nao sei o email dele nao abracos de novo Compartilhar este post Link para o post Compartilhar em outros sites
