Mostrando entradas con la etiqueta CSS. Mostrar todas las entradas

viernes, 7 de julio de 2017

Centrar div verticalmente

http://vanseodesign.com/css/vertical-centering/

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

jueves, 23 de febrero de 2012

Columnas o div’s que crecen iguales con CSS

Cuando estamos diseñando una página es muy común que deseemos la barra de menú a la izquierda o derecha y el contenido a un lado y que lo queramos hacer SIN tablas. En ocasiones no nos importa si los div’s, pero en otras, por cuestiones de estética deseamos que ambas estén del mismo tamaño y si a esto le agregamos que muchas páginas son de contenido dinámico y no tenemos idea de que tan grande va a crecer el Height de los div’s (y aunque no sean páginas de contenido dinámico puede resultar tedioso poner un Height en cada situación del sitio web) puede resultar un poco frustrante. Sin embargo la solución no es tan complicada como pensamos.

¿Por qué las tablas no son una solución? Bueno pues por que como comenta Pedro CM en su blog: “Es más fácil renderizar un contenido con div's que con tablas. Los div's son más rápidos, semánticos y accesibles.”.

Caso

Supongamos que tenemos un div Container y dentro de este 2 div’s, uno con la clase Side para el menú y otro con la clase Content para el contenido de la pagina. Además queremos que Side esté a la derecha de Content y que ambos crezcan del mismo tamaño.

Solución 1

Mas fácil de lo que podemos pensar es simplemente asignar table-cell a la propiedad display de las clases Side y Content y eso es todo, obtendríamos un resultado como la imagen 01.

Opcionalmente podemos asignar el valor table a la propiedad display de la clase Container para obtener un resultado como la imagen 02.

imagen 01

imagen 01

Código

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
.Container
{
background-color:Red;
display:table;
}

.Side
{
background-color:blue;
display:table-cell;
}

.Content
{
background-color:Green;
display:table-cell;
}
</style>
</head>
<body>

<div class="Container">
<div class="Side">texto <br />texto <br />texto <br />texto <br /></div>
<div class="Content">texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br /></div>
</div>

</body>
</html>

Solución 2

Desafortunadamente la solución uno no funciona con Internet Explorer 6, lastima era algo muy fácil. Aunque la verdad yo ya casi no diseño para ie6 (salvo algunas solicitudes especiales) pues el número de usuarios de ie6 ya no es el mismo que hace 3 años. Personalmente prefiero usar la solución uno, pero es cuestión de cada quien cual usar. El ejemplo de la solución 2 lo vi en: http://www.cssblog.es/columnas-equilibradas-en-css/

codigo

<!DOCTYPE html PUBLIC "-//W3C//DTD = XHTML 1.0=20 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Columnas equilibradas</title>
<style type="text/css">
body
{
background-color:Yellow;
}

#caja_izq
{
width: 850px;
margin: 20px auto;
color: #fff;
background-color: #4c9ab1;
overflow: auto;
}

#caja_der
{
width: 500px;
float: right;
background-color: #82b04d;
border-left: solid 30px #fff;
}

.columna_izquierda
{
width: 280px;
float: left;
padding: = 20px;
position: relative;
margin-left: -350px;
}

.columna_derecha
{
width: 450px;
float: left;
padding: = 20px;
}
</style>
</head>
<body>

<div id="caja_izq">
<div id="caja_der">
<div class="columna_izquierda">texto <br />texto <br />texto <br />texto <br /></div>
<div class="columna_derecha">texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br /></div>
</div>
</div>

</body>
</html>

martes, 18 de enero de 2011

Centrar un div horizontalmente

En el post anterior les mostraba como alinear un div verticalmente hacia abajo. Ok pero ¿para centrarlo horizontalmente? Bueno también es sencillo. Debemos de fijar las siguientes propiedades CSS: Al div contenedor del div que deseamos centrar la propiedad TEXT-ALIGN la ponemos en CENTER, al div que deseamos centrar fijamos la propiedad MARGIN al valor 0 AUTO. Con esto queda nuestro div centrado, pero su contenido también (y lo más probable es que no deseemos esto), si este es tu caso al div centrado también debes de agregarle la propiedad TEXT-ALIGN a LEFT o RIGHT (como desees).

Pues eso es todo. Aquí también te dejo un ejemplo para que lo pruebes por ti mismo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

.content

{

width:600px;

height:600px;

background-color:#FFC;

/*---*/

text-align:center;

}

.info

{

width:300px;

height:300px;

background-color:#CCF;

/*---*/

margin:0 auto;

text-align:left;

}

</style>

</head>

<body>

<div class="info">texto centrado</div>

</div>

</body>

</html>

Alinear un DIV hacia abajo

Si deseas que un div este alineado verticalmente hacia abajo solo necesitas 3 estilos con CSS y todo queda muy bien. Primero debes de fijar la propiedad POSITION del contenedor a RELATIVE, luego al div que deseas alinear hacia abajo las propiedades BOTTOM a 0px y POSITION a ABSOLUTE. Eso es todo, sencillo ¿no?

Aquí les dejo un ejemplo de como seria implementado:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

.content

{

position:relative;

height:500px;

}

.copyright

{

bottom: 0px;

position: absolute;

}