Foros del Web » Creando para Internet » CSS »

menu que no se mantiene en su posicion

Estas en el tema de menu que no se mantiene en su posicion en el foro de CSS en Foros del Web. hola. tengo problemas con un menu superior. al div que contiene el menú le puse posicion:relative , pensando que colocando esa propiedad se adaptaria a ...
  #1 (permalink)  
Antiguo 04/03/2012, 15:33
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 11 años, 5 meses
Puntos: 7
Pregunta menu que no se mantiene en su posicion

hola. tengo problemas con un menu superior. al div que contiene el menú le puse posicion:relative, pensando que colocando esa propiedad se adaptaria a cualquier resolucion de pantalla que seria de 1024 x 768.

aqui dejo el codigo.

Código CSS:
Ver original
  1. #cabecera_menu {
  2.     float: left;
  3.     height: 33px;
  4.     left: 230px;
  5.     position: relative;
  6.     top: 34px;
  7. }
  8.  
  9. #menu_navegacion {
  10.     float: left;
  11. }
  12.  
  13. #menu_links {
  14.     float: left;
  15.     height: 22px;
  16.     margin: 0 0 0 30px;
  17. }
  18.  
  19. #buscador {
  20.     float: left;
  21.     margin: 0 0 0 36px;
  22.     position: relative;
  23.     top: -2px;
  24. }

Código HTML:
Ver original
  1. <div id="cabecera_menu">
  2.       <div id="menu_navegacion">
  3.         <div id="iconos"> <img src="imagenes/iconos.jpg" width="79" height="15" border="0" usemap="#Map">
  4.           <map name="Map">
  5.             <area shape="rect" coords="59,2,77,13" href="#" alt="email" title="email">
  6.             <area shape="rect" coords="30,2,49,13" href="#" alt="mapa del sitio" title="mapa del sitio">
  7.             <area shape="rect" coords="2,2,15,14" href="#" alt="Home" title="Home">
  8.           </map>
  9.         </div>
  10.       </div>
  11.       <div id="menu_links">
  12.         <ul>
  13.           <li><a href="#">Inicio</a></li>
  14.           <li><a href="#">Contacto</a></li>
  15.           <li><a href="#">A Favoritos</a></li>
  16.           <li><a href="#">Recomendar</a></li>
  17.         </ul>
  18.       </div>
  19.       <div id="buscador">
  20.         <form name="form1" method="post" action="">
  21.           Buscar
  22.           <input type="text" name="buscar" id="buscar" class="objetoformulario">
  23.         </form>
  24.       </div>
  25.     </div>

saludos.
  #2 (permalink)  
Antiguo 04/03/2012, 17:01
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 10 años, 8 meses
Puntos: 306
Respuesta: menu que no se mantiene en su posicion

Cita:
tengo problemas con un menu superior. al div que contiene el menú le puse posicion:relative, pensando que colocando esa propiedad se adaptaria a cualquier resolucion de pantalla que seria de 1024 x 768.
Hola
Es un poco contradictorio el mensaje, y no queda claro cual es el problema.
Si quieres que se adapte a cualquier resolución utiliza % en su ancho. Pero la verdad que no llego a comprender que es lo que necesitas.
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 04/03/2012, 17:08
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 11 años, 5 meses
Puntos: 7
Respuesta: menu que no se mantiene en su posicion

gracias por responder. lo que necesito es que el menu superior se mantenga fijo y que se adapte a cualquier tamaño. al reducir la ventana del navegador, el menu no esta en la posicion indicada y se desplaza hacia abajo.



quiero que se vea asi:



si le coloco el porcentaje (%), que cantidad le pondria ?.

aun no tengo en claro lo de position absolute y relative.

saludos.

Última edición por esaenz22; 04/03/2012 a las 17:25 Razón: correccion del post.
  #4 (permalink)  
Antiguo 04/03/2012, 22:26
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 606
Antigüedad: 7 años, 7 meses
Puntos: 36
Respuesta: menu que no se mantiene en su posicion

para adaptarlo a cualquier resolucion usa %

para que se vea siempre centrado usa

#menu {
position:absolute;
width:600px; ancho
height:40; alto
z-index:1; posicion en que se vera ,
left: 50%; esto lo manda al centro de la pantalla
top: 0px; esto te da la distancia del punto del div en relacion a la pantalla
margin-left:-300; esto te corre la mitad del div para que quede centrado

}

espero sea esta tu solucion
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..

Última edición por herzbazi; 04/03/2012 a las 22:27 Razón: falta ortografica
  #5 (permalink)  
Antiguo 05/03/2012, 10:10
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 11 años, 5 meses
Puntos: 7
Respuesta: menu que no se mantiene en su posicion

gracias por tu respuesta. pero aun así reduciendo el tamaño de la ventana del navegador, se desplaza hacia la derecha.

saludos.
  #6 (permalink)  
Antiguo 05/03/2012, 10:50
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 10 años, 8 meses
Puntos: 306
Respuesta: menu que no se mantiene en su posicion

Tienes un enlace para poder apreciar mejor.
Muestra el html completo, para ver si cabeceramenu está contenida dentro de otro div o que.
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #7 (permalink)  
Antiguo 05/03/2012, 13:42
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 11 años, 5 meses
Puntos: 7
Respuesta: menu que no se mantiene en su posicion

Código HTML:
Ver original
  1. <header id="cabecera_fondo">
  2. <div id="logo">
  3.   <h1><a href="#">logo</a></h1>
  4. </div>
  5. <div id="cabecera_menu">
  6.   <div id="menu_navegacion">
  7.     <div id="iconos"> <img src="imagenes/iconos.jpg" width="79" height="15" border="0" usemap="#Map">
  8.       <map name="Map">
  9.         <area shape="rect" coords="59,2,77,13" href="#" alt="email" title="email">
  10.         <area shape="rect" coords="30,2,49,13" href="#" alt="mapa del sitio" title="mapa del sitio">
  11.         <area shape="rect" coords="2,2,15,14" href="#" alt="Home" title="Home">
  12.       </map>
  13.     </div>
  14.   </div>
  15.   <div id="menu_links">
  16.     <ul>
  17.       <li><a href="#">Inicio</a></li>
  18.       <li><a href="#">Contacto</a></li>
  19.       <li><a href="#">A Favoritos</a></li>
  20.       <li><a href="#">Recomendar</a></li>
  21.     </ul>
  22.   </div>
  23.   <div id="buscador">
  24.     <form name="form1" method="post" action="">
  25.       Buscar
  26.       <input type="text" name="buscar" id="buscar" class="objetoformulario">
  27.     </form>
  28.   </div>
  29. </div>

el codigo css

Código CSS:
Ver original
  1. #cabecera_menu{
  2.     position:relative;
  3.     float:left;
  4.     left:230px;
  5.     height:33px;
  6.     top:34px;  
  7. }
  8.  
  9. #iconos{
  10.     float:left;
  11. }
  12.  
  13. #menu_navegacion{
  14.     float:left;
  15. }
  16.  
  17. #menu_navegacion{
  18.     float:left;
  19. }
  20.  
  21. #menu_links{
  22.     height:22px;
  23.     float:left;
  24.     margin:0 0 0 30px;
  25. }
  26.  
  27. #menu_links ul{
  28.     margin:0;
  29.     padding:0;
  30.     list-style:none;
  31. }
  32.  
  33. #menu_links li{
  34.     padding:4px 8px 0 8px;
  35.     border-right:1px solid #5e5e5e;
  36.     display:inline;
  37. }
  38.  
  39. #menu_links li a{
  40.     font-family:Verdana, Geneva, sans-serif;
  41.     font-size:11px;
  42.     color:#5e5e5e;
  43.     text-decoration:none;
  44. }
  45.  
  46. #menu_links li a:hover{
  47.     color:#5e5e5e;
  48.     text-decoration:underline;
  49. }
  50.  
  51. #buscador{
  52.     float:left;
  53.     margin:0 0 0 36px;
  54.     position:relative;
  55.     top:-2px;
  56. }

saludos.

Última edición por esaenz22; 05/03/2012 a las 13:43 Razón: correccion del post.

Etiquetas: posicion
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 03:00.