Publicado em 8 de mar.

[Resolvido] Menu por trás do Frame Principal

#desenvolvimento-frontend

Menu por trás do Frame Principal

(Desculpe, mas coloquei o texto no título e não consegui alterar depois.)

Olá pessoal, estou com um pequeno problema.

Tem uma página que trabalha com Frame, Topo e Frame Principal.

NO Frame do topo tem um menu que quando abro ele, o menu fica escondido atras do mene principal.

Código do Frame.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<frameset rows="90,*" cols="*" framespacing="0" frameborder="no" border="0" bordercolor="#FFFFFF">
 <frame src="menu2/index.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
 <frame src="recado_principal.php" name="principal" scrolling="yes" id="principal" title="principal"/>
</frameset>

<noframes>
 <body>
 </body>
</noframes>

</html>

abaixo a imagem mostrando como está o problema

/applications/core/interface/imageproxy/imageproxy.php?img=http://gmf.sc.gov.br/piscina/frame.jpg&key=fd29e19e19b26423b5450cd9c7a63ea1863a4269e18f958f9308cb58a648530c" alt="frame.jpg" />

Se alguem puder me ajudar, agradeço, falta esse detalhe pra eu dar continuidade do projeto

Discussão (20)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Marrabel· 8 de mar.

No seu arquivo CSS, defina a propriedade z-index:1 no seletor que corresponde ao submenu.

Caso tenha atribuído um z-index a outro elemento, para que ele fique na frente, basta atribuir um z-index maior.

Veja se resolve.

JonasFloripa· 12 de mar.

Olá Marrabel,

Não deu certo, mas acho que não estou colocando no lugar certo, dei uma pesquisada, mas ainda não sei onde colocar o z-index:1.

Vou colocar o código do menu e do css, se você puder informar onde colocar ficaria muito grato.

Obrigado

CSS

div#menu {

 height:41px;
 background:url(images/main-bg.png) repeat-x;

}

div#menu ul {

 margin: 0;
 padding: 0;
 list-style: none;
 float: left;
}

div#menu ul.menu {

 padding-left: 30px;
}

div#menu li {

 position: relative;
 z-index: 9;
 margin: 0;
 padding: 0 5px 0 0;
 display: block;
 float: left;
}

div#menu li:hover>ul {

 left: -2px;
}

div#menu a {

 position: relative;
 z-index: 10;
 height: 41px;
 display: block;
 float: left;
 line-height: 41px;
 text-decoration: none;
 font: normal 12px Trebuchet MS;

}

div#menu a:hover, div#menu a:hover span { color: #fff; }
div#menu li.current a {}

div#menu span {

 display: block;
 cursor: pointer;
 background-repeat: no-repeat;
 background-position: 95% 0;
}

div#menu ul ul a.parent span {

 background-position:95% 8px;
 background-image: url(images/item-pointer.gif);
}

div#menu ul ul a.parent:hover span {

 background-image: url(images/item-pointer-mover.gif);
}

/ menu::level1 /
div#menu a {

 padding: 0 10px 0 10px;
 line-height: 30px;
 color: #e5e5e5;

}

div#menu span {
margin-top: 5px;
}/**@replace#1*/
div#menu li { background: url(images/main-delimiter.png) 98% 4px no-repeat; }
div#menu li.last { background: none; }

/ menu::level2 /
div#menu ul ul li { background: none; }
div#menu ul ul {

 position: absolute;
 top: 38px;
 left: -999em;
 width: 163px;
 padding: 5px 0 0 0;
 background: rgb(45,45,45);
 margin-top:1px;
}

div#menu ul ul a {

 padding: 0 0 0 15px;
 height: auto;
 float: none;
 display: block;
 line-height: 24px;
 color: rgb(169,169,169);
}

div#menu ul ul span {

 margin-top: 0;
 padding-right: 15px;
 _padding-right: 20px;
 color: rgb(169,169,169);
}

div#menu ul ul a:hover span {

 color: #fff;
}

div#menu ul ul li.last { background: none; }
div#menu ul ul li {

 width: 100%;
}

/ menu::level3 /
div#menu ul ul ul {

 padding: 0;
 margin: -38px 0 0 163px !important;
 margin-left:172px;
z-index: 1;
}

/ colors /
div#menu ul ul ul { background: rgb(41,41,41); }
div#menu ul ul ul ul { background: rgb(38,38,38); }
div#menu ul ul ul ul { background: rgb(35,35,35); }

/ lava lamp /
div#menu li.back {

 background: url(images/lava.png) no-repeat right -44px !important;
 background-image: url(images/lava.gif);
 width: 13px;
 height: 44px;
 z-index: 8;
 position: absolute;
 margin: -1px 0 0 -5px;
}

div#menu li.back .left {

 background: url(images/lava.png) no-repeat top left !important;
 background-image: url(images/lava.gif);
 height: 44px;
 margin-right: 8px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <title>Style 01 (Deep Sky Blue) - Menu by Apycom.com</title>
 <link type="text/css" href="menu.css" rel="stylesheet" />
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="menu.js"></script>
</head>
<body>

<style type="text/css">
* { margin:0;
 padding:0;
}

body { background:rgb(74,81,85); }
div#menu { margin:5px auto; }
div#copyright {

 font:11px 'Trebuchet MS';
 color:#fff;
 text-indent:30px;
 padding:40px 0 0 0;

}

div#copyright a { color:#00bfff; }
div#copyright a:hover { color:#fff; }

</style>

<div id="menu">
 <ul class="menu">
 <li><a href="#" class="parent"><span>Home</span></a>
 <ul>
 <li><a href="#" class="parent"><span>Sub Item 1</span></a>
 <ul>
 <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
 <ul>
 <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
 <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
 </ul>
 </li>
 <li><a href="#"><span>Sub Item 1.2</span></a></li>
 <li><a href="#"><span>Sub Item 1.3</span></a></li>
 <li><a href="#"><span>Sub Item 1.4</span></a></li>
 <li><a href="#"><span>Sub Item 1.5</span></a></li>
 <li><a href="#"><span>Sub Item 1.6</span></a></li>
 <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
 <ul>
 <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
 <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
 </ul>
 </li>
 </ul>
 </li>
 <li><a href="#"><span>Sub Item 2</span></a></li>
 <li><a href="#"><span>Sub Item 3</span></a></li>
 </ul>
 </li>
 <li><a href="#" class="parent"><span>Product Info</span></a>
 <ul>
 <li><a href="#" class="parent"><span>Sub Item 1</span></a>
 <ul>
 <li><a href="#"><span>Sub Item 1.1</span></a></li>
 <li><a href="#"><span>Sub Item 1.2</span></a></li>
 </ul>
 </li>
 <li><a href="#" class="parent"><span>Sub Item 2</span></a>
 <ul>
 <li><a href="#"><span>Sub Item 2.1</span></a></li>
 <li><a href="#"><span>Sub Item 2.2</span></a></li>
 </ul>
 </li>
 <li><a href="#"><span>Sub Item 3</span></a></li>
 <li><a href="#"><span>Sub Item 4</span></a></li>
 <li><a href="#"><span>Sub Item 5</span></a></li>
 <li><a href="#"><span>Sub Item 6</span></a></li>
 <li><a href="#"><span>Sub Item 7</span></a></li>
 </ul>
 </li>
 <li><a href="#"><span>Help</span></a></li>
 <li class="last"><a href="#"><span>Contacts</span></a></li>
 </ul>
</div>

<div id="copyright">Copyright © 2012 <a href="http://apycom.com/">Apycom jQuery Menus</a></div>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</body>
</html>

NetBoy16· 12 de mar.

nesse aqui:

div#menu ul {

 margin: 0;
 padding: 0;
 list-style: none;
 float: left;
 z-index:/* defina um valor */
}

Giovani· 12 de mar.

NetBoy16, não falta alguma coisa pro z-index funcionar?

>
nesse aqui:

div#menu ul {

 margin: 0;
 padding: 0;
 list-style: none;
 float: left;
 z-index:/* defina um valor */
}

JonasFloripa· 12 de mar.

>
NetBoy16, não falta alguma coisa pro z-index funcionar?

NetBoy16 não funcionou não...ainda fica por trás do frame principal

NetBoy16· 12 de mar.

isso isso isso , falta isso aqui:

div#menu ul {

 margin: 0;
 padding: 0;
 list-style: none;
 float: left;
 z-index:/* defina um valor */;
 position:relative
}

Vlw por lembrar :yay:

JonasFloripa· 12 de mar.

Olá NetBoy16, ainda persiste o problema, não está funcionando o menu pela frente do frame principal.

abraço

allex_carvalho· 12 de mar.

No z-index você difiniu algum valor? Ex: z-index:200;

NetBoy16· 12 de mar.

isso, tente definir um valor alto para o z-index, caso nao de certo retorne a postar

JonasFloripa· 12 de mar.

não deu certo não, chequei a colocar o valor 500, mas ainda não funciona.

vai o código do frame, pode ser algo q esteja bloqueando.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<frameset rows="90,*" cols="*" framespacing="0" frameborder="no" border="0" bordercolor="#FFFFFF">
 <frame src="menu/index.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
 <frame name="principal" scrolling="yes" id="principal" title="principal"/>
</frameset>

<noframes>
 <body>
 </body>
</noframes>

</html>

GabrielFerrari· 12 de mar.

Até onde sei, frames não aceitam a propriedade z-index e também nunca vi casos de sobreposição.

O ideal seria usar divs, pq foi escolhido usar frames?

JonasFloripa· 12 de mar.

>
Até onde sei, frames não aceitam a propriedade z-index e também nunca vi casos de sobreposição.

O ideal seria usar divs, pq foi escolhido usar frames?

Olá Gabriel...

É um sistema que já rodamos aqui no meu trabalho, estamos atualizando o layout dele e algumas funcionalidades. Como no anterior usamos frame, continuamos.

Mas com certeza podemos usar div sim, terei q ver como ficaria igual ao frame, o menu fica no topo e qdo clico no link ele carrega na parte central do sistema.

se tiveres esse ideia de como funciona, pode postar, pq não entendo de div, vou ter q aprender.

Obrigado pela dica colega.

Abraço

Bergs· 12 de mar.

@JonasFloripa, se no frame topo você só utiliza o menu, deixa ele menor e passa o menu para o frame principal. É uma saída. Ele ficaria mudando só dentro do frame principal.

JonasFloripa· 12 de mar.

>
@JonasFloripa, se no frame topo você só utiliza o menu, deixa ele menor e passa o menu para o frame principal. É uma saída. Ele ficaria mudando só dentro do frame principal.

é uma saída mesmo...vou testar e vê como fica

Bergs· 12 de mar.

>
é uma saída mesmo...vou testar e vê como fica

O único detalhe é que ele vai recarregar o menu também, se for usar div também irá carregar toda a página, e para fazer um esquema desse de frames em div, você vai ter que usar php, ajax e html.

JonasFloripa· 12 de mar.

vai ser o jeito, vou ter q fazer carregando o menu em todas as páginas.

Valeu pela ajuda de vcs galera.

Obrigado

NetBoy16· 13 de mar.

talvez eu esteja errado, mas ao invés de usar frame você nao pdoeria usar Iframe ?

GabrielFerrari· 13 de mar.

>
talvez eu esteja errado, mas ao invés de usar frame você nao pdoeria usar Iframe ?

pode, mas eu não fara. rs

Diéssica· 13 de mar.

>
pode, mas eu não fara. rs

Concordo :thumbsup:

Talvez ele queira personalizar o menu separado do site. Se essa página aí se trata de um sistema, pode investir em includes. Vê aí a estrutura básica de uma página usando o include do PHP:

http://forum.imasters.com.br/topic/455812-resolvidoframes-modelos-de-pagina-ou-php/page__view__findpost__p__1803687

http://forum.imasters.com.br/topic/455812-resolvidoframes-modelos-de-pagina-ou-php/page__p__1803700#entry1803700

JonasFloripa· 15 de mar.

Olá Diéssica

Eu uso já estou usando include no sistema.

Estou fazendo como Bergs falou, trabalhando no frame principal e carregando as paginas por include.

Valeu gente pela ajuda ai.

Obrigado