menu css que se adapte a cualquier resolucion

[esaenz22]

hola. hice un menu superior css. dentro del menu he creado un div cabecera_menu. esto es lo que hice.

Código CSS:

#cabecera_menu{
    position:relative;
    left:230px;
    height:33px;
    float:left;
}
 

al probarlo en una resolucion menor de 1024 x 968, el menu se desplazo hacia abajo y no se mantuvo en la posicion donde estaba.

mi pregunta es que tipo de posicion se coloca para que se adapte en cualquier resolucion de pantalla ?. me comentaron que no se debe utilizar pixeles (px), sino porcentajes (%). no se si estoy en lo correcto.

saludos.

[joseoliveras]

Puedes poner el html?

[IEKK]

Evidentemente el diseño líquido; uso de %, es mejor que el diseño fijo; px.
Si haces la página así mejor que mejor. Útil para webs desde móviles y otros dispositivos.

Pero tenerlo en px no te debería descolocar el menú al cambiar la resolución.
La diferencia sería la aparición de scrollbars.

¿Podrías poner la estructura de los otros elementos que contienen el menú así como el html? Lo básico para ver que ocurre.
Es posible que se deba a un div con un ancho auto u otra propiedad que reajuste el div.

[esaenz22]

aqui dejo el codigo html y css.

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

Código CSS:

#cabecera_menu{
    position:relative;
    left:230px;
    height:33px;
    float:left;
}
 
#buscador{
    float:left;
    margin:30px 0 0 36px;   
}
 
#iconos{
    position:relative;
    float:left;
    width:90px;
}
 
#menu_navegacion{
    position:relative;
    float:left;
    top:34px;
    height:22px;
}
 
#menu_links{
    height:22px;
    float:left;
    margin:34px 0 0 0;
}
 
#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;
}
 

saludos.

[joseoliveras]

Hola.
En principio falta un <header> al principio del HTML.

Debes tener en cuenta que si das un margen de 230px por la izquierda esta hace que se mantenga ese margen siempre, obviamente el menú se colapsa al no caber en la pantalla, debes decidir si el menú y toda la página va centrada o alineada a la izquierda.

En cualquier caso, no se muy bien si lo que pretendes es que todo el menú se encoja al hacer la ventana más pequeña o que la distancia entre los ítems de menú se acorte.

PD: No entiendo los position:relative;

[esaenz22]

gracias por responderme joseoliveras. por equivocacion, he copiado mal el codigo. aqui dejo el codigo correcto.

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>
 

Código TEXT:

Debes tener en cuenta que si das un margen de 230px por la izquierda esta hace que se mantenga ese margen siempre, obviamente el menú se colapsa al no caber en la pantalla, debes decidir si el menú y toda la página va centrada o alineada a la izquierda.
 

el menu superior debe ir alineado a la izquierda. lo que en verdad pretendo es que el menu superior tanto los items y el formulario buscador se mantenga en la misma posicion. puse la propiedad relative para que se mantenga el div cabecera_menu, no importando la resolucion de pantalla.

no se si estoy en lo correcto colocar la propiedad posicion:relative. aqui dejo nuevamente el codigo css del menu superior.

Código CSS:

#cabecera_menu{
 position:relative;
 left:230px;
 height:33px;
 float:left;
}
 
#buscador{
 float:left;
 margin:30px 0 0 36px; 
}
 
#iconos{
 position:relative;
 float:left;
 width:90px;
}
 
#menu_navegacion{
 position:relative;
 float:left;
 top:34px;
 height:22px;
}
 
#menu_links{
 height:22px;
 float:left;
 margin:34px 0 0 0;
}
 
#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;
}
 

saludos.

[joseoliveras]

Sigo sin saber si quieres que el menú se haga más pequeño al reducir la pantalla (se solventa con media query) o pretendes que permanezca "en linea" forzando la barra de scroll.

[esaenz22]

que el menu superior permanezca en linea.

saludos.

[joseoliveras]

Si quieres que el menú se mantenga debes darle un ancho al contenedor del menú, de manera que cuando la ventana se haga más pequeña aparezcan las barras de scroll del navegador.