Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] El contenido de 3 celdas se alinean a una 4a. celda

 Estas en el tema de El contenido de 3 celdas se alinean a una 4a. celda en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/08/2014, 06:32
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 22 años, 3 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
  #2 (permalink)  
Antiguo 22/08/2014, 04:27
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 22 años, 3 meses
Puntos: 4
Respuesta: El contenido de 3 celdas se alinean a una 4a. celda
Buenas,
Puede alguien echarme un cable, sigo peleándome con el tema y no hay manera.

Gracias.
__________________
Qué fácil cuando lo sabes y qué difícil cuando no
  #3 (permalink)  
Antiguo 22/08/2014, 17:01
 
Fecha de Ingreso: marzo-2011
Ubicación: Oaxaca
Mensajes: 252
Antigüedad: 13 años, 1 mes
Puntos: 17
Respuesta: El contenido de 3 celdas se alinean a una 4a. celda
Cita:
@media screen and (max-width:800px){
#peuColumna1 div.interiorPeu, #peuColumna2 div.interiorPeu, #peuColumna3 div.interiorPeu {text-align:center;}
#peuColumna1 div.interiorPeu div.bannerImg, #peuColumna2 div.interiorPeu div.bannerImg, #peuColumna3 div.interiorPeu div.bannerImg {float:none;}
}
aqui , en la segunda fila, le quita el efecto flotante a todas las porpiedas que estan indicadas, si gustas, prueba poniendo 1024 en ves de 800px y veras lo que pasa

aun asi, ¿no entiendo bien cual es el detalle que tienes ?

edito:
despues de obserbar las imagenes un rato con atencion, note el gran espacio que tiene arriba la caja y que tu imagen con el texto se amontonan, esto se debe a que no le has dado el espacio apropiado a tus elementos, ejemplo

tenemos una caja

------------------------------------
- . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . . .CAJA. . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . -
------------------------------------

en esta caja, vamos a hacer una divicion, donde estara ubicada la imagen
y donde estara ubicado el texto

------------------------------------
- . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . -
- . . . . . . .IMAGEN . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . TEXTO . . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . -
------------------------------------

aun que claro, definiendo paddings, margenes, etc. el espacio de nuestra imagen cabia, pero, se mantien en esa area delimitada, al igual que el texto

------------------------------------
- . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . IMAGEN. . . . . . . -
- . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . TEXTO . . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . -
------------------------------------

ahora, lo que esta pasando e que el contenedor de tu caja y tu contendor de textomiden menos del ancho total de tu caja, pero suman su ancho es igual o menor al tamaño de la misa, como son elementos flotantes, te genera este fenoneno
--------------------------------------
- . . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . . -
- . . . .IMG . . . . . . . TEXTO. . . -
- . . . . . . . . . . . . . . . . . . . . . -
- . . . . . . . . . . . . . . . . . . . . . -
--------------------------------------


de todos modos, si les quitas el estado flotante, debe quedar sin problema
Última edición por juangemelo01; 22/08/2014 a las 17:38
  #4 (permalink)  
Antiguo 25/08/2014, 01:19
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 22 años, 3 meses
Puntos: 4
Respuesta: El contenido de 3 celdas se alinean a una 4a. celda
Al final lo he solucionado añadiendo a la configuración de las columnas vertical-align:top
Gracias
__________________
Qué fácil cuando lo sabes y qué difícil cuando no

Etiquetas: background, celda, celdas, color, contenido, hover, html, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 08:24.