Ir para conteúdo

POWERED BY:

Arquivado

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

JonasFloripa

[Resolvido] Menu por trás do Frame Principal

Por , em Desenvolvimento frontend

Recommended Posts

JonasFloripa    0

JonasFloripa
Postado

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

frame.jpg

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marrabel    20

Marrabel
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

JonasFloripa    0

JonasFloripa
Postado

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;
}

 

MENU

<!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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

nesse aqui:

div#menu ul {
   margin: 0;
   padding: 0;
   list-style: none;
   float: left;
   z-index:/* defina um valor */
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

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 */
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

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:

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

JonasFloripa    0

JonasFloripa
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

JonasFloripa    0

JonasFloripa
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bergs    53

Bergs
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

JonasFloripa    0

JonasFloripa
Postado

@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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bergs    53

Bergs
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

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

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