Divs width

CECISOL · #1 (**permalink**) 24/01/2009, 04:22

Hola, si alguien me puede ayudar con esta dificultad presentada...
Tengo un div contenedor y otros divs dentro <div left, <div central, <div rigth, el sistema es el sgte. si hago clic en un menu que se ubica en el div left, la informacion se muestra en el div central....y el div rigth desaparece, pero el <div central se me queda en el mismo lugar con el width indicado, lo que quiero lograr es que tome el lugar del <div right el cual desparacio....
Como hago alli?

Desde ya les agradeceria la ayuda..

.contenedor{
width:994px;
margin:auto auto -38px auto;
height: auto !important;
min-height: 100%;
height: 100%;

}

.left{
width:230px;
background-color:#e1e1e1;
float:left;
}

.central{
width:536px;
float:left;
padding:20px 0px 0px 21px;

}

.right{
width:175px;
padding:6px;
float:left;
margin: 20px 0px 0px 19px;
}

Dalvenjha · #2 (**permalink**) 24/01/2009, 08:15

Pucha debo tener deficit de comprensión de lectura porque no te entendí maldita la cosa...

Veamos lo que tu quieres es que al desaparecer el div derecho, el del centro ocupe todo el espacio no? y que desaparezca el div derecho cuando clicas en el izquierdo. ¿O me equivoco?

Please si es asi avisame ahorita, y si no, pues haste un dibujito en el paint y lo publicas aqui =D.

Besos.

el_apronte · #3 (**permalink**) 24/01/2009, 08:25

Hola, ya probaste que pasa si utilizas porcentaje para el div central?
.central{
width:100%;
float:left;
padding:20px 0px 0px 21px;

}

Dalvenjha · #4 (**permalink**) 24/01/2009, 08:30

Apronte, si usa 100% para central, a menos que los dos laterales esten posicionados absolutamente, lo que hará será provocar un scroll horizontal.

Lo que ella quiere es que es que los 536 pasen a se 711 pixeles. Pero quiero saber como desea hacerlo.

Mikmoro · #5 (**permalink**) 24/01/2009, 08:37

Este problema es bastante sencillo:
flotamos a la derecha la caja derecha con ancho fijo; flotamos a la izquierda la caja izquierda con ancho fijo, y la del centro la dejamos sin flotar y sin ancho.
El resultado es que la caja central ocupa el espacio libre que le dejan las otras dos siempre, por lo que si la derecha desaparece, la central ocupará todo el espacio disponible, es decir, todo el resto del ancho.

Aquí pongo un ejemplo.

Dalvenjha · #6 (**permalink**) 24/01/2009, 09:22

Vamos por partes nuevamente:

tus divs miden horizontalmente:

a=230;
b=536;
c=175;

Ahora, esto suma lo siguiente: 941 pixeles, primera variación, mantén tus min-height, pero dale ese width, a menos que tengas mucho borde, porque veo que tienes 994px de ancho.

están bien colocadas, asi que no hay problema por ahi, lo que haremos será lo siguiente:
Dales id a tus divs, yo los llamaré, uno, dos y tres, donde dos es el central. y baja el ancho del central a 540px y el derecho a 180. Esta es una maqueta que probé.

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>Enlightenment - Tutorial javascript Efecto Fade sencillo.</title>
<style type="text/css">
#contenedor{
position:relative;
width:820px;
height:600px;
}

#uno{
width:100px;
height:600px;
position:relative;
float:left;
background:red;
}

#dos{
width:540px;
height:600px;
display:block;
position:relative;
float:left;
background:blue;
}

#tres{
width:180px;
height:600px;
display:block;
position:relative;
float:left;
background:green;
}
</style>

<script type="text/javascript">

var aumenta=540;
var crecimiento = 10; 
var color = 100;
var bajon = 10;

function aqui(){
var obj = document.getElementById('dos');
var obj2 = document.getElementById('tres');
aumenta += crecimiento;

if (!(aumenta>=730)){
obj2.style.display="none";
obj.style.width = aumenta + "px";
window.setTimeout("aqui();",20);
}

}
</script>
</head>
<body>
<div id="contenedor">
<div id="uno">
<span onclick="aqui();">aqui</span>
</div>
<div id="dos">
</div>
<div id="tres">
</div>
</div>
</body>
</html>

</script>

Saludos!!

Dalvenjha · #7 (**permalink**) 24/01/2009, 09:23

Si mik, es lo que iba a sugerirle, pero se me dió por hacer una chorrada, asi que hice uno en el que el div crezca con un efecto algo "bonito".

=$ ya sabes que soy fintoso.

Saludos!!

Mikmoro · #8 (**permalink**) 24/01/2009, 09:29

Siendo algo tan simple, yo al menos lo haría sin javascript, sin duda, aun a costa del efecto, claro. De hecho, siempre es recomendable procurar que el javascript degrade perfectamente y sea transparente en caso de que esté desactivado.

el_apronte · #9 (**permalink**) 24/01/2009, 10:02

y si pruebas de hacerlo asi?

.contenedor{
width:994px;
margin:auto auto -38px auto;
height: auto !important;
min-height: 100%;
height: 100%;

}

.left{
width:230px;
background-color:#e1e1e1;
float:left;
}

.central{
width:711px;
float:left;
padding:20px 0px 0px 21px;

}

.right{
width:175px;
padding:6px;
background-color:.ccc;
float:right;
margin: 20px 0px 0px 19px;
}

<div class="contenedor">
<div class="left">columna left</div>
<div class="central">
<div class="right">columna izquierda</div>
Columna central
</div>

Mikmoro · #10 (**permalink**) 24/01/2009, 10:28

¿Tú crees que se consigue lo que buscaba CECISOL en la consulta inicial?
Al menos de lo que yo he entendido, si la columna central tiene un ancho fijo (width:711px;), no crecerá cuando falte la de la derecha.
¿Qué le véis de malo al ejemplo que he puesto? ¿no cumple con lo descrito?

Dalvenjha · #11 (**permalink**) 24/01/2009, 10:37

Opiniones diversas, todos los que opinamos lo hacemos de buena gana creo, algunos tiramos a lo vistoso, otros a lo práctico, lo cierto es que hay una gama de posibilidades que podría usar Cecilia para esto, definitivamente me quedo con la de mikmoro para algo rápido y sencillo.

Meter el div derecho dentro del central puede ser contraproducente en algunos casos, otro si es que estoy pensando en la manera de actualizar la info que tiene Cecilia para esto en el caso que ella actualice y se refresque la página, la mejor solución es la de Mikel, en el caso que sea una actualización automática, como AJAX, se podría definir entre la mía y la de Mikel.

Por ahí escuche fake columns?

el_apronte · #12 (**permalink**) 24/01/2009, 10:44

Cita:

Iniciado por Mikmoro

¿Tú crees que se consigue lo que buscaba CECISOL en la consulta inicial?
Al menos de lo que yo he entendido, si la columna central tiene un ancho fijo (width:711px;), no crecerá cuando falte la de la derecha.
¿Qué le véis de malo al ejemplo que he puesto? ¿no cumple con lo descrito?

Joer tio! lo tomáis todo en lo personal...
no estaba descalificando tu propuesta, sino proponiendo y rectificando la mía... ya que lo que había expuesto antes era una burrada...
oye, que mucho de lo que sé, lo aprendí de vosotros, que sois un referente para mi. No estoy aquí para dar catedra sino para ayudar en lo que pueda...
Saludos y respetos

Mikmoro · #13 (**permalink**) 24/01/2009, 11:11

Pues lo siento si te ha dado esa sensación de que tomara algo en lo personal, porque ni es así ni tenía la más mínima intención de que pareciera eso. Lo que estaba diciendo cordialmente era, por un lado, que lo que tú le propones no funciona a mi parecer, y por otro, que habiendo una solución que funciona perfectamente y es compatible con todos los navegadores, o se propone una solución alternativa igual de práctica, compatible y sencilla, o es innecesario, es más, acaba resultando confundir a la gente que encuentre en el futuro este hilo y esta consulta.

Tampoco yo tengo ninguna necesidad de sentar cátedra de nada; meto la pata como todo el mundo, pero lo que sí te puedo asegurar es que hago esto porque me divierte, por lo que no tengo ninguna necesidad de entrar en asuntos personales ni nada que se le parezca.
Lo que hago siempre (o casi siempre), es probar concienzudamente las cosas antes de valorarlas, así siempre sé de qué estoy hablando generalmente al tratar de soluciones.

Me releo y sigo sin ver esa sensación, pero si tú lo has entendido así lo siento, ya te digo que no era mi intención. Todo bien

CECISOL · #14 (**permalink**) 24/01/2009, 13:53

Gracias Dalvenjha...
Me ha servido de mucho tu ayuda.......
Y a los demas chicos tambien.
Saludos...a todos