Posts Tagged ‘div’

DIV height: 100%

Escrito por en 05/05/2010

Bueno pues a raíz de una consulta de una amiga diseñadora… surge esta otra perlita sobre CSS.

Alguna vez maquetando hemos necesitado hacer que un <div> nos ocupe el 100% del alto de una capa, o de toda la web. Y normalmente, si no se sabe este pequeño truco, hemos tenido que hacer cosas raras. Pues bien, la solución es bastante sencilla, y es la siguiente.

Para conseguir que cualquier <div> que tengamos en nuestra web pueda tener el 100% del alto de la capa en la que se anida, solo tenemos que darle el 100% de altura al html y al body. De esta forma:


html, body { height: 100%; }

Al decirle a los tags html y body que su altura será del 100% nos permite que las capas que nosotros queramos opten también a tener esa altura. Es una tontería, pero cuando no se sabe este pequeño truco, puede dar muchos problemas el maquetar alguna cosa.

Hay que tener en cuenta también, que la capa o capas anterior a la que le queremos dar ese height:100%, deben de tener un alto especificado. Es decir, si la capa anterior le damos 200px de alto, el height:100% será de esos 200px de la capa contenedora, o si a la capa anterior le damos también 100% de alto igual que a la capa que se lo queremos dar, nos ocupará toda la pantalla. Solo teniendo en cuenta esto, podremos hacer capas al 100% en cualquier instancia.

Por si no os ha quedado demasiado claro, o queréis ver un ejemplo del funcionamiento, podéis ver esta página de ejemplo que hemos preparado:

DEMO

Esperamos que os sirva esta pequeña perla, como decimos nosotros, para vuestros diseños! ;)

Centrar un DIV horizontal y verticalmente

Escrito por en 03/05/2010

Aquí va la primera perla de 2Novatos.

Cuantas veces hemos necesitado centrar un div para un diseño, o para posicionar un texto dentro de otra capa? El que diga nunca miente, yo, muchísimas.
Y cuantos de vosotros habéis necesitado centrar un div horizontal y verticalmente? Quizá no tantos, pero si alguna vez lo habéis necesitado y no se os ha ocurrido como, os damos la solución.

Para centrar un div de forma horizontal con CSS solo tenemos que crear un div y aplicarle la siguiente clase:

Centrar horizontalmente:

.centrarH{
    width:270px;
    height:150px;
    margin:0 auto;
}

El único secreto de esta clase es el valor margin al cual le damos el valor 0 auto. Con esto lo que le decimos es que el margen superior e inferior sea igual a 0, y que el margen de la izquierda y de la derecha sean automáticos. Con lo que conseguimos que nuestra capa se posicione al centro.

Bien, y como hacemos que además de centrada horizontalmente lo esté verticalmente? Pues ya no es tan sencillo, pero tampoco es nada difícil, solo tenemos que hacer alguna división…

Centrar horizontal y verticalmente:

.centrarHV{
     width:270px;
     height:150px;
     position:absolute;
     left:50%;
     top:50%;
     margin:-75px 0 0 -135px;
}

Bien, en este caso nuestra clase ya tiene algunos atributos más que la anterior. Esta vez lo que le hemos dicho es que con left y top al 50% nos centre la capa hacia el centro de nuestra pantalla. Pero si solo hacemos eso, la capa se centra en la esquina superior izquierda, y lo que queremos es centrarla desde el centro de la capa en cuestión.

Para ello hacemos uso de una simple división. Creamos el atributo margin dándole valores negativos de la mitad del alto de nuestro div y la mitad del ancho de este. Con lo que el div se centra en el punto medio quedando centrado en la pantalla.

Pues con estas dos simples clases ya tenemos dos divs centrados horizontal y verticalmente. A continuación os dejo con una imagen que hemos hecho, para que veáis, el efecto que va teniendo aplicar las CSS.