| |||
posicionamiento de menu con capas hola que tal acabo determinar un menu con capas ocultas y al pasar el raton por una celda me muestra las capas del menu el problema es cuando cambio la resolucion de patalla ya configure toda la pagina con porcentaje pero aunque mantenga porcentaje a las capas se mueven un poco hacia la izquierda quisiera que me dieran una opinion de como establecer un posicionamiento fijo de una capa en cualquiier resolucion |
| |||
Respuesta: posicionamiento de menu con capas hola realize este ejemplo rapido para que me entiendan el problema como les comentaba es de que al cambiar una resolucion mas alta me cambia de posicion el menu. Código HTML: <html> <head> <meta http-equiv="Content-Language" content="es-mx"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>UNO</title> </head> <body> <table border="1" width="100%" height="103"> <tr> <td> </td> </tr> <tr> <td> <table border="1" cellpadding="0" cellspacing="0" width="100%" height="110%" bgcolor="#FF7200"> <tr> <td width="109" align="center"> <p align="right"><font color="#F8FAFC"><span style="font-size: 9pt"><b> UNO</b></span></font></td> <td width="6" align="center"><b> <font color="#F8FAFC" style="font-size: 9pt"> |</font></b></td> <td width="126" align="center" onmouseover="document.getElementById('capa1').style.visibility='visible' ;this.style.cursor='hand';" onmouseout="document.getElementById('capa1').style.visibility='hidden' ;this.style.cursor='hand';" ><p align="center"> <b> <font color="#F8FAFC" style="font-size: 9pt"> DOS </font></b></p></td> <td width="6" align="center" onmouseover="document.getElementById('capa1').style.visibility='visible' ;this.style.cursor='hand';" onmouseout="document.getElementById('capa1').style.visibility='hidden' ;this.style.cursor='hand';" ><b> <font color="#F8FAFC" style="font-size: 9pt"> |</font></b></td> <td width="133" align="center" onmouseover="document.getElementById('capa2').style.visibility='visible' ;this.style.cursor='hand';" onmouseout="document.getElementById('capa2').style.visibility='hidden' ;this.style.cursor='hand';" ><p align="center"> <font color="#F8FAFC"><span style="font-size: 9pt"><b>TRES</b></span></font></p></td> <td width="6" align="center" onmouseover="document.getElementById('capa2').style.visibility='visible' ;this.style.cursor='hand';" onmouseout="document.getElementById('capa2').style.visibility='hidden' ;this.style.cursor='hand';" ><b> <font color="#F8FAFC" style="font-size: 9pt"> |</font></b></td> <td width="135" align="center" onmouseover="document.getElementById('capa3').style.visibility='visible' ;this.style.cursor='hand';" onmouseout="document.getElementById('capa3').style.visibility='hidden' ;this.style.cursor='hand';" ><p align="center"> <font color="#F8FAFC"><span style="font-size: 9pt"><b>CUATRO</b></span></font></p></td> <td width="6" align="center" onmouseover="document.getElementById('capa3').style.visibility='visible' ;this.style.cursor='hand';" onmouseout="document.getElementById('capa3').style.visibility='hidden' ;this.style.cursor='hand';" ><b> <font color="#F8FAFC" style="font-size: 9pt"> |</font></b></td> <td width="127" align="center"><p align="center"><font color="#F8FAFC"> <span style="font-size: 9pt"><b>CINCO</b></span></font></p></td> <td width="6" align="center"><p align="center"><b> <font color="#F8FAFC" style="font-size: 9pt"> |</font></b></p></td> <td width="125" align="center"><p align="center"><b> <font color="#F8FAFC" style="font-size: 9pt"> </font></b><font color="#F8FAFC"><span style="font-size: 9pt"><b>SEIS</b></span></font></p></td> <td width="6" align="center"><p align="center"><b> <font color="#F8FAFC" style="font-size: 9pt"> |</font></b></p></td> <td width="127" align="center"><p align="left"><font color="#F8FAFC"> <span style="font-size: 9pt"><b>SIETE</b></span></font></p></td> </tr> </table></td> </tr> </table> <div style="position: absolute; width: 138px; left: 135px; z-index:211; top:89px; float:right; visibility:hidden" id="capa1" onMouseOver="document.getElementById('capa1').style.visibility='visible' ;this.style.cursor='hand';" onMouseOut="document.getElementById('capa1').style.visibility='hidden' ;this.style.cursor='hand';"> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> </table> <table border="1" width="139" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF"> <tr> <td align="center" style="background:#FF7200; opacity:.7; filter:alpha(opacity=80)" onMouseOver="this.style.backgroundColor='#3366CC';this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='#FF7200';"> <font size="1" color="#FFF9F4"><b>UNO</b></font></td> </tr> <tr> <td align="center" style="background:#FF7200; opacity:.7; filter:alpha(opacity=80)"onMouseOver="this.style.backgroundColor='#3366CC';this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='#FF7200';"> <font size="1" color="#FFFFFF"><b>DOS</b></font></td> </tr> </table> </div> <div style="position: absolute; width: 147px; left: 275px; top: 90px; z-index:203; height:68px; visibility:hidden" id="capa2" onMouseOver="document.getElementById('capa2').style.visibility='visible' ;this.style.cursor='hand';" onMouseOut="document.getElementById('capa2').style.visibility='hidden' ;this.style.cursor='hand';" > <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> </table> <table border="1" width="146" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF"> <tr> <td align="center" style="background:#FF7200; opacity:.7; filter:alpha(opacity=80)" onMouseOver="this.style.backgroundColor='#3366CC';this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='#FF7200';"> <font size="1" color="#FFF9F4"><b>UNO</b></font></td> </tr> <tr> <td align="center" style="background:#FF7200; opacity:.7; filter:alpha(opacity=100)" onMouseOver="this.style.backgroundColor='#3366CC';this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='#FF7200';"> <font size="1" color="#FFF9F4"><b>DOS</b></font></td> </tr> </table> </div> <div style="position: absolute; width: 151px; left: 421px; top: 91px; float:left; z-index:205; height:76px; visibility:hidden" id="capa3" onMouseOver="document.getElementById('capa3').style.visibility='visible' ;this.style.cursor='hand';" onMouseOut="document.getElementById('capa3').style.visibility='hidden' ;this.style.cursor='hand';" > <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> </table> <table border="1" width="151" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF" bgcolor="#FFFFFF"> <tr> <td align="center" style="background:#FF7200; opacity:.7; filter:alpha(opacity=80)" onMouseOver="this.style.backgroundColor='#3366CC';this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='#FF7200';"> <font size="1" color="#FFF9F4"><b>UNO</b></font></td> </tr> <tr> <td align="center" style="background:#FF7200; opacity:.7; filter:alpha(opacity=80)" onMouseOver="this.style.backgroundColor='#3366CC';this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='#FF7200';"> <font size="1" color="#FFF9F4"><b>DOS </b> </font><b><font size="1" color="#FFF9F4"> </font></b></td> </tr> </table> </div> </body> </html> |
| |||
Respuesta: posicionamiento de menu con capas Bueno al parcer no hay mas opciones uno no puede controlar al 100% la posicion del cambio de resolucion bueno muchas gracias a los que se tomaron el tiempo y espero tener suerte para la proxima. |