Foros del Web » Creando para Internet » CSS »

Sub menu defasado

Estas en el tema de Sub menu defasado en el foro de CSS en Foros del Web. Gente . . . estoy temrinando de armar un menu, el cual me trajo problemas cuando lo coloque en el lugar que le correspondia en ...
  #1 (permalink)  
Antiguo 25/06/2010, 13:55
Avatar de lbenz  
Fecha de Ingreso: marzo-2003
Ubicación: Haedo
Mensajes: 445
Antigüedad: 14 años, 8 meses
Puntos: 4
Sub menu defasado

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
__________________
que fea firma que tenia... prefiero tener esto

Última edición por lbenz; 25/06/2010 a las 14:07
  #2 (permalink)  
Antiguo 27/06/2010, 23:51
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Sub menu defasado

Cita:
Iniciado por lbenz Ver Mensaje
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

Última edición por cristian_cena; 27/06/2010 a las 23:59
  #3 (permalink)  
Antiguo 28/06/2010, 10:05
Avatar de lbenz  
Fecha de Ingreso: marzo-2003
Ubicación: Haedo
Mensajes: 445
Antigüedad: 14 años, 8 meses
Puntos: 4
Respuesta: Sub menu defasado

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
__________________
que fea firma que tenia... prefiero tener esto
  #4 (permalink)  
Antiguo 28/06/2010, 10:35
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Sub menu defasado

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
  #5 (permalink)  
Antiguo 28/06/2010, 10:42
Avatar de lbenz  
Fecha de Ingreso: marzo-2003
Ubicación: Haedo
Mensajes: 445
Antigüedad: 14 años, 8 meses
Puntos: 4
Respuesta: Sub menu defasado

esta bueno, me podrias dar un ejemplo de como hacer las diferencias para ie6 ??? puede ser?
__________________
que fea firma que tenia... prefiero tener esto
  #6 (permalink)  
Antiguo 28/06/2010, 10:45
Avatar de lbenz  
Fecha de Ingreso: marzo-2003
Ubicación: Haedo
Mensajes: 445
Antigüedad: 14 años, 8 meses
Puntos: 4
Respuesta: Sub menu defasado

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
__________________
que fea firma que tenia... prefiero tener esto
  #7 (permalink)  
Antiguo 28/06/2010, 10:56
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Sub menu defasado

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" />

<!--[if IE]>
<link href="css/estilosparaIE.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if IE 6]>
<link href="css/estilosparaIE6.css" rel="stylesheet" type="text/css" />
<![endif]-->

</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

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:41.