Los elementos de encabezado fijos se mueven en la ventana reducida

tengo un menú fijo en la parte superior de mi pantalla, que funciona muy bien, pero cuando pude hacer que la ventana del navegador fuera más pequeña, en lugar de que todos los elementos del menú permanecieran donde estaban, todos se desplegaron debajo del menú para permanecer en el ventana abierta. Mi idea es que quiero que las posiciones no queden fijas cuando la ventana se hace más pequeña, para que permanezcan en su posición y puedan desplazarse para ver el resto del contenido. es posible?

Aquí está el código para el html del encabezado del menú:

<div id="head_wrapper">
        <div id="head_company"></div><!---end head_company--->
        <div id="head_name"></div><!---end head_name---->

        <div id="head_search"></div><!---end head_search--->
        <div id="head_home" onclick="location.href='overview.php';"></div><!---end head_home--->
        <div id="head_settings" onclick="location.href='settings.php';"></div><!---end head_settings--->
        <div id="head_more"></div><!---end head_more--->


    </div><!---end head_wrapper--->

Y aquí está el css para ello:

#wrapper #head_wrapper {
    background-image: url(../images/general/head_bar.png);
    background-repeat: repeat-x;
    float: left;
    height: 44px;
    min-width: 100%;
    width: auto !important;
    width: 100%;
    position: fixed;
    z-index: 10;
    margin-left: 208px;
}
#wrapper #head_wrapper #head_company {
    background-image: url(../images/general/navs/arion_co_button.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 84px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_company:hover {
    background-image: url(../images/general/hover/company_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 84px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_name {
    background-image: url(../images/general/navs/arion_logo.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 144px;
}
#wrapper #head_wrapper #head_more {
    background-image: url(../images/general/navs/head_more.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 40px;
    cursor: pointer;

}
#wrapper #head_wrapper #head_more:hover {
    background-image: url(../images/general/hover/head_more_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 40px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_settings {
    background-image: url(../images/general/navs/head_settings.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 73px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_settings:hover {
    background-image: url(../images/general/hover/head_settings_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 73px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_home {
    background-image: url(../images/general/navs/head_home.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 72px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_home:hover {
    background-image: url(../images/general/hover/head_home_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 72px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_search {
    background-image: url(../images/general/navs/search_bar.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 327px;
    margin-right:15px;
    background-position-y: 5px;
    margin-left:31%;
}

Gracias por cualquier y toda la ayuda

preguntado el 28 de julio de 12 a las 10:07

¿Puedes crear un jsFiddle a partir de él? -

1 Respuestas

Cambie el #wrapper y #head_wrapper estilos para:

width: 100%
min-width: 960px; /* set here a fixed value >= menu width */

demo: http://jsfiddle.net/uPe2L/9/ (he eliminado márgenes y fondos y agregado bordes para mayor claridad)

Por cierto, tu código es incorrecto y desordenado. Deberías usar un ul li estructura.

Respondido 28 Jul 12, 12:07

Hola, gracias por su ayuda, probé sus sugerencias y definitivamente ha ayudado, ahora cuando hago las ventanas más pequeñas, nada lucha por permanecer en la ventana como antes, excepto por el último elemento, el div 'head_more', que por alguna razón se mueve debajo del menú principal, pero eso es solo cuando la ventana es muy pequeña, demasiado pequeña para usarla, así que no me preocuparé por eso. Por cierto, generalmente uso una estructura 'ul' 'li', lo he hecho para todos los demás elementos de estilo de lista, sin embargo, no sé por qué no lo hice esta vez, lo cambiaré ahora, gracias de nuevo . - al-hennessey

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.