columnas equilibradas

tecla2 · #1 (**permalink**) 19/01/2010, 04:02

hola,
tengo una web con 3 columnas equilibradas.
en una de ellas, pongo unos enlaces a varias partes de texto.
dependiendo a cual se le dé, se ve una cosa u otra (con la propiedad visibility)
para que me quede bien, uso position:absolute y top:120px
el problema está en que la columna no se me estira hasta el final, se me corta.
la solución sería no poner top, xo entoces se me solapa información.
Os pongo el código:

PRINCIPAL.PHP
...
<div id="cont3">
<div id="cont2">
<div id="cont1">
<div id="columizq"> ...texto de la columna izquierda... </div>
<div id="columcen">
<div id="titulo">"titulo"</div>
<?php include("calendario.php"); ?>
</div>
<div id="columder"> ...texto de la columna derecha... </div>
</div>
</div>
</div>
...

CALENDARIO.PHP
<script type="text/javascript" language="javascript">
function muestra($parte){
if ($parte == "calen1") {
$oculta1="calen2"; $oculta2="calen3";
}else if ($parte == "calen2") {
$oculta1="calen1"; $oculta2="calen3";
}else {
$oculta1="calen1"; $oculta2="calen2";
}
document.getElementById($parte).style.visibility=' visible';
document.getElementById($oculta1).style.visibility ='hidden';
document.getElementById($oculta2).style.visibility ='hidden';
}
</script>

<table align="right">
<tr>
<td><a href="#" onClick="javascript:muestra('calen1');">1</a></td>
<td><a href="#" onClick="javascript:muestra('calen2');">2</a></td>
<td><a href="#" onClick="javascript:muestra('calen3');">3</a></td>
</tr>
</table>

<div id="calen1"> ... texto ... </div>
<div id="calen2"> ... texto ... </div>
<div id="calen3"> ... texto ... </div>

ESTILOS.CSS
#cont2 {
float:left;
width:100%;
position:relative;
right:20%;
}

#cont3 {
float:left;
width:100%;
overflow:hidden;
position:relative;
}

#columizq {
float:left;
width:10%;
position:relative;
left:90%;
}

#columcen {
float:left;
width:70%;
position:relative;
left:90%;
}

#columder {
float:left;
width:20%;
position:relative;
left:90%;
}

#calen1 {
visibility:visible;
position:absolute;
left:0;
top:120px;
z-index:3;
}

#calen2 {
visibility:hidden;
position:absolute;
left:0;
top:120px;
z-index:2;
}

#calen3 {
visibility:hidden;
position:absolute;
left:0;
top:120px;
z-index:1;
}

Alguien puede ayudarme?

hades87 · #2 (**permalink**) 19/01/2010, 05:52

Aquizás este enlace te sirva http://araudi.net/ejemplos/3columnas.html

tecla2 · #3 (**permalink**) 19/01/2010, 05:58

ese ejemplo tiene tres columnas pero no están equilibradas (cuando crece una, las otras tb)
eso yo ya lo solucioné pero al añadir la propiedad top, los píxeles que le pongo a top no se ven, no crece la columna...

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!

alexk · #5 (**permalink**) 19/01/2010, 12:06

cristian_cena display:table en IE :S

cristian_cena · #6 (**permalink**) 19/01/2010, 15:57

Gracias por mencionarlo alex, aclarar que display:table; no es reconocido por IE 6 ni IE7.