¿Cómo puedo hacer que el ancho de una barra de navegación flotante actúe de manera fluida con el resto del sitio web?

Estoy construyendo un sitio web basado en el Cuadrícula 1140 CSS, que es una cuadrícula completamente fluida configurada con un ancho máximo de 1140 px. He colocado lo que se convertirá en una barra de navegación sobre esta capa que se extiende cinco píxeles más en cada lado (para el efecto de diseño de 'cinta' favorito de todos) y me gustaría que los 1140px del medio (de la navegación ahora de 1150px) se ajusten al ancho a lo largo con la cuadrícula debajo. Sin embargo, todo lo que he intentado hasta ahora no ha funcionado. ¿Alguien tiene alguna idea?

HTML:

<div class="float">
<div class="nav">
    <div class="navleft">
    <img src="images/banneredgel.png"/>
    </div>
    <div class="navbar">
    </div>
    <div class="navright">
    <img src="images/banneredger.png"/>
    </div>
</div>
</div>

CSS:

.float {
width: 100%;
display: inline block;
overflow: hidden;
position: fixed;
}

.nav {
width: 100%;
height: 43px;
max-width: 1150px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}

.navleft {
float: left;
width: 5px;
height: 43px;
}

.navbar {
float: left;
width: 100%;
max-width: 1140px;
height: 38px;
background-color: #6fd0f6;
}

.navright {
float: left;
width: 5px;
height: 43px;
}

preguntado el 22 de mayo de 12 a las 20:05

2 Respuestas

Creé un violín JS con tu respuesta. http://jsfiddle.net/thinkingsites/Vz4TC/3/

Su problema es que el ancho 100% no permite los dos bits en el costado, por lo que cuando su página se reduce, envuelve a los elementos secundarios de .nav

Lo que hice fue colocarlos absolutamente en .nav y le di a .navbar un margen izquierdo y derecho para permitir las cintas SIN configurarlo en ancho: 100%, ya que eso alejaría las cintas. También configuré el ancho máximo de .nav en 800 y la navegación nunca se expande más allá de eso.

contestado el 22 de mayo de 12 a las 20:05

Implementé su código pero aún tenía problemas ya que la barra de navegación se extendía continuamente hacia la derecha y no permanecía contenida en el 100 % ni escalaba correctamente con el resto del sitio web, sino a un ritmo diferente. Sin embargo, jugué un poco más y encontré algo que funciona. Gracias por tu ayuda, sin duda me ayudaste a acercarme. - Taylor

¿Se estaba expandiendo la barra justo en el violín? ¿Pusiste esto en tu sitio de demostración? - Sitios de pensamiento

Pude tomar el código que ofrece Thinking Sites y modificarlo varias líneas más para obtener algo que se cierne sobre el centro mientras que el ancho es menor que el del navegador (cintas en los bordes) y luego se convierte en una barra cuando el el sitio se ajusta con fluidez a un ancho de navegador más pequeño.

HTML:

<div class="float">

        <div class="navleft">
        <img src="images/banneredgel.png">
        </div>

        <div class="navbar">
        <img src="images/logo.png" class="logo"/>
        </div>

        <div class="navright">
        <img src="images/banneredger.png">
        </div>
</div>

CSS:

.float {
width: 100%;
max-width: 1140px;
height: 38px;
position: fixed;
}

.navbar {
background-color: #6fd0f6;
height: 38px;
padding-left: 5px;
padding-right: 5px;
}

.navright,.navleft { 
width: 5px; 
height: 43px;
position: absolute;
top: 0px;
}

.navleft{
left: -5px;
}

.navright{
right: -5px;
}

contestado el 24 de mayo de 12 a las 04:05

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