Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Galera é o seguinte... To montando um layout aqui... Fiz um menu horizontal, com um submenu que abre na vertical com js. Tudo belezinha... Se não pelo seguinte fato de que na hora que o menu abre ele quebra o layout da página jogando as imagens para baixo... E também pelo fato de que ele não funciona da mesma forma que funciona fora do layout... Por exemplo quando eu estava desenvolvendo o menu eu fiz em um html separado fora do layout... Fora do layout o menu abre da maneira certa: logo abaixo do botão...
Simples exemplificar, é só olhar o site para vocês entenderem: http://www.corppore.com.br/
Clica em "Nossos serviços:", ai você vão ver como o menu ta quebrando o layout...
O que eu quero saber é como eu faço para acabar com isso? Fazer com que o menu passe por cima do conteúdo, sem quebrar o layout...
Ah! E outra coisas... Tive pesquisando mais não achei algo muito concreto... Como eu faço para colocar um link na célula da tabela e não no conteúdo dela; para que o link ocupe todo o espaço da célula e não só o que está escrito dentro dela?
Vou postar os códigos aqui:
index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<title>. . . : : Corppore - Medicina Estética : : . . .</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import url("css/style.css");
</style>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body bgcolor="#eed1e4">
<div id="geral" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="950">
<tr>
<td><img src="images/spacer.gif" width="8" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="52" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="375" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="40" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="17" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="238" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="122" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="90" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="8" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="4"><img name="t1" src="images/t1.gif" width="475" height="200" border="0" id="t1" alt="" /></td>
<td colspan="5"><img name="t2" src="images/t2.gif" width="475" height="200" border="0" id="t2" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="200" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="9"><img name="index_r2_c1" src="images/index_r2_c1.gif" width="950" height="7" border="0" id="index_r2_c1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="7" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><img name="index_r3_c1" src="images/index_r3_c1.gif" width="8" height="28" border="0" id="index_r3_c1" alt="" /></td>
<td colspan="7" width="934" height="20" background="images/barra.gif"><!-- --------------------------------------------- INÍCIO MENU ----------------------------------
<div align="left">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="menu" onmouseover="this.bgColor='#EED1E4';ocultar();" onMouseOut="this.bgColor='';">..: Home</td>
<td class="menu" onmouseover="this.bgColor='#EED1E4';ocultar();" onMouseOut="this.bgColor='';">..: A Empresa</td>
<td class="menu" onmouseover="this.bgColor='#EED1E4';ocultar();" onMouseOut="this.bgColor='';">..: Quem somos?</td>
<td class="menu" onmouseover="this.bgColor='#EED1E4';ocultar();" onMouseOut="this.bgColor='';">..: Nossa Estrutura</td>
<td class="menu" onmouseover="this.bgColor='#EED1E4';ocultar();" onMouseOut="this.bgColor='';">..: Onde Estamos?</td>
<td id="menu1" class="menu" onmouseover="this.bgColor='#EED1E4';mostrar(1);" onMouseOut="this.bgColor='';">..: Nossos Serviços:</td>
</tr>
</table>
<div id="sub" onMouseOver="mostrar(1)" onMouseOut="ocultar()">
<table cellpadding="0" cellspacing="0" width="150" height="" onMouseOver="mostrar(1)" onMouseOut="ocultar()" style="color:#C658A0;">
<tr><td onmouseover="this.bgColor='#EED1E4';" onMouseOut="this.bgColor='';">..: Botox</td></tr>
<tr><td onmouseover="this.bgColor='#EED1E4';" onMouseOut="this.bgColor='';">..: Preenchimento</td></tr>
<tr><td onmouseover="this.bgColor='#EED1E4';" onMouseOut="this.bgColor='';">..: Peeling</td></tr>
</table>
</div>
</div>---------------------------------------------------- FIM MENU -------------------------- -->
</td>
<td rowspan="2"><img name="index_r3_c9" src="images/index_r3_c9.gif" width="8" height="28" border="0" id="index_r3_c9" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="20" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="7"><img name="index_r4_c2" src="images/index_r4_c2.gif" width="934" height="8" border="0" id="index_r4_c2" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="8" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="9" align="left" valign="top" bgcolor="#FFFFFF"></td>
<td><img src="images/spacer.gif" width="1" height="283" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="9"><img name="index_r6_c1" src="images/index_r6_c1.gif" width="950" height="13" border="0" id="index_r6_c1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="13" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="4" colspan="2"><img name="index_r7_c1" src="images/index_r7_c1.gif" width="60" height="69" border="0" id="index_r7_c1" alt="" /></td>
<td rowspan="2"><a href="mapa.htm" target="_parent"><img name="mapa" src="images/mapa.gif" width="375" height="52" border="0" id="mapa" alt="" /></a></td>
<td rowspan="4" colspan="2"><img name="index_r7_c4" src="images/index_r7_c4.gif" width="57" height="69" border="0" id="index_r7_c4" alt="" /></td>
<td><a href="contato.htm" target="_parent"><img name="contato" src="images/contato.gif" width="238" height="30" border="0" id="contato" alt="" /></a></td>
<td colspan="3"><img name="index_r7_c7" src="images/index_r7_c7.gif" width="220" height="30" border="0" id="index_r7_c7" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="30" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2" colspan="2"><a href="consulta.htm" target="_parent"><img name="consulta" src="images/consulta.gif" width="360" height="30" border="0" id="consulta" alt="" /></a></td>
<td rowspan="3" colspan="2"><img name="index_r8_c8" src="images/index_r8_c8.gif" width="98" height="39" border="0" id="index_r8_c8" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="22" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><img name="index_r9_c3" src="images/index_r9_c3.gif" width="375" height="17" border="0" id="index_r9_c3" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="8" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="2"><img name="index_r10_c6" src="images/index_r10_c6.gif" width="360" height="9" border="0" id="index_r10_c6" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="9" border="0" alt="" /></td>
</tr>
</table>
</div>
</body>
</html>@charset "utf-8";
td img {display: block;
} font:Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
} margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
} font:Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
} text-decoration: none;
} text-decoration: none;
} text-decoration: none;
} text-decoration: none;
}
#geral {
margin-top:10px;
margin-bottom:10px;
}
.menu {
color:#C658A0;
font-weight:bold;
padding-right: 10px;
}
#sub {
display: none;
background-color: #ECB9CD;
width: 150px;
border: 2px solid #C657A0;
font-weight: bold;
}function mostrar(numMenu) {
var subMenu = document.getElementById("sub");
var Menu = document.getElementById("menu"+numMenu);
subMenu.style.display = "block";
}
function ocultar() {
var subMenu = document.getElementById("sub");
subMenu.style.display = "none";
}Carregando comentários...