Tema: Se sobreponen dos capas
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 17/01/2015, 07:50
mblascog
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 23 años
Puntos: 4
Se sobreponen dos capas
Buenas,
Tengo implementado un buscador, en la imagen se puede ver parte de él.



Me gustaría separar un poquito la referencia de Venta o Alquiler. Parece una cosa tonta, pero no lo consigo.
Con las herramientas del desarrollador, veo que el alto de la referencia es correcto, el alto del tipo también, en cambio, el alto de Venta o Alquier, no sé porqué, pero en lugar de lo que se ve, se sobrepone a la referencia. Uf!! no sé si me acabo de explicar.

Se puede ver un ejemplo en
este enlace

El código html es:
Código HTML: 
Ver original
  1. <div id="formRecerca">
  2.                 <form name="frmRecerca" method="post" action="<?php echo URL.$linkimmoblesTrobats[$idioma]?>" id="frmRecerca">
  3.                     <input name="opcioMenu" type="hidden" id="opcioMenu" value="<?php echo $opcioMenu?>"/>
  4.                     <div id="divReferencia">
  5.                         <?php echo $referencia[$idioma].": ";?><input type="text" id='referencia'>
  6.                         <img id="lupaRecerca" src="<?php echo URL.'imatges/lupa.png'?>"/>
  7.                     </div>
  8.                 
  9.                     <div id="divVenda">
  10.                         <?php echo $operacio[$idioma]." <em>*</em>"?><br/>
  11.                         <select class="ample90" name="fOperacio" id="fOperacio">
  12.                             <?php echo ompleOperacio($comboOperacio, $seleccionar[$idioma], $selectOperacio);?>
  13.                         </select><br/>
  14.                         <input name="ftxtOperacio" type="hidden" id="ftxtOperacio" value="<?php echo $comboOperacio[$seleccionat][$idioma]?>"/>
  15.                         <input name="fopcioId" type="hidden" id="fopcioId" value="<?php echo $opcioId?>"/>
  16.                         <input name="fOpcio" type="hidden" id="fOpcio" value="<?php echo $opcio?> "/> 
  17.                     </div>
  18.         
  19.                     <div id="divTipus">             
  20.                         <?php echo $tipus[$idioma]." <em>*</em>"?><br/>
  21.                         <select class="ample90" name="fTipus" id="fTipus">
  22.                             <?php
  23.         //                      if (isset ($selectOperacio) and ($selectOperacio != "")) {
  24.                                     if ($opcioId == "0") {
  25.                                         $Consulta = 'SELECT id_familia, nombre_familia_'.$idioma.' FROM t_familia WHERE id_familia <> 1';
  26.                                         echo ompleTipusOB($Consulta, 'id_familia', 'nombre_familia_'.$idioma, $seleccionar[$idioma], $selectTipus);             
  27.                                     }
  28.                                     else 
  29.                                         echo ompleTipus($comboTipus[$opcioId], $seleccionar[$idioma], $selectTipus, $opcioId);
  30.         //                      }
  31.                             ?>
  32.                         </select><br/>
  33.                     </div>

Y el código CSS el siguiente:
Código CSS: 
Ver original
  1. #recerca div#formRecerca{
  2.     font:bold 0.7em 'Helvetica';
  3.     color:gray;
  4.     margin-left:5%;
  5.     float:left;
  6.     width:93%
  7. }
  8. #recerca #formRecerca form{
  9.     height:100%;
  10. }
  11. #recerca div#formRecerca form div{
  12.     margin-bottom:1%
  13. }
  14. #recerca div#formRecerca form#frmRecerca div#divTipus em{
  15.     font: 1em 'Helvetica';
  16.     color:#000;
  17. }
  18. #recerca div#formRecerca form#frmRecerca div#divVenda em{
  19.     font: 1em 'Helvetica';
  20.     color:#000;
  21. }
  22. #h2Recerca{font:bold 1.3em/1 'Helvetica';
  23.     color:#035A5B;
  24.     margin-top:4%;
  25.     margin-bottom:8%;
  26.     margin-left:5%;
  27. }
  28. #h2Recerca em{
  29.     font-size:1em; 
  30.     color:#5CACAD;
  31. }
  32. #butoRecerca{
  33.     background:#367A7B;
  34.     height:100%;
  35.     width:87%;
  36.     text-align:center;
  37.     margin-top:8%;
  38.     padding-top:2%;
  39.     font:bold 1.3em 'Helvetica';
  40.     color:#FFF;
  41.     border-radius: 7px;
  42.     -moz-border-radius: 7px;
  43.     -webkit-border-radius: 7px;
  44. }
  45. #butoRecerca div input{
  46.     cursor:pointer;
  47.     border:0;
  48.     height:100%;
  49.     background:#367A7B;
  50.     font:bold 1.2em 'Helvetica';
  51.     color: #FFF;
  52. }
  53. #divReferencia {
  54.     float:left;
  55.     width:87%;
  56.     background:#EFEEE0;
  57.     padding:2%
  58. }
  59. #divReferencia input{
  60.     margin:2%;
  61.     width:90px;
  62. }
  63. #divReferencia a{
  64.     float:right;
  65.     margin-right:10%
  66. }
  67. #divReferencia img{
  68.     margin-left:5%;
  69.     width:40px;
  70.     height:40px;
  71.     vertical-align:middle;
  72. }
  73. #divReferencia img:hover{
  74.     background-color:#FFF;
  75.     cursor:pointer;
  76. }

Muchas gracias
__________________
Qué fácil cuando lo sabes y qué difícil cuando no