Foros del Web » Creando para Internet » CSS »

Centrar en BODY (sólo visible)

Estas en el tema de Centrar en BODY (sólo visible) en el foro de CSS en Foros del Web. Buenas, estoy intentando crear una especie de página con scroll vertical. Tengo un pequeño problema en el planteamiento principal. Mi idea era crear algo así: ...
  #1 (permalink)  
Antiguo 24/04/2011, 14:04
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Centrar en BODY (sólo visible)

Buenas,

estoy intentando crear una especie de página con scroll vertical. Tengo un pequeño problema en el planteamiento principal.

Mi idea era crear algo así:
Código HTML:
Ver original
  1.  
  2.     <body>
  3.  
  4.         <section>
  5.  
  6.             <article>
  7.                 <div></div>
  8.             </article>
  9.  
  10.             <article>
  11.                 <div></div>
  12.             </article>
  13.  
  14.             <article>
  15.                 <div></div>
  16.             </article>
  17.            
  18.         </section>
  19.        
  20.     </body>
  21.    
  22. </html>


Código CSS:
Ver original
  1. html,body,section,article {
  2.     height: 100%;
  3.     width: 100%;
  4. }
  5.  
  6. article {
  7.     float: left;
  8. }
  9.  
  10. article div {
  11.     margin: 0 auto;
  12.     width: 960px;
  13. }

Por supuesto, no funciona.
He probado otras cosas, body a 300% e historias así muy extrañas, pero antes de volverme loco, creo que es mejor preguntar si hubiese alguna forma de hacer esto de manera limpia.

Pienso que el planteamiento está bien. Recuerdo que antes si ponías una altura de 100% a body, este realmente sólo se refería a la parte visible del sitio, cosa que me pareció extraña por aquel entonces pero obvié porque no me parecía ni útil ni inútil.

En fin, gracias por leer y muchas más por contestar.
  #2 (permalink)  
Antiguo 24/04/2011, 21:01
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 6 años, 8 meses
Puntos: 116
Respuesta: Centrar en BODY (sólo visible)

si estas poniendo el documento a 100% y 100% en ancho y altura.
Lo ideal para el article div, es ponerle un ancho en porcentaje y darle el margin 0 auto;

que quede asi:

article div {
margin: 0 auto;
width: 80%; // en lugar de 960px
}

y no lo flotes a la izquierda. quita el float:left;
__________________
Programador jQuery & PHP
  #3 (permalink)  
Antiguo 25/04/2011, 06:05
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Respuesta: Centrar en BODY (sólo visible)

Uy, confundí el poner vertical, quise decir HORIZONTAL.

Sea como sea, no funciona.

http://jsbin.com/iyule/2

Sigo y sigo y no hay manera. Aunque ando ya más cerca.

Última edición por pzin; 25/04/2011 a las 09:53
  #4 (permalink)  
Antiguo 25/04/2011, 10:08
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Respuesta: Centrar en BODY (sólo visible)

http://jsbin.com/iyule/5

Bueno, el fallo cada vez es menor. Tengo algún error en BODY. Pensaba que era porque HTML tiene 300% de ancho, entonces BODY debiera de tener 100% (porque 300% de 300% es mucho porciento ), pero también falla.
  #5 (permalink)  
Antiguo 25/04/2011, 13:00
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrar en BODY (sólo visible)

No recuerdo cuándo, pero ya hace bastante, hablamos de y enlazamos varias realizaciones de páginas en horizontal.

Lo que sí que recuerdo es que casi todas manejaban algún script, tanto para calcular la anchura de la caja principal o del body y para facilitar la navegación horizontal con la rueda del ratón.

A ver si con un poco de suerte encuentro/tra los enlaces.
  #6 (permalink)  
Antiguo 25/04/2011, 15:56
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Respuesta: Centrar en BODY (sólo visible)

Gracias kseso?.
Mientras voy mirando yo a ver si encuentro algo también.

Aunque, es una pena tener que meter un script, con lo cerca que estaba.

Etiquetas: body, visible
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 20:37.