Problema con slideDown

chi_flao · #1 (**permalink**) 01/10/2010, 02:42

Hola amigos. Llevo tiempo echando un vistazo y no veo manera de porque pasa. En el código que pongo a continuación, el enlace de Búsqueda avanzada me visualiza una capa con slideDown, hasta ahí bien. Lo malo viene cuando descomento del código css, donde pone float:right, para posicionar una capa al lado de la otra, entonces falla. ¿que estoy haciendo mal?

Saludos.

Código PHP:

   
 
<!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></title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    

    <style>

        body { background-color: #c0d0d9; }

        #contenido { background-color:#ffffff; width:960px; position:relative; margin:0 auto; text-align:center; padding: 40px 0; min-height:400px;}

        #busqueda  { border:1px solid #6a9695; height:67px; width:940px; margin:0 auto; position:relative;}

        #busquedaAv { background-color:#cae7f5; border:1px solid #6a9695; border-top:none; height:100%; height:auto; width:940px; margin:0 auto; display:none; position:relative;}

        #busquedaAv  #bloque1 { width:430px; position:relative; float:left; text-align:right; padding-right:15px;}

        #busquedaAv  #bloque2 { width:430px; position:relative; float:right; text-align:right; padding-right:15px;}

        #busquedaAv .capaInput      { position:relative; /*float:right;*/ width:430px; font-size:14px; color:#000000; padding:10px 0;}

        #busquedaAv .capaInput span { padding-right:12px; text-align:left; font-weight:bold;}

        #busquedaAv .capaInput input{ position:relative; float:right; width:280px; height:18px;  font-weight:normal; border:1px solid #7f9db9;}

    </style>

 
   

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $("#verBusqAv").click(function() {

                if ($("#busquedaAv").is(":hidden")) {

                    $("#busquedaAv").slideDown("slow");

                } else {

                    $("#busquedaAv").slideUp("slow");

                }

            });

        });

    </script>

 
</head>

<body>

        <div id="contenido">

                <div id="busqueda"><div id="verBusqAv"><a href="javascript:void(0)">Búsqueda Avanzada</a></div>

          </div>        

                <div class="both"></div>

                <div id="busquedaAv">

                  <div id="bloque1">

                    <div class="capaInput"><span>input1</span><input type="text" name="xxx" /></div>

                    <div class="capaInput"><span>input2</span><input type="text" name="xxx" /></div>

                    <div class="capaInput"><span>input3</span><input type="text" name="xxx" /></div>

                  </div>

                  <div id="bloque2">

                    <div class="capaInput"><span>input1</span><input type="text" name="xxx" /></div>

                    <div class="capaInput"><span>input2</span><input type="text" name="xxx" /></div>

                    <div class="capaInput"><span>input3</span><input type="text" name="xxx" /></div>

                  </div>

                </div>   

          <div class="both"></div>

        </div>

</body>

</html>

mayid · #2 (**permalink**) 01/10/2010, 08:17

Por que necesitas divs, que son elementos de bloque? Con el span no bastaría?

Al tener contenidores flotantes, y ademas item flotantes, todo dentro de <div id="busquedaAv"> que tiene height automatico, imagino que todo se descalabra. Si mal no recuerdo eso se soluciona con un simple overflow: auto para el elemento "busquedaAv"

Fijate si podes mover tu tema a css, desde el menu Herramientas->mover tema.