Foros del Web - Ver Mensaje Individual

cristian_cena · #4 (**permalink**) 19/01/2010, 11:58

Copia y pega este codigo en tu editor, luego guárdalo como html y visualizalo en tu navegador.
El mismo te explicará como trabajar con display:table; lo que me ha resultado el mejor de los métodos para crear diseño a dos columnas equilibradas, aunque aclaro, no es el único (el ejemplo de mikmoro funciona bien):

Código HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo del uso de la propiedad display</title>
<style type="text/css">
h1{
text-shadow:#999 -2px 2px 2px; 
}
/*---------------------------------------------
       CREAMOS EL EFECTO "TABLA" CON CSS
-----------------------------------------------*/
#contenedor {
display:table; /*creamos la tabla <table> */
}
#contenidos {
display:table-row; /*creamos la fila <tr> */
}
#secundario, #principal, #lateral { 
display:table-cell; /*creamos las celdas <td> */
}
/*------------------------------------------------------
DAMOS COLOR AL FONDO Y AL TEXTO Y PADDING A LA CAJA CSS
--------------------------------------------------------*/
#secundario {
background-color:#990000; 
color:#FFFFFF;
}
#principal {
background-color:#CCCCCC;
color:#990000;}
#lateral {
background-color:#000033;
color:#FFFFFF;
}
#secundario, #principal, #lateral { 
padding:16px;
}
/*---------------------------------------------------------------------
DAMOS COLOR AL FONDO Y AL TEXTO Y PADDING A LAS CELDAS DE LA TABLA HTML
-----------------------------------------------------------------------*/
#secundarioTabla {
background-color:#990000; 
color:#FFFFFF;
}
#principalTabla {
background-color:#CCCCCC;
color:#990000;
}
#lateralTabla {
background-color:#000033;
color:#FFFFFF;
}
#secundarioTabla, #principalTabla, #lateralTabla {
padding:16px;
}
</style>
</head>

<body>

<h1>Divs con la propiedad css 2.1 display</h1>
  
<div id="contenedor">
    <div id="contenidos">
        <div id="secundario">
        <p>
        "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
        </p>
        </div>
        <div id="principal">
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nunc sem, iaculis a vulputate id, gravida eu mauris. Aliquam erat volutpat. Maecenas rhoncus nunc ipsum, ac venenatis purus. Sed commodo, dui ut vulputate vehicula, lacus lacus congue risus, quis ultricies urna eros quis quam. Pellentesque aliquet posuere arcu vel tincidunt. Integer auctor gravida euismod. Sed enim est, euismod nec tincidunt eu, cursus egestas lectus. Phasellus convallis dapibus purus non imperdiet. Aenean vitae mauris sem, ut scelerisque elit. Donec eleifend viverra turpis, et sodales ligula condimentum eget. 
        </p>
        </div>
        <div id="lateral">
        <p>
        Nam tellus tellus, feugiat ultricies accumsan non, porta sit amet nisi. Maecenas turpis turpis, laoreet ut gravida in, lacinia a ligula. Quisque iaculis, ipsum at congue mattis, sem nisi porttitor odio, accumsan sagittis odio mauris eget turpis. Duis a nisi eros. Nunc vel sem risus. Suspendisse ultricies pretium fringilla. Nunc sit amet elit turpis. Suspendisse laoreet accumsan pretium. Quisque pharetra arcu eu nisl ullamcorper non pulvinar diam faucibus. In a neque eros, at tristique nunc. 
        </p>
        </div>
    </div>
</div>

<h3>Esta maqueta presenta una buena alternativa para el diseño de columnas equilibradas o de igual alto.</h3>
<ul>
<li>Paso 1: creamos la maqueta html dentro de ‹body› (los divs anidados con sus respectivos “id”)</li>
<li>Paso 2: damos el estilo a los divs en ‹head› o bien en una hoja de estilos externa (como se aconseja) que luego llamamos con la etiqueta ‹link› *</li>
</ul>


<h1>Tabla</h1>

<table>
  <tr>
    <td id="secundarioTabla">
        "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
    </td>
    <td id="principalTabla">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nunc sem, iaculis a vulputate id, gravida eu mauris. Aliquam erat volutpat. Maecenas rhoncus nunc ipsum, ac venenatis purus. Sed commodo, dui ut vulputate vehicula, lacus lacus congue risus, quis ultricies urna eros quis quam. Pellentesque aliquet posuere arcu vel tincidunt. Integer auctor gravida euismod. Sed enim est, euismod nec tincidunt eu, cursus egestas lectus. Phasellus convallis dapibus purus non imperdiet. Aenean vitae mauris sem, ut scelerisque elit. Donec eleifend viverra turpis, et sodales ligula condimentum eget. 
    </td>
    <td id="lateralTabla">
        Nam tellus tellus, feugiat ultricies accumsan non, porta sit amet nisi. Maecenas turpis turpis, laoreet ut gravida in, lacinia a ligula. Quisque iaculis, ipsum at congue mattis, sem nisi porttitor odio, accumsan sagittis odio mauris eget turpis. Duis a nisi eros. Nunc vel sem risus. Suspendisse ultricies pretium fringilla. Nunc sit amet elit turpis. Suspendisse laoreet accumsan pretium. Quisque pharetra arcu eu nisl ullamcorper non pulvinar diam faucibus. In a neque eros, at tristique nunc. 
    </td>
  </tr>
</table>
</body>
</html>

Espero te sea útil. Saludos!