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.