Foros del Web » Creando para Internet » CSS »

Posicion fixed solo horizontal

Estas en el tema de Posicion fixed solo horizontal en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/09/2009, 15:59
 
Fecha de Ingreso: septiembre-2009
Mensajes: 2
Antigüedad: 8 años, 3 meses
Puntos: 0
Posicion fixed solo horizontal

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!
  #2 (permalink)  
Antiguo 08/09/2009, 17:05
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Posicion fixed solo horizontal

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Kseso? jugando con css</title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin: 0; padding:0; outline: none; border: 0;}
  7. html, body {
  8.         background: #000;
  9.         width: 100%;
  10.         height: 100%;
  11.         overflow: hidden;
  12.     }
  13. #titulo {
  14.         text-align:center;
  15.         background: #005F5F;
  16.         width:100%;
  17.         margin:0px;
  18.         padding:5px 12px 5px 0;
  19.         color:#fff;
  20.         position: absolute;
  21.         top: 0;
  22.         left: 0;
  23.         font-size: 1.3em;
  24.         z-index:10;
  25.         }
  26. #contenedor {
  27.     color: #fff;
  28.     position: relative;
  29.     overflow: auto;
  30.     height: 100%;
  31. }
  32. #contenido {width: 4000px;}
  33. .noticia {
  34. float: left;
  35. width: 198px;
  36. height: 398px;
  37. border: 1px solid #cdcdcd;
  38. margin: 40px 0 0 20px;
  39. background: #FF6600;
  40. }
  41. </head>
  42. <div id="titulo">TÍTULO SIEMPRE VISIBLE</div>
  43. <div id="contenedor">
  44. <div id="contenido">
  45. <div class="noticia"></div>
  46. <div class="noticia"></div>
  47. <div class="noticia"></div>
  48. <div class="noticia"></div>
  49. <div class="noticia"></div>
  50. <div class="noticia"></div>
  51. <div class="noticia"></div>
  52. <div class="noticia"></div>
  53. <div class="noticia"></div>
  54. <div class="noticia"></div>
  55. <div class="noticia"></div>
  56. <div class="noticia"></div>
  57. <div class="noticia"></div>
  58. <div class="noticia"></div>
  59. <div class="noticia"></div>
  60. <div class="noticia"></div>
  61. <div class="noticia"></div>
  62. <div class="noticia"></div>
  63. </div>
  64. </div>
  65. </body>
  66. </html>
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 09/09/2009, 10:59
 
Fecha de Ingreso: septiembre-2009
Mensajes: 2
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Posicion fixed solo horizontal

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:44.