Sub menu defasado

lbenz · #1 (**permalink**) 25/06/2010, 12:55

Gente . . . estoy temrinando de armar un menu, el cual me trajo problemas cuando lo coloque en el lugar que le correspondia en la pagina.

me esta tomando una posicion absolute sobre la pagina entera y no sobre la div en donde se encuentra, entonces el submenu se alinea a x distancia izquierda del navegador.. yo necesitaria que lo haga sobre la div y no sobre el 100% de la pagina.

para que les quede mas claro aca les dejo el ejemplo

http://www.leobenz.com.ar/foros_del_...eba/index.html

aca les dejo el css principal de la pagina y tambien el css seaprado del menu . .

CSS PAGINA - - - - - - - - - CSS MENU

si no se entiende lo que pasa por favor pregunten. . . los submenu estan en los botones SOBRE NOSOTROS . . . PRODUCTOS .. . DONDE COMPRAR

DESDE YA MUCHAS GRACIAS

RESUELTO CON FIXED Y LEFT AUTO

cristian_cena · #2 (**permalink**) 27/06/2010, 22:51

Cita:

Iniciado por lbenz

me esta tomando una posicion absolute sobre la pagina entera y no sobre la div en donde se encuentra.

Hola lbenz, primero, me alegro que ya lo hallas resuelto, nada más en cuanto a esta cita quisiera aportar lo siguiente:

En un div absoluto las distancias (top-left-right-bottom) dependerán de su primer ancestro relativo y si este no existe de su primer ancestro static (o sea <body>)

ejemplo 1:
<body><div><div id="absoluto" style="position:absolute;"></div></div></body>
la posición de #absoluto dependerá de la caja css de body

ejemplo 2:
<body><div id="relativo" style="position:relative;"><div id="absoluto" style="position:absolute;"></div></div></body>
la posición de #absoluto dependerá de la caja css de #relativo

Con esto evitarás lo que te esta sucediendo, que es que se te desfasa segun la resolución.
Si quieres posicionar cajas absolutas fuera de un bloque de contención (o sea que dependan de body) y al mismo tiempo dejarlas "quietas" en un lugar fijo te puedes pasar por este hilo

Espero te sea útil, un saludo

lbenz · #3 (**permalink**) 28/06/2010, 09:05

querido compañero . . fantastico lo tuyo . . lo resolvi de mil maravillas . . genial . .

ahora tengo otro terrible problema . . . a ver si me pueden ayudar . . .

ACA LES DEJO EL LINK DE COMO ESTA EL MENU ACTUALMENTE

se ve barbaro en explorer 8, en chrome , pero en explorer 6 y 7 no se ve el submenu . . y les juro que me indigana ya, no puede ser toda esta cagada de exploradores nos caguen las vidaaaaaaaaaaaaa . . .

alguno me puede ayudar, aca les dejo los links tambien de las hojas de estilo . .

ESTILOS DE LA PAGINA

ESTILOS DEL MENU

cristian_cena · #4 (**permalink**) 28/06/2010, 09:35

Hola Ibenz, que bueno te sirvio che.
Mira, frente a este problema (IE) lo que actualmente hago es:

primero: dar compatibilidad para que ie8 e ie7 tomen de igual fotma los estilos (ie8 se te transformará en ie7)
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
segundo: realizar hojas de estilos extra (una para todos los IE y otra para IE6), las cuales llamo con comentarios condicionales.

Con esto mantengo los estilos creados para todos los navegadores al tiempo que hago pequeños cambios para ie.
Generalmente las hojas de estilo para ie son de no mas de 10 líneas de código porque son pequeños cambios (sobre todo margins, paddings y valores top-right-bottom-left) para solventar los bugs.

Es lo que hago, ahora, seguro habrá quien lo haga de un modo diferente, eso ya va en la comodidad de cada uno y en la experiencia que llevamos con las hojas de estilos. Así que bienvenido aquel que quiera compartir sus prácticas de trabajo.

Un saludo

lbenz · #5 (**permalink**) 28/06/2010, 09:42

esta bueno, me podrias dar un ejemplo de como hacer las diferencias para ie6 ??? puede ser?

lbenz · #6 (**permalink**) 28/06/2010, 09:45

igualmente, puse el codigo ese en el index . . para igualar el 7 y el 8 y no me funciono . . se sigu viendo igual . . te piodes fijar en el link de antes

cristian_cena · #7 (**permalink**) 28/06/2010, 09:56

Te comparto como quedan mis cabeceras:

<head>

<title>titulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/estilosParaTodos.css" rel="stylesheet" type="text/css" />





</head>

Luego crea las hojas de estilos allí indicadas con los cambios necesarios. Los comentarios condicionales se encargarán de que esos cambios solo sean interpretados por IE y nadie más.

Lo de dar compatibilidad para mi es importante ya que te preocupas de una sola version en vez de dos (ya que transformamos ie8 en ie7), seguirás viendo descuadrada la maqueta hasta que realices las hojas de estilos para ie.

Saludo