Ver Mensaje Individual
  #1 (permalink)  
Antiguo 19/01/2010, 04:02
tecla2
 
Fecha de Ingreso: julio-2007
Mensajes: 48
Antigüedad: 16 años, 8 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?