Ir para conteúdo

POWERED BY:

Arquivado

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

alexandremanowar

Div nao fica sobre / acima do select

Por , em Desenvolvimento frontend

Recommended Posts

alexandremanowar    0

alexandremanowar
Postado

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

Hunter_
Postado

Kd o <select> no teu codigo, ele ta aonde? no body?

Compartilhar este post

Link para o post
Compartilhar em outros sites

alexandremanowar    0

alexandremanowar
Postado

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

alexandremanowar    0

alexandremanowar
Postado

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

micox
Postado

É... 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

alexandremanowar
Postado

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

micox
Postado

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

Luciano Lemgruber
Postado

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

Luciano Lemgruber    0

Luciano Lemgruber
Postado

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
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito