Centrar en BODY (sólo visible)

pzin · #1 (**permalink**) 24/04/2011, 13:04

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<html>
 
    <body>
 
        <section>
 
            <article>
                <div></div>
            </article>
 
            <article>
                <div></div>
            </article>
 
            <article>
                <div></div>
            </article>
            
        </section>
        
    </body>
    
</html>

Código CSS:

Ver originalhtml,body,section,article {
    height: 100%;
    width: 100%;
}
 
article {
    float: left;
}
 
article div {
    margin: 0 auto;
    width: 960px;
}

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.

ZoroRoronoa · #2 (**permalink**) 24/04/2011, 20:01

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;

pzin · #3 (**permalink**) 25/04/2011, 05:05

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.

pzin · #4 (**permalink**) 25/04/2011, 09:08

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.

kseso? · #5 (**permalink**) 25/04/2011, 12:00

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.

pzin · #6 (**permalink**) 25/04/2011, 14:56

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.