Posicion fixed solo horizontal

Kian · #1 (**permalink**) 08/09/2009, 14:59

Hola, estoy realizando una web horizontal, y necesito que la cabecera quede con una posicion fija horizontal solamente, osea que al mover el scroll para los costados, la cabecera quede siempre en el mismo lugar visible, pero si muevo el scroll hacia arriba y hacia abajo, la cabecera se desplace normalmente con el resto de la pagina.

El problema de utilizar position:fixed, es que al visualizar la web en resoluciones como 800x600, el cabecera me queda por encima del resto del contenido.

Es posible realizarlo? ya que no logro encotrar una solucion :(

Gracias!

kseso? · #2 (**permalink**) 08/09/2009, 16:05

Hola kian:
La idea de una página horizontal casi que pide obligatóriamente que no haya scroll en la vertical.

Mira a ver si esta base te ayuda en algo.
Página en horizontal con un título siempre visible en el mismo sitio (compatible con ie6)

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding:0; outline: none; border: 0;}
html, body {
        background: #000;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
#titulo {
        text-align:center;
        background: #005F5F;
        width:100%;
        margin:0px;
        padding:5px 12px 5px 0;
        color:#fff;
        position: absolute;
        top: 0;
        left: 0;
        font-size: 1.3em;
        z-index:10;
        }
#contenedor {
    color: #fff;
    position: relative;
    overflow: auto;
    height: 100%;
}
#contenido {width: 4000px;}
.noticia {
float: left;
width: 198px;
height: 398px;
border: 1px solid #cdcdcd;
margin: 40px 0 0 20px;
background: #FF6600;
}
</style>
</head>
<body>
<div id="titulo">TÍTULO SIEMPRE VISIBLE</div>
<div id="contenedor">
<div id="contenido">
<div class="noticia"></div>
<div class="noticia"></div>
<div class="noticia"></div>
<div class="noticia"></div>
<div class="noticia"></div>
<div class="noticia"></div>
<div class="noticia"></div>
<div class="noticia"></div>
<div class="noticia"></div>
<div class="noticia"></div>
<div class="noticia"></div>
<div class="noticia"></div>
<div class="noticia"></div>
<div class="noticia"></div>
<div class="noticia"></div>
<div class="noticia"></div>
<div class="noticia"></div>
<div class="noticia"></div>
</div>
</div>
</body>
</html>

Un saludo

Kian · #3 (**permalink**) 09/09/2009, 09:59

Gracias!

Si, lo se... el tema es que el diseño de la pagina me obliga a tener que usar bastante espacio, y me resulta imposible no tener scroll vertical.. por eso estaba buscando alguna forma de hacer la cabecera fija solamente horizontal.

Con javascript, con algo, lo que sea, alguno sabe si se puede?

Saludos.