2 replies to this topic

[naaah]

Sou novata com CSS e tô encontrando problemas com o meu menu bar.

Situação: Tenho uma tabela de fundo que está centralizada

[codebox]<table width="750" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" align="center">[/codebox]

Do lado esquerdo tenho um menu (a idéia era fazer um menu bar), quando passa o mouse aparece o subMenu. Ai que está o problema: eu uso pixels para posicionar o sub menu, mas ele menu aparece em um lugar diferente da tela de acordo com a resolução do monitor.
Eu gostaria de saber se tem como deixar fixo esse sub Menu em qualquer tela que ele for visualizado.

Eu tentei usar pixels e %, mas nenhum dos dois deu certo..

[codebox]<div id="menu_acoes" style="position:absolute; left:300px; top:113px; width:190; height:38px; z-index:6; visibility: hidden;" onMouseOver="MM_showHideLayers('menu_acoes','','show')" onMouseOut="MM_showHideLayers('menu_acoes','','hide')">
<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<tr>
<td height="20" align="left" valign="middle" nowrap bgcolor="#F0F0F0" class="linhabaixo" onMouseOver="mOvr(this,'#FFFFFF');" onMouseOut="mOut(this,'#F0F0F0');"><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF"> <a href="as_arcoiris_indice.asp" target="_parent" class="serv">Programa Arco-Íris</a> </font> </td>
</tr>
<tr>
<td height="20" align="left" valign="middle" nowrap bgcolor="#F0F0F0" class="linhabaixo" onMouseOver="mOvr(this,'#FFFFFF');" onMouseOut="mOut(this,'#F0F0F0');"><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF"> <a href="as_prog_volunt_indice.asp" target="_parent" class="serv">Programa de Voluntariado Empresarial - 8 Metas do Milênio </a></font></td>
</tr>
<tr>
<td height="20" align="left" valign="middle" nowrap bgcolor="#F0F0F0" class="linhabaixo" onMouseOver="mOvr(this,'#FFFFFF');" onMouseOut="mOut(this,'#F0F0F0');"><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF"> <a href="premio_emae.asp" target="_parent" class="serv">Programa de Voluntariado Empresarial - Prêmio TOP SOCIAL 2008</a></font></td>
</tr>
<tr>
<td height="20" align="left" valign="middle" nowrap bgcolor="#F0F0F0" class="linhabaixo" onMouseOver="mOvr(this,'#FFFFFF');" onMouseOut="mOut(this,'#F0F0F0');"><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF"> <a href="as_parcerias_indice.asp" target="_parent" class="serv">Parcerias</a></font></td>
</tr>
<tr>
<td height="20" align="left" valign="middle" nowrap bgcolor="#F0F0F0" class="linhabaixo" onMouseOver="mOvr(this,'#FFFFFF');" onMouseOut="mOut(this,'#F0F0F0');"><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF"> <a href="as_beneficiados.asp" target="_parent" class="serv">Pessoas Beneficiadas</a> </font> </td>
</tr>
<tr>
<td height="20" align="left" valign="middle" nowrap bgcolor="#F0F0F0" class="linhabaixo" onMouseOver="mOvr(this,'#FFFFFF');" onMouseOut="mOut(this,'#F0F0F0');"><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF"> <a href="as_premiacoes_indice.asp" target="_parent" class="serv">Premiações e Divulgações</a> </font> </td>
</tr>
</table>
</div>[/codebox]

Se alguém puder ajudar, agradeço!!!

Attached Files

•  submenu.bmp   77.94KB   2 downloads

Edição feita por: Édipo Costa Rebouças, 17/08/2009, 21:16.

[Édipo Costa Rebouças]

você precisa colocar uma div, ou algo envolvendo o seu site, com o position:relative e uma largura definida

por causa do postion:relative, essa div vai ficar de referencia para os position:absolutes dentro dela, e não o monitor.

Espero ter ajudade.

Abraço [].

[naaah]

Obrigada Édipo!!

Era exatamente isso que eu precisava!!!

Deu certinho.. e o código ficou assim:

DIV que centraliza o site inteiro
[codebox]<div id="tudo" align="center"; style="position:relative";> <!-- DIV QUE CENTRALIZA O SITE INTEIRO -->[/codebox]

Sub DIVs

[codebox]<div id="Layer1" style="position:absolute; left:190px; top:448px; width:64px; height:14px; z-index:2">[/codebox]