Tema: El contenido de 3 celdas se alinean a una 4a. celda
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 21/08/2014, 06:32
mblascog
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 22 años, 10 meses
Puntos: 4
El contenido de 3 celdas se alinean a una 4a. celda
Buenas,
Tengo una table definida por css y no sé el motivo por el cual, si redimensiono el navegador a menos de 800 píxeles de ancho me sale bien, pero por encima, el contenido de las 3 primera columnas se alinean por debajo del contenido de la 4a.
No hay ningún media query que afecte, ni nada que yo sepa ver.

La imagen, cuando el navegador es superior a 800 píxeles es esta, las 3 primeras columnas se desplazan por debajo del contenido de la 4a.:


Y cuando es inferior, la siguiente. Que el contenido sea centrado, lo determina el media query:


El código CSS es este;
Código CSS: 
Ver original
  1. footer {float:left;
  2.     width:100%;}
  3. #peu{width:100%;
  4.     float:left;}
  5. #peu div#anunci{font:bold .9em 'Helvetica';
  6.     color:red;
  7.     text-align:center;
  8.     margin-bottom:1%;}
  9. #totsBanners {display:table;
  10.     border-spacing:10px;}
  11. #totsBannersFila {display:table-row;
  12.     vertical-align:top;}
  13. #peuColumna1, #peuColumna2, #peuColumna3 {display: table-cell;
  14.     width:26%;
  15.     background:-webkit-linear-gradient(#5cacad, #3c8783);background:-o-linear-gradient(#5cacad, #3c8783);background:-moz-linear-gradient(#5cacad, #3c8783);background:linear-gradient(#5cacad, #3c8783);-moz-box-shadow: 5px 5px 5px #888;-webkit-box-shadow: 5px 5px 5px #888;box-shadow: 5px 5px 5px #888;}
  16. #peuColumna1 div.interiorPeu, #peuColumna2 div.interiorPeu, #peuColumna3 div.interiorPeu 
  17.     {width:100%;
  18.     overflow:hidden;} 
  19. #peuColumna1 div.interiorPeu div.bannerImg, #peuColumna2 div.interiorPeu div.bannerImg, #peuColumna3 div.interiorPeu div.bannerImg{float:left;
  20.     margin-right:1%;}
  21. #peuColumna1 div.interiorPeu div.bannerImg a, #peuColumna2 div.interiorPeu div.bannerImg a, #peuColumna3 div.interiorPeu div.bannerImg a {width:100%;}
  22. #peuColumna1 div.interiorPeu div.bannerImg a img, #peuColumna2 div.interiorPeu div.bannerImg a img, #peuColumna3 div.interiorPeu div.bannerImg a img {border:1px solid #000000;
  23.     margin:5%;
  24.     min-width:90px;}
  25. #peuColumna1 div.interiorPeu div.bannerText, #peuColumna2 div.interiorPeu div.bannerText, #peuColumna3 div.interiorPeu div.bannerText {overflow:hidden;
  26.     padding-left:4%;
  27.     padding-top:3%;
  28.     padding-right:2%;
  29.     min-width:105px;}
  30. #peuColumna1 div.interiorPeu div.bannerText a, #peuColumna2 div.interiorPeu div.bannerText a, #peuColumna3 div.interiorPeu div.bannerText a {text-decoration:none;
  31.     color:#FFF;}
  32. #peuColumna1 div.interiorPeu div.bannerText a p.p1, #peuColumna2 div.interiorPeu div.bannerText a p.p1, #peuColumna3 div.interiorPeu div.bannerText a p.p1 {font:bold .9em 'Helvetica';}
  33. #peuColumna1 div.interiorPeu div.bannerText a p.p2, #peuColumna2 div.interiorPeu div.bannerText a p.p2, #peuColumna3 div.interiorPeu div.bannerText a p.p2 {font: .8em 'Helvetica';}
  34. #peuColumna1 div.interiorPeu div.bannerText a p.p3, #peuColumna2 div.interiorPeu div.bannerText a p.p3, #peuColumna3 div.interiorPeu div.bannerText a p.p3 {float:right;
  35.     font:.8em 'Helvetica';
  36.     margin-top:18%;
  37.     margin-right:1%;}
  38. #peuColumna1 div.interiorPeu div.bannerText a:hover, #peuColumn2 div.interiorPeu div.bannerText a:hover, #peuColumna3 div.interiorPeu div.bannerText a:hover {text-decoration:underline;} 
  39. #peu div.liniaEmpresa {float: left;
  40.     color: #666666;
  41.     font: .7em 'Helvetica';
  42.     margin-top:1%;}
  43. #peu div.liniaEmpresa em{font-weight:bold;}
  44. #peuColumna4 {display:table-cell;
  45.     width:19%;
  46.     background-color:#efeee0;}
  47. #peuColumna4 div#enllacos{width:100%;
  48.     float:left;} 
  49. #peuColumna4 div#enllacos div{float:left;
  50.     width:50%;}
  51. #peuColumna4 div#enllacos a img{float:left;}
  52. #peuColumna4 div#enllacos div.tepui{font-size:.7em;
  53.     color:#000;
  54.     margin-top:6%;
  55.     overflow:hidden;
  56.     text-align:center;
  57.     width:100%;}
  58. #peuColumna4 div#enllacos div.tepui a{text-decoration:none;
  59.     color:#035A5B;}
  60. #peuColumna4 div#enllacos div.tepui a:hover{text-decoration:underline;
  61.     font-weight:bold;}

Y el media query para tamaño inferior a 800 píxeles este:
Código CSS: 
Ver original
  1. @media screen and (max-width:800px){
  2.     #peuColumna1 div.interiorPeu, #peuColumna2 div.interiorPeu, #peuColumna3 div.interiorPeu {text-align:center;}
  3.     #peuColumna1 div.interiorPeu div.bannerImg, #peuColumna2 div.interiorPeu div.bannerImg, #peuColumna3 div.interiorPeu div.bannerImg {float:none;}
  4. }

Y el código HTML:
Código HTML: 
Ver original
  1. <div id=peu>
  2.     <div id="anunci">
  3.         <?php include("js/neo.php");?>
  4.     </div>
  5.     <div id="totsBanners">
  6.         <div id="totsBannersFila">
  7.             <div id="peuColumna1">
  8.                 <div class="interiorPeu">
  9.                     <div class="bannerImg">
  10.                         <a href="<?=$linkOpcio6[$idioma]?>" target="_blank"><img src="<?php echo URL.'imatges/banner1.jpg'?>" alt="<?php echo $administracio[$idioma]?>" title="<?php echo $administracio[$idioma]?>" width="90px" height="103px" /></a>
  11.                     </div>
  12.                     <div class="bannerText">
  13.                         <a href="<?=$linkOpcio6[$idioma]?>" target="_blank">
  14.                             <p class=p1><?php echo $administracio[$idioma]?></p>
  15.                             <p class=p2><?php echo $garantim[$idioma]?></p>
  16.                         </a>
  17.                         <a href="<?=$linkOpcio6[$idioma]?>" target="_blank">
  18.                             <p class=p3><?php echo $contactar[$idioma]?></p>
  19.                         </a>
  20.                     </div>
  21.                 </div>
  22.             </div>
  23.             <div id="peuColumna2">
  24.                 <div class="interiorPeu">
  25.                     <div class="bannerImg">
  26.                         <a href="http://www.youtube.com/user/fincamps?feature=results_main" target="_blank"><img src="<?php echo URL.'imatges/banner2.jpg'?>" alt="<?php echo $veure[$idioma]?>" title="<?php echo $veure[$idioma]?>" width="90px" height="103px"/></a>
  27.                     </div>
  28.                     <div class="bannerText">
  29.                         <a href="http://www.youtube.com/user/fincamps?feature=results_main" target="_blank">
  30.                             <p class=p1><?php echo $veure[$idioma]?></p>
  31.                             <p class=p2><?php echo $visita[$idioma]?></p>
  32.                         </a>
  33.                     </div>
  34.                 </div>
  35.             </div>
  36.                 <div id="peuColumna3">
  37.                 <div class="interiorPeu">
  38.                     <div class="bannerImg">
  39.                         <a href="<?=$linkOpcio6[$idioma]?>" target="_blank"><img src="<?php echo URL.'imatges/banner3.jpg'?>" alt="<?php echo $necessites[$idioma]?>" title="<?php echo $necessites[$idioma]?>" width="90px" height="103px"/></a>
  40.                     </div>
  41.                     <div class="bannerText">
  42.                         <a href="<?=$linkOpcio6[$idioma]?>" target="_blank">
  43.                             <p class=p1><?php echo $necessites[$idioma]?></p>
  44.                             <p class=p2><?php echo $nosaltres[$idioma]?></p>
  45.                         </a>
  46.                     </div>
  47.                 </div>
  48.             </div>
  49.             <div id="peuColumna4">
  50.                 <div id="enllacos">
  51.                     <div>
  52.                                 <a href="http://www.coleadministradors.cat/" target="_blank">
  53.                                 <img src="<?php echo URL.'imatges/administradors.jpg'?>" alt="<?php echo $administracio[$idioma]?>" title="<?php echo $administracio[$idioma]?>" width="71px" height="103px"/>
  54.                         </a>
  55.                     </div>
  56.                     <div>
  57.                         <a href="http://www.apibcn.com" target="_blank">
  58.                             <img src="<?php echo URL.'imatges/api.jpg'?>" alt="<?php echo [$idioma]?>" title="<?php echo [$idioma]?>" width="89px" height="103px"/>
  59.                         </a>
  60.                     </div>  
  61.                     <div class="tepui">
  62.                         <?php echo $tepui[$idioma];?>
  63.                     </div>
  64.                 </div>
  65.             </div>
  66.         </div>
  67.     </div>
  68.     <div class="liniaEmpresa">
  69.         <em>Fincamps Assessors SL</em> - <?php echo $carrer[$idioma].' - 08202 Sabadell - '.$telefonadr[$idioma].' - [email protected]'?>
  70.     </div>

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