¿Cómo posicionar una capa?

[|Miguel|]

Hola buenas... siguiendo con las funciones del otro post que hice tengo otro problema. En realidad dos problemas.

El primero, es que dependiendo de la configuración de pantalla del PC donde se cargue, el submenú me aparece desplazado. He probado a meter una tabla en la ceda donde se llama al submenú en lugar de usar la capa que he puesto aquí abajo, pero da el mismo resultado. a ver si alguien me puede ayudar a hacer posicionamiento de capas según donde cargue la página, es decir, que la función muestra me calcule la posición donde debe colocar la capa.

Funciones:

Código (javascript) [Seleccionar] Expandir

<script type="text/javascript">
function muestra(id)
{
document.getElementById(id).style.visibility='visible';
}

function oculta(id)
{
document.getElementById(id).style.visibility='hidden';
}
</script>

La capa:

Código (html4strict) [Seleccionar] Expandir

<div id="subMenu" class="menu" onMouseOut="javascript:oculta('subMenu');">
   <span class="menu">
      <a href="tintos.html">Vinos tintos</a><br/>
      <a href="blancos.html">Vinos blancos</a><br/>
      <a href="mostos.html">Mostos</a>
   </span>
</div>

Y la celda que llama:

Código (html4strict) [Seleccionar] Expandir

<td width="116" class="menu" onMouseOver="javascript:muestra('subMenu');" >Nuestros vinos</td>

El segundo problema, que no me importa demasiado la verdad, es que cuando añado lo del submenú, todo se descuadra en Internet Explorer (sólo en ese... ''navegador''). Si no pongo lo del submenú, todo vuelve a estar bien.

Gracias a todos, un Saludo.

PD: si alguien me dice las etiquetas para el tag CODE de html y java script edito el mensaje para que salga el codigo como es debido...

[#!drvy]

Hola, por favor, sube un ejemplo en vivo o muestra capturas para que podamos entenderte mejor.

Las etiquetas respectivas son

[code=html4strict] [/code]  Para HTML.
[code=javascript] [/code]  Para javascript.

Puedes utilizar la lista "GeSHI" que aparece cuando vas a crear un nuevo post.

Saludos

[|Miguel|]

Pues que al pasar el ratón por encima de la celda de "Nuestros vinos" en algunos ordenadores me sale esto:

Y lo que busco es esto, en todos (a veces me lo cuadra bien, a veces no):

[#!drvy]

Hola, no parece problema de javascript. Podrías poner el CSS que utilizas ?


Saludos

[|Miguel|]

Está entre el head y el body.

Código (css) [Seleccionar] Expandir

<style type="text/css">
#subMenu{
visibility:hidden;
}
</style>

[#!drvy]

Ejem ? solo eso ?...

Bueno, tal y como lo veo, con tablas lo vas a tener muy difícil. Sobre todo IE que hace lo que le de la gana. Te recomiendo que uses ul (listas).

Te dejo como quedaría tu menú con ul.

CSS.

Código (css) [Seleccionar] Expandir

<style type="text/css">
   #menuprincipal ul {margin:0px; padding:0px; list-style:none;}
   #menuprincipal ul li {float:left; padding:3px;}

   #submenu {display:none; position:fixed;}
   #submenu li a {display:block; _position:absolute; }
   #submenu li {float:none !important;}
</style>

javascript (utiliza display:none; en vez de visibility).

Código (javascript) [Seleccionar] Expandir

<script type="text/javascript">
   function muestra(id)
      {
         document.getElementById(id).style.display='block';
      }

   function oculta(id)
      {
         document.getElementById(id).style.display='none';
      }
</script>

Menu

Código (html4strict) [Seleccionar] Expandir

<div id="menuprincipal">
<ul class="menu">
<li>La bodega</li>
<li>Valdepenas</li>
<li onMouseOver="javascript:muestra('submenu');" onMouseOut="javascript:oculta('submenu');">
Nuestros vinos
<ul id="submenu" onMouseOut="javascript:oculta('submenu');">
<li><a href="#">Vinos tintos</a></li>
<li><a href="#">Vinos blancos</a></li>
<li><a href="#">Mostos</a></li>
</ul>
</li>
<li>Visitas y Cartas</li>
<li>Area infantil</li>
<li>Dominacion de origen</li>
<li>Contacto</li>
</ul>
</div>

Ejemplo de como quedaría (click para agrandar):


Aparte, con ese javascript, te va a ser imposible colocar otro sub-menu puesto que el id se puede declarar solo una vez.

Te recomiendo que mires el código de un compañero ha hecho mas o menos lo mismo pero con jQuery.
-> http://foro.elhacker.net/desarrollo_web/menu_desplegable_html_css_jquery_ayuda-t351067.0.html

Saludos

[|Miguel|]

Ejem ? solo eso ?...

Sí, sé que es algo triste pero quería empezar por el menú, que es lo único que podía darme problemas... y lo ha hecho XD

Lo que me has pasado tu me hace esto:

Mi idea era hacer una función javascript que tomase la posición del elemento que contiene Nuestros vinos, y dar a subMenú esa posición.

[#!drvy]

Hola,

Bueno.. Te dejo como obtener la posición de un elemento con jQuery.

Incluir jQuery.

Código (html4strict) [Seleccionar] Expandir

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

Código javascript que define el horizontal y vertical de #submenu obteniendo datos de #menu

Código (javascript) [Seleccionar] Expandir


<script type="text/javascript">
$(document).ready(function() {
   // Obtener la posicion del elemento menu(izquierda y arriba)
   var posicion = $('#menu').offset();
   // Poner la misma posicion horizontal.
   $('#submenu').css('left',posicion.left);
   // Poner la misma posicion +20px vertical
   $('#submenu').css('top',posicion.top+20);
});
</script>


#submenu debe ser position:relative o fixed

Código (css) [Seleccionar] Expandir

#submenu {position:fixed;}

Saludos

[|Miguel|]

En algunos pc's el menú sale bien y en otros abajo del todo de la página...
No sé cómo algo relativamente sencillo puede dar tanto por el c***. XD

[#!drvy]

Hola,

En algunos PC's o en otros navegadores ? Hay diferencia.

Saludos