Foros del Web » Creando para Internet » CSS »

Pierde su posicion

Estas en el tema de Pierde su posicion en el foro de CSS en Foros del Web. Tengo un problema, este menu desplegable esta fijo a la derecha, Cuando se reduce el tamaño de la ventana, se monta encima del contenido, lo ...
  #1 (permalink)  
Antiguo 21/01/2012, 04:44
 
Fecha de Ingreso: septiembre-2010
Mensajes: 34
Antigüedad: 13 años, 6 meses
Puntos: 2
Pierde su posicion

Tengo un problema, este menu desplegable esta fijo a la derecha,
Cuando se reduce el tamaño de la ventana, se monta encima del contenido, lo que quiero es que s qde fijo sin importar el tamaño de la ventana o resolucion de pantalla! Gracias por su ayuda



CSS DEL MENU
Código HTML:
Código:
/* ------------- Menú de Navegación -------------------------- */


#nav{margin:auto;position:absolute;top:10px;right:0px; padding-top:15px; text-align:right; /*margen con el div */}
#nav li{color:#FFFFFF; /*color base del texto*/float:left;width:11em;margin:auto;padding:0;list-style:none;background:transparent;font:11px Verdana,Tahoma,Helvetica,Sans-serif;text-align:center;position:relative;cursor:default;}
#nav li ul{padding-top:7px; /* referente a la parte superior */ margin:auto;}
#nav a{text-decoration:none;}
#nav li a{ color: #FFFFFF; font-weight: bold;}
#nav li a:hover{text-decoration:underline;}
#nav li li a:hover{text-decoration:none;}
#nav li li{filter:Alpha(opacity=50,finishopacity=50,style=1);/* Transparencia en Internet Explorer */}
#nav li li a{ border-color: #000; border-style:solid; border-width:0 2px 1px 2px; display:block;	color:#000000; font-weight: bold;background:transparent url(nav.png) 0px 0px repeat scroll; line-height:18px;}
#nav li li a:hover{color:#000000;background:transparent url(navhover.png) 0px 0px repeat scroll;/* Transparencia en Otros navegadores */}
li ul{padding:0.5em 0 1em 0;display:none;position:absolute;top:100%;left:0;}
li>ul{top:auto;left:auto;}
li li{float:left;border:0;display:block;background:transparent;}
li:hover ul,li.over ul{display:block;}

Código HTML:
Código:
<ul id="nav">
<li><a href="#" ><font color="#FFFFFF" size="-1">Paises</font></a>

  <ul> <li><a href="http://elitegourmetci.com/argentina/"><font color="#FFFFFF">Argentina</font></a></li>

  <li><a href="http://elitegourmetci.com/belgium/"><font color="#FFFFFF">Bélgica</font></a></li>

  <li><a href="http://elitegourmetci.com/colombia/"><font color="#FFFFFF">Colombia</font></a></li> 
  <li><a href="http://elitegourmetci.com/spain/"><font color="#FFFFFF">España</font></a></li>

  <li><a href="http://elitegourmetci.com/guatemala/"><font color="#FFFFFF">Guatemala</font></a></li>

  <li><a href="http://elitegourmetci.com/mexico/"><font color="#FFFFFF">Mexico</font></a></li> 
  <li><a href="http://elitegourmetci.com/peru/"><font color="#FFFFFF">Peru</font></a></li>

  <li><a href="http://elitegourmetci.com/usa/"><font color="#FFFFFF">Usa</font></a></li>

  <li><a href="http://elitegourmetci.com/Venezuela/"><font color="#FFFFFF">Venezuela</font></a></li>



 </ul>
  #2 (permalink)  
Antiguo 21/01/2012, 05:06
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 2 meses
Puntos: 306
Respuesta: Pierde su posicion

Muestra el html que usas, digo, a parte del menu para ver como interactúa con el resto de la página. O tal vez un enlace.
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 24/01/2012, 00:31
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 2 meses
Puntos: 306
Respuesta: Pierde su posicion

Hola
Recién veo el email.
Dejo el link que me pasaste: http://elitegourmetci.com/sitio/ para que todos puedan colaborar con vos.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #4 (permalink)  
Antiguo 24/01/2012, 00:42
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 2 meses
Puntos: 306
Respuesta: Pierde su posicion

El problema es la posición absoluta.
Tal vez si aplicas float: right a la imagen y quitas la position absolute del menu.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #5 (permalink)  
Antiguo 24/01/2012, 10:31
Avatar de xFantaSx  
Fecha de Ingreso: agosto-2011
Mensajes: 243
Antigüedad: 12 años, 7 meses
Puntos: 20
Respuesta: Pierde su posicion

Bueno pues a mi me ha salido así.

Primero cambiar la posición 'absolute' a 'relative' del ul con clase nav.
a ese mismo dejarle un top: -20px
y un right: -110px.

luego al div con id="conte_conte" ponerle la propiedad Clear:both

y al div id="social_sup" dejarle un padding-top: 9px.
y ya está!
__________________
Aprende cómo ganar dinero en internet...o ganar dinero rapido?

Etiquetas: demasiado, lagger, problem, resolución
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 23:27.