CSS: delgada pancarta en la parte superior de la página (como la naranja en esta página)

Tengo que poner una pancarta delgada en la parte superior de la página como la notificación naranja en esta página. Sin embargo, necesito que esté absolutamente bien posicionado, porque cuando haces clic en él, tiene que desplegarse (sobre la página actual, sin presionar la página actual hacia abajo). El banner debe extenderse todo el ancho de la ventana, pero el contenido debe estar dentro de 800px en el medio. Ya lo tengo hecho, pero estoy teniendo problemas con el posicionamiento CSS de él.CSS: delgada pancarta en la parte superior de la página (como la naranja en esta página)

Gracias!

Fuente

2009-10-15 JD Isaacks

A continuación se muestra un ejemplo. El elemento principal #banner extiende la pantalla completa y se fija en la parte superior de la ventana gráfica usando position: absolute; top: 0; left: 0. El width: 100% lo hace estirar todo el ancho.

El #banner-content es donde coloca su contenido. Esto se centra y se fija en 800px de ancho. He puesto un borde alrededor para que puedas ver.

Nota: También he "restablecido" los márgenes y el relleno de todos los elementos para borrar el relleno predeterminado. Es posible que desee utilizar algo como Reset CSS de Eric Meyer en su aplicación final.

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>Test</title> 
    <style type="text/css" media="screen"> 
    * { 
     margin: 0; 
     padding: 0; 
    } 

    div#banner { 
     position: absolute; 
     top: 0; 
     left: 0; 
     background-color: #DDEEEE; 
     width: 100%; 
    } 
    div#banner-content { 
     width: 800px; 
     margin: 0 auto; 
     padding: 10px; 
     border: 1px solid #000; 
    } 
    div#main-content { 
     padding-top: 70px; 
    } 
    </style> 
</head> 

<body> 
    <div id="banner"> 
    <div id="banner-content"> 
    This is your banner text, centered and fixed at 800px in width 
    </div> 
    </div> 
    <div id="main-content"> 
    <p>Main page content goes here</p> 
    </div> 
</body> 
</html>

Fuente

2009-10-15 14:40:50 Olly

Creé un violín para esto mientras investigaba un problema similar: http://jsfiddle.net/marvo/FJZfW/ – Marvo

#banner { 
    position: absolute; 
    top: 0px; 
    left: 0px; 

    margin: 0 auto; 
    text-align: center; 
} 

#banner_contents { 
    width: 800px; 
}

Debería ser tan simple como hacer dos divisiones ... la principal envuelve el contenido y lo centra.

Fuente

2009-10-15 14:34:08 espais

Esto no hará lo que requiere el OP. Centrará el texto, pero no el div interno. El margen exterior: 0 auto también es redundante. – alex

CSS: delgada pancarta en la parte superior de la página (como la naranja en esta página)

Respuesta

Cuestiones relacionadas