redimensionar esse menu

[RicardoRodrigues 0]

Bom dia a todos, estou com problema para redimensionar esse menu na tela, se for uma resolução 1024x 768 fica perfeito, mais se mudar a resolução ou diminuir o tamanho da janela do browser muda tudo.

Quando passar o mouse sobre o menu vai aparecer o submenu, este tem mais duas opções, subvisual e subproduto e estas por sua vez contem mais quatro links cada.

sou iniciante em css estou vendo faz poucos dias, mudei o position para relative e fiquei chutando uns valores mais quando faço isso esta prejudicando o resto [uma tabela de uma linha e duas colunas (estou tentando passar tudo pra div mais estou com problemas para alinhas isso é para outra hora xD) ] do site e não fica alinhado onde quero. o meu maior problema é que o menu e todo o texto é imagem, me exigiram uma fonte que não tem então estou usando imagem e pintando o fundo com a cor da tela.

o código css é esse:

 

#submenu {

position:absolute;

left:112px;

top:63px;

width:72px;

height:50px;

z-index:1;

visibility: hidden;

}

 

#subvisual {

position:absolute;

left:170px;

top:35px;

width:78px;

height:72px;

z-index:2;

visibility: hidden;

}

 

#subproduto {

position:absolute;

left:170px;

top:35px;

width:78px;

height:72px;

z-index:3;

visibility: hidden;

}

 

Menu

 

<table width="800" height="65" border="0" align="center">

<tr>

<td width="400" height="65" valign="bottom" ><img src="arquivos/menu.jpg" alt="menu" width="305" height="13" border="0" usemap="#Map2" /></td>

<td width="400" align="right"><a href="index.html"><img src="arquivos/logo.jpg" alt="logo" width="219" height="65" border="0" /></a></tr>

</table>

 

 

Submenu:

 

<div id="submenu" onmouseover="MM_showHideLayers('submenu','','show')" onmouseout="MM_showHideLayers('submenu','','hide')">

<table width="72" height="50" border="0" cellpadding="2" cellspacing="2">

<tr>

<td height="25" onmouseover="MM_showHideLayers('subvisual','','show')" onmouseout="MM_showHideLayers('subvisual','','hide')"><a href="portifolio/port_visual.html"><img src="arquivos/vistxt.jpg" alt="visual" width="33" height="9" border="0" align="bottom" /></a></td>

</tr>

<tr>

<td height="25" onmouseover="MM_showHideLayers('subproduto','','show')" onmouseout="MM_showHideLayers('subproduto','','hide')"> <a href="portifolio/port_produto.html"><img src="arquivos/protxt.jpg" alt="produtos" width="47" height="9" border="0" /></a></td>

</tr>

</table>

</div>

 

 

subvisual

<div id="subvisual" onmouseover="MM_showHideLayers('submenu','','show');MM_showHideLayers('subvisual','','show')" onmouseout="MM_showHideLayers('submenu','','hide');MM_showHideLayers('subvisual','','hide')">

<table width="78" height="72" border="0" align="center" cellpadding="2" cellspacing="2">

<tr>

<td height="18"><a href="portifolio/visual/anuncio/anuncio.html"><img src="arquivos/anutxt.jpg" alt="anuncio" width="44" height="7" border="0" /></a></td>

</tr>

<tr>

<td height="18"><a href="portifolio/visual/catalogo/catalogo.html"><img src="arquivos/catxt.jpg" alt="catalogo" width="43" height="10" border="0" /></a></td>

</tr>

<tr>

<td height="18"><a href="portifolio/visual/embala/embal.html"><img src="arquivos/embtxt.jpg" alt="embalagem" width="56" height="9" border="0" /></a></td>

</tr>

<tr>

<td height="18"><a href="portifolio/visual/marca/marcas.htm"><img src="arquivos/marcas.jpg" alt="marcas" width="33" height="7" border="0" /></a></td>

</tr>

</table>

</div>

 

subproduto

<div id="subproduto" onmouseover="MM_showHideLayers('submenu','','show');MM_showHideLayers('subproduto','','show')" onmouseout="MM_showHideLayers('submenu','','hide');MM_showHideLayers('subproduto','','hide')">

<table width="78" height="72" border="0" cellpadding="2" cellspacing="2">

<tr>

<td height="18"><a href="portifolio/produto/cozinha/cozinha.htm"><img src="arquivos/cozinha.jpg" alt="cozinha" width="35" height="7" border="0" /></a></td>

</tr>

<tr>

<td height="18"><a href="portifolio/produto/jardim/jardim.htm"><img src="arquivos/jardim.jpg" alt="jardim" width="27" height="10" border="0" /></a></td>

</tr>

<tr>

<td height="18"><a href="portifolio/produto/quarto/quarto.htm"><img src="arquivos/quarto.jpg" alt="quarto" width="31" height="9" border="0" /></a></td>

</tr>

<tr>

<td height="18"><a href="portifolio/produto/sala/sala.htm"><img src="arquivos/sala.jpg" alt="sala" width="16" height="7" border="0" /></a></td>

</tr>

</table>

<br />

</div>

 

 

Tenho que entregar isso até segunda, estou estudando css e fazendo uns testes mais ainda não consegui, se alguém puder ajudar agradeço.

abraços.

[Giovani 104]

Com tabela eu nem sei mexer.

Recomendo você pesquisar sobre menu drop aqui no fórum.

 

http://forum.imasters.com.br/index.php?act...p;highlite=drop

 

[]´s http://forum.imasters.com.br/public/style_emoticons/default/natal_noel.gif

[RicardoRodrigues 0]

o principal problema é que o menu não é texto, então não tenho como usar o ul e li, baixei uns scripts e estou tentando modificar vamos ver no que vai dar.

[Guilherme Rambo 4]

Tem como usar sim, aprende xhtml e css q você sabera fazer

[RicardoRodrigues 0]

quem não sabe improvisa xDo menu era uma imagem só, cortei em quatro =D, dai em vez de escrever portifolio eu coloquei uma imagem apenas para portifolio, bem to fazendo o menu a parte e esta ok, depois vou colocar ele no site.

[Guilherme Rambo 4]

Naum eh dificil aprender, olha nos topicos fixos aqui da seção q você aprende bastante

 

[]'s http://forum.imasters.com.br/public/style_emoticons/default/natal_noel.gif

[RicardoRodrigues 0]

a primeira coisa que vou fazer quando tiver tempo é ler isso xD, deu outro problema, no firefox e no opera as imagens dos submenus estão ok, mais no ie a imagem é circulada por um circulo vermelho/vinho, abri no photoshop e as imagens estão ok é so no ie que ta assim, alguem sabe o que pode ser?

[Guilherme Rambo 4]

tabelas <_<

 

[]'s http://forum.imasters.com.br/public/style_emoticons/default/natal_happy.gif

[RicardoRodrigues 0]

img { border:none;}