Por ejemplo, stackoverflow tiene una barra superior para los miembros nuevos. La barra superior está fija y empuja hacia abajo la página sin solapar la parte superior de la página.¿Cuál es la mejor manera de hacer una barra superior fija que no se superpone a la parte superior?
¿Cómo se logra esto?
Javascript? ¿O se puede hacer esto con solo CSS?
Si la barra es position: fixed, una forma de evitar que se superponga el contenido es establecer una altura estática y luego establecer un margen superior en el contenedor principal con la misma altura.
Si no conoce la altura del div fijo de antemano, debería usar JS para descubrir su altura y establecer el margen del contenedor en consecuencia.
Debería poder hacerlo solo con CSS.
Aquí hay un excelente artículo sobre cómo crear el "santo grial" del diseño de CSS.
Una página con tres columnas. Una barra lateral izquierda de ancho fijo para un menú, una barra lateral derecha para sus anuncios o fotos y un centro escalable que fluye con el contenido.
Ver:
En busca del Santo Grial: CSS
Se podría hacer algo como esto para crear una cabecera fija:
<style>
body { margin: 0; }
div.header { position: fixed; height: 50px; width: 100%; }
div.content { padding-top: 50px; }
</style>
<body>
<div class="header">header</div>
<div class="content">content</div>
</body>
comprobar Tal vez el IE5.5/ie6.0 corregir aquí: http://www.howtocreate.co.uk/fixedPosition.html
cómo hacer un pie de página fijo en su lugar? – jondinham
Adaptando el código de Michiel a la pregunta del OP en la respuesta de ben_h.
<style type="text/css">
body { margin: 0; }
div.header { position: fixed; height: 50px; width: 100%; }
div.content{ /* normal stuff here */ }
/*** Only selects div.content immediately preceded by div.header.
If div.header doesn't appear, it won't select. ***/
div.header + div.content { padding-top: 50px; }
</style>
<body>
<div class="header">header</div>
<div class="content">content</div>
</body>
Yo te advertiremos que el viejo IE6 no va a ser demasiado aficionado a eso, sino que IE7.js de Dean Edwards añadirá soporte para el selector de hermanos (+).
Así que no hay forma de hacerlo con CSS ¿no? Sé la altura de la barra, pero no sé si aparece o no, ¿no hay forma de verificar con css? Acabo de disparar desde la cadera, pero tal vez los usos creativos de los selectores de CSS? ¿Nadie? –