Foros del Web » Creando para Internet » CSS »

columnas equilibradas

Estas en el tema de columnas equilibradas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/01/2010, 04:02
 
Fecha de Ingreso: julio-2007
Mensajes: 48
Antigüedad: 10 años, 4 meses
Puntos: 0
columnas equilibradas

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?
  #2 (permalink)  
Antiguo 19/01/2010, 05:52
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: columnas equilibradas

Aquizás este enlace te sirva http://araudi.net/ejemplos/3columnas.html
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 19/01/2010, 05:58
 
Fecha de Ingreso: julio-2007
Mensajes: 48
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: columnas equilibradas

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...
  #4 (permalink)  
Antiguo 19/01/2010, 11:58
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: columnas equilibradas

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!
  #5 (permalink)  
Antiguo 19/01/2010, 12:06
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: columnas equilibradas

cristian_cena display:table en IE :S
  #6 (permalink)  
Antiguo 19/01/2010, 15:57
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: columnas equilibradas

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

Etiquetas: columnas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:18.