Cosas web, algunas úles, algunas buenas.
Fushioko, tiendas de productos de Asia

martes, febrero 21, 2006

Centrado de capas

Una forma de presentar páginas que me gusta bastante, es crear una capa de un tamaño fijo y colocarla en medio de la pantalla y allí mostrar la información. Debo reconocer que lo copié descaradamente (él sabe quién es) y desde entonces lo uso alguna que otra vez. Para realizarlo se usa un div centrado horizontal y verticalmente, hay varias formas de hacerlo, la menos moderna y la que a veces uso por pereza (pero nunca en algo serio) es usar tablas con width 100% y height 100% y centrando el contenido de la única celda que tiene la tabla, vertical y horizontalmente.
La forma limpia es usando estilos, y para ser sinceros, la más rápida (entonces, ¿por qué me da por usar aún lo de las tablas?, supongo que por malas costumbres). Para ello tenemos que tener en cuenta que el ancho y el alto de la capa debe ser fijo. Lo primero que hacemos es colocar la esquina superior izquierda en el centro de la pantalla (top: 50%; left: 50%) y luego mover la capa la mitad del ancho de la capa en pixels hacia la izquierda y la mitad del alto de la capa en pixels hacia arriba (margin-left: -xpx; margin-top: -ypx). Y ya está, con esto tenemos la capa centrada perfectamente y seguirá igual cuando se modifique el tamaño de la ventana.

    div.contenedor {         width: 700px;         height: 500px;         position:absolute;         left:50%;         top:50%;         margin-left:-350px;         margin-top:-250px;     }

2 Comentarios:

  • si opimes ctrl y das cick en algún enlace, firefox abre automáticamente una pestaña nueva con ese enlace.
    Saludos.

    Por Blogger nagual, a las 2/22/2006 05:22:00 p. m.  

  • Si, y si lo pulsas con el botón central también hace lo mismo, pero no es exáctamente lo que me gustaría, yo por ejemplo quiero una página de la wikipedia y abrir una pestaña con la misma página.

    Por Anonymous Anónimo, a las 2/22/2006 08:54:00 p. m.  

Publicar un comentario

<< Inicio