menu que no se mantiene en su posicion

[esaenz22]

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:

#cabecera_menu {
    float: left;
    height: 33px;
    left: 230px;
    position: relative;
    top: 34px;
}
 
#menu_navegacion {
    float: left;
}
 
#menu_links {
    float: left;
    height: 22px;
    margin: 0 0 0 30px;
}
 
#buscador {
    float: left;
    margin: 0 0 0 36px;
    position: relative;
    top: -2px;
}
 

Código HTML:

<div id="cabecera_menu">
      <div id="menu_navegacion">
        <div id="iconos"> <img src="imagenes/iconos.jpg" width="79" height="15" border="0" usemap="#Map">
          <map name="Map">
            <area shape="rect" coords="59,2,77,13" href="#" alt="email" title="email">
            <area shape="rect" coords="30,2,49,13" href="#" alt="mapa del sitio" title="mapa del sitio">
            <area shape="rect" coords="2,2,15,14" href="#" alt="Home" title="Home">
          </map>
        </div>
      </div>
      <div id="menu_links">
        <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Contacto</a></li>
          <li><a href="#">A Favoritos</a></li>
          <li><a href="#">Recomendar</a></li>
        </ul>
      </div>
      <div id="buscador">
        <form name="form1" method="post" action="">
          Buscar
          <input type="text" name="buscar" id="buscar" class="objetoformulario">
        </form>
      </div>
    </div>
 

saludos.

[C2am]

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

[esaenz22]

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.

[herzbazi]

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

[esaenz22]

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

saludos.

[C2am]

Tienes un enlace para poder apreciar mejor.
Muestra el html completo, para ver si cabeceramenu está contenida dentro de otro div o que.
Saludos

[esaenz22]

Código HTML:

<header id="cabecera_fondo">
<div id="logo">
  <h1><a href="#">logo</a></h1>
</div>
<div id="cabecera_menu">
  <div id="menu_navegacion">
    <div id="iconos"> <img src="imagenes/iconos.jpg" width="79" height="15" border="0" usemap="#Map">
      <map name="Map">
        <area shape="rect" coords="59,2,77,13" href="#" alt="email" title="email">
        <area shape="rect" coords="30,2,49,13" href="#" alt="mapa del sitio" title="mapa del sitio">
        <area shape="rect" coords="2,2,15,14" href="#" alt="Home" title="Home">
      </map>
    </div>
  </div>
  <div id="menu_links">
    <ul>
      <li><a href="#">Inicio</a></li>
      <li><a href="#">Contacto</a></li>
      <li><a href="#">A Favoritos</a></li>
      <li><a href="#">Recomendar</a></li>
    </ul>
  </div>
  <div id="buscador">
    <form name="form1" method="post" action="">
      Buscar
      <input type="text" name="buscar" id="buscar" class="objetoformulario">
    </form>
  </div>
</div>
</header>
 

el codigo css

Código CSS:

#cabecera_menu{
    position:relative;
    float:left; 
    left:230px;
    height:33px;
    top:34px;   
}
 
#iconos{
    float:left;
}
 
#menu_navegacion{
    float:left;
}
 
#menu_navegacion{
    float:left;
}
 
#menu_links{
    height:22px;
    float:left;
    margin:0 0 0 30px;
}
 
#menu_links ul{
    margin:0;
    padding:0;
    list-style:none;
}
 
#menu_links li{
    padding:4px 8px 0 8px;
    border-right:1px solid #5e5e5e;
    display:inline; 
}
 
#menu_links li a{
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px;
    color:#5e5e5e;
    text-decoration:none;
}
 
#menu_links li a:hover{
    color:#5e5e5e;
    text-decoration:underline;
}
 
#buscador{
    float:left;
    margin:0 0 0 36px;
    position:relative;
    top:-2px;
}
 

saludos.