alinear submenú CSS y Script.

[Wakkos]

Estoy trabajando con un menú basado en CSS y bueno, puedo colocar el menu principal donde me de la gana (hablo de posicionamiento con CSS) pero los submenús son genrados por un script en el cual se establecen las variables de cada menú para definir su distancia desde la izquierda, que es lo que me interesa.

El problema es que quiero colocar la barra de menú centrada con %%% (left:25%, por ejemplo) pero claro que no puedo definir cada uno de los submenús en %, ya que son uno al lado de otro, y en px, no cuadra según la resolución del monitor.

Buenoi, es medio extraño, pero chequénlo a ver si pueden ayudarme: <a href='ir.asp?http://www.fascinationtransport.com/rive/css-menus/' target='_blank'>http://www.fascinationtransport.com/rive...</a>

[KarlanKas]

Wakkos!

Te recomiendo que lo metas todo en una capa y la pongas centrada (poniendo esa capa con posicionamiento relativo) y las distintas capas del menú con posicionamiento absoluto. situándolas con pixels (da igual ya que el tamaño es siempre el mismo). Te mando un ejemplo t o n t o (qué barbaridad el chequeador de expresiones) para que veas cómo mantiene la posición haciendo esto. Si no lo entiendes me lo dices. :)
-------------------
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;prueba&lt;/title&gt;
&lt;style&gt;
#centro{
position:relative;
background:white;
height:500px;
width:600px;
}
#menu{
position:absolute;
height:20px;
width:200px;
background:red;
top:0px;
left:30px;
}
#submenu{
position:absolute;
height:200px;
width:100px;
top:20px;
left:30px;
background:yellow;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body bgcolor=&quot;black&quot;&gt;
&lt;center&gt;
&lt;div id=&quot;centro&quot; align=&quot;center&quot;&gt;
&lt;div id=&quot;menu&quot;&gt;
&lt;/div&gt;
&lt;div id=&quot;submenu&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/center&gt;
&lt;/body&gt;
&lt;/html&gt;
--------------------

Espero que te sirva.
Recuerda que debes meter toda la página en una capa (en este caso la capa centro)


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="190" height="51"><param name="bgcolor" value="#0066CC"><param name="movie" value="http://www.webareyou.com/Movie1.swf"><embed src="http://www.webareyou.com/Movie1.swf"></embebed></object>

[Wakkos]

KarlanKas, la verdad es que me fui de *****!! nunca se me ocurrió hacer eso!!
yo hasta centré en contenido del body.. jejeje

Muchas Gracias!!!
Ya funciona, puedes vero, y ahora a trabajar!

[KarlanKas]

Wakkos!

Ahora va de maravilla. Yo tuve un problema parecido con otra página y me rompí la cabeza hasta dar con esta solución. Me alegro de que la solución que encontré te haya servido también a tí. Ya sabes: hoy por mi mañana por tí... ;)

Salu2

KarlanKas

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="190" height="51"><param name="bgcolor" value="#0066CC"><param name="movie" value="http://www.webareyou.com/Movie1.swf"><embed src="http://www.webareyou.com/Movie1.swf"></embebed></object>

[goblin]

Hola:

Me gustaría saber como se hace un menú en CSS.

Se de una forma (un ejemplo de un tutorial), pero ésta maneja muchos ID que no entiendo en las etiquetas DIV, si es la únia manera... por favor, que alguien me explique.

[Wakkos]

Wowo!! bueno, voy a tratar, pero yo no se mucho, ya que el script lo bajé del depósito de Javascript.

Seguro que cualquiera que sepa te dará una mejor explicación.

Todas las clases son mias para posicionamiento de texto (clases=DIV.loquesea) el resto tienen su nombre bien definido en el nombre del DIV:

#menubar: donde especificas los colores y el posicionamiento de la barra principal de menú (Altura, margen desde la izq. colores, etc.)

#menubar a: Donde vas a especificar las características de los links del menú ppl.

#menubar a.active: solo el mouseover los links

.menu .options: LAs características del submenú

.menu a: los links de los submenús

.menu a:hover mouseover los submenús


Luego tienes al archivo script donde yo me pierdo pero si se que te imprime las capas de los submenús y te genera la animación.

En la parte principal de la página, esta esto:

<pre> var menus = [ //ypSlideOutMenu(id, dir, left, top, width, height)
new ypSlideOutMenu(&quot;menu1&quot;, &quot;down&quot;, 5, 95, 130, 59),
new ypSlideOutMenu(&quot;menu2&quot;, &quot;down&quot;, 105, 95, 170, 183),
new ypSlideOutMenu(&quot;menu3&quot;, &quot;down&quot;, 221, 95, 170, 150),
new ypSlideOutMenu(&quot;menu4&quot;, &quot;down&quot;, 345, 95, 170, 21)
] </pre>

Donde defines las variables de posicionamiento de los submenús. No es algo tan complicado si le das una mirada y bajas el script. Lo puedes bajar deldepósito de javascript o en ../ypSlideOutMenusC.js en esa misma página.

de todos modos, otro lo explicará mucho mas claro repito. Yo solo soy un aficionado al JScript.