Tema: Adaptar 3 fotos en div
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 24/08/2014, 17:51
idelatorre
 
Fecha de Ingreso: febrero-2003
Mensajes: 37
Antigüedad: 21 años, 8 meses
Puntos: 0
Información Adaptar 3 fotos en div
Hola !!! Estoy peleando con esto y ya no se para donde correr. Ojala alguien me pueda destrabar!

Tengo un div contenedor de 1100 px y tres div adentro de 366 c/u, lo que necesito es que cuando mido menos de 1100 px el monitor se achiquen... Luego de mucha prueba y error lo logre con un slider que contiene 5 imágenes que está ubicado en el inicio y no he podido replicarlo en el otro div.. No se si me explico bien... Esta es la pagina de la que hablo

http://www.nachodelatorre.com.ar/pro...ive/index.html

Desde ya les agradezco muchisimo lo que puedan hacer por mi!

El codigo que uso en el css es:

Código CSS: 
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. img
  5. {
  6.     border: 0;
  7. }
  8.  
  9. .slider{
  10.     display:block;
  11.     position:relative;
  12.     margin:auto;
  13.     width:100%;
  14.     max-width:1100px;
  15.     max-height:550px;
  16.     overflow:hidden;    
  17. }
  18.  
  19. .boton{
  20.     position: absolute;
  21.     display: block;
  22.     bottom: 15px;
  23.     margin: 0;
  24.     padding: 0;
  25.     z-index: 999;
  26.     cursor: pointer;
  27.     opacity: 0;
  28.     left: 1px;
  29. }
  30.  
  31. .boton:nth-child(1){
  32.     left:15px;
  33. }
  34. .boton:nth-child(3){
  35.     left:45px;
  36. }
  37. .boton:nth-child(5){
  38.     left:75px;
  39. }
  40. .boton:nth-child(7){
  41.     left:105px;
  42. }
  43. .boton:nth-child(9){
  44.     left:135px;
  45. }
  46.  
  47.  
  48. .slider label{
  49.     position:absolute;
  50.     bottom:15px;
  51.     width:12px;
  52.     height:12px;
  53.     background: rgba (50,50,50,.5);
  54.     border-radius:7px;
  55.     z-index:100;
  56.     border: 1px solid #777;
  57. }
  58.  
  59. .slider label:nth-child(2){
  60.     left:15px;
  61. }
  62. .slider label:nth-child(4){
  63.     left:45px;
  64. }
  65. .slider label:nth-child(6){
  66.     left:75px;
  67. }
  68. .slider label:nth-child(8){
  69.     left:105px;
  70. }
  71. .slider label:nth-child(10){
  72.     left:135px;
  73. }
  74.  
  75.  
  76. .boton:checked + label{
  77.     background: rgba (0,0,0,.6);
  78.     border-color: #eee;
  79. }
  80.  
  81. .contenedor-img img {
  82.     display: block;
  83.     float: left;
  84. }
  85.  
  86.  
  87. .cinco-imagenes {
  88.     width: 500%;
  89. }
  90.  
  91. .cinco-imagenes img {
  92.     width: 20%;
  93. }
  94.  
  95. .contenedor-img {
  96.     position: relative;
  97.     left: 0;
  98.     -webkit-transition: left .3s ease-in;
  99.     -ms-transition: left .3s ease-in;
  100.     -moz-transition: left .3s ease-in;
  101.     -o-transition: left .3s ease-in;
  102.     transition: left .3s ease-in;
  103. }
  104.  
  105. .boton:nth-child(1):checked ~ .contenedor-img {
  106.     left: 0;
  107. }
  108. .boton:nth-child(3):checked ~ .contenedor-img {
  109.     left: -100%;
  110. }
  111. .boton:nth-child(5):checked ~ .contenedor-img {
  112.     left: -200%;
  113. }
  114. .boton:nth-child(7):checked ~ .contenedor-img {
  115.     left: -300%;
  116. }
  117. .boton:nth-child(9):checked ~ .contenedor-img {
  118.     left: -400%;
  119. }
  120.  
  121. .contenedorMenuPrincipal{
  122.     display: block;
  123.     position: relative;
  124.     margin: auto;
  125.     width: 100%;
  126.     overflow: hidden;
  127. }
  128.  
  129.  
  130. #contenedor-secundario {
  131.     background:#000;
  132.     width:1100px;
  133. }
  134.  
  135. #contenedor-secundario div {
  136.     float:left;
  137.     background:#fff;
  138.     width:366px;
  139.     height:366px;
  140. }
  141.  
  142.  
  143. .menusuperior{
  144.     font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  145.     font-size:20px;
  146.     color:#999999;
  147. }
  148.  
  149. .derechosreservados{
  150.     font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  151.     font-size:12px;
  152.     color:#999999;
  153. }
  154.  
  155. .centrado {
  156.     margin: 0 auto; width: 1100px;
  157.     }
  158.  
  159.  
  160. a {
  161.     font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  162.     font-size: 20px;
  163.     color: #999999;
  164. }
  165. a:link {
  166.     text-decoration: none;
  167. }
  168. a:visited {
  169.     text-decoration: none;
  170.     color: #999999;
  171. }
  172. a:hover {
  173.     text-decoration: none;
  174.     color: #EEEEEE;
  175. }
  176. a:active {
  177.     text-decoration: none;
  178.     color: #999999;
  179. }
  180.  
  181.  
  182. #menu {
  183.     width: 740px;
  184.     margin: 0 auto;
  185. }
  186.  
  187. @media (min-width:1100px) {
  188.     #menu {
  189.         width: 1100px; 
  190.     }
  191. }


y el html

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Coffee Baby &amp; Kids</title>
  6. <link rel="stylesheet" type="text/css" href="css/style.css">
  7. <script type="text/javascript">
  8. function MM_swapImgRestore() { //v3.0
  9.   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  10. }
  11. function MM_preloadImages() { //v3.0
  12.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  13.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  14.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  15. }
  16.  
  17. function MM_findObj(n, d) { //v4.01
  18.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  19.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  20.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  21.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  22.   if(!x && d.getElementById) x=d.getElementById(n); return x;
  23. }
  24.  
  25. function MM_swapImage() { //v3.0
  26.   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  27.    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  28. }
  29. </script>
  30. </head>
  31.  
  32. <body onLoad="MM_preloadImages('img/btn_facebookB.png','img/btn_picassaB.png')">
  33.     
  34.     <div id="menu" class="centrado">
  35.          <table border="0" cellpadding="0" cellspacing="0" class="contenedorMenuPrincipal">
  36.   <tr>
  37.   <td width="300" height="120" align="left" valign="top"><a href="index.html"><img src="img/logoCoffeeArriba.png" width="250" height="120"></a></td>
  38.     <td width="300" height="120" align="right" valign="bottom"><span class="menusuperior"><a href="#">nosotros</a></span></td>
  39.     <td width="120" height="120" align="center" valign="bottom"><span class="menusuperior"><a href="#">locales</a></span></td>
  40.     <td width="80" height="120" align="center" valign="bottom"><span class="menusuperior"><a href="#">prensa</a></span></td>
  41.     <td width="100" height="120" align="center" valign="bottom"><span class="menusuperior"><a href="#">premios</a></span></td>
  42.     <td width="100" height="120" align="center" valign="bottom"><span class="menusuperior"><a href="#">contacto</a></span></td>
  43.     <td width="50" height="120" align="center" valign="bottom"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','img/btn_facebookB.png',1)"><img src="img/btn_facebook.png" alt="Facebook" width="43" height="43" id="Image8"></a></td>
  44.     <td width="50" height="120" align="center" valign="bottom"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','img/btn_picassaB.png',1)"><img src="img/btn_picassa.png" alt="Picassa" width="43" height="43" id="Image9"></a></td>
  45.   </tr>
  46.   <tr>
  47.     <td height="20" align="left" valign="top">&nbsp;</td>
  48.     <td height="20" align="center">&nbsp;</td>
  49.     <td height="20" align="center">&nbsp;</td>
  50.     <td height="20" align="center">&nbsp;</td>
  51.     <td height="20" align="center">&nbsp;</td>
  52.     <td height="20" align="center">&nbsp;</td>
  53.     <td height="20" align="center">&nbsp;</td>
  54.     <td height="20" align="center">&nbsp;</td>
  55.   </tr>
  56.       </table>
  57.  
  58.   </div>
  59.   
  60. <div class="slider">
  61.     <input type="radio" class="boton" name="boton" checked="checked">
  62.     <label></label> 
  63.     <input type="radio" class="boton" name="boton">
  64.     <label></label>
  65.     <input type="radio" class="boton" name="boton">
  66.     <label></label>
  67.     <input type="radio" class="boton" name="boton">
  68.     <label></label>
  69.     <input type="radio" class="boton" name="boton">
  70.     <label></label>
  71.     
  72.     <div class="contenedor-img cinco-imagenes">
  73.         <img src="img/slider1.jpg">
  74.         <img src="img/slider2.jpg">
  75.         <img src="img/slider3.jpg">
  76.         <img src="img/slider4.jpg">
  77.         <img src="img/slider5.jpg">
  78.     </div>
  79.  
  80. </div> 
  81. <table bgcolor="#FFFFFF" width="1100" border="0" cellspacing="0" cellpadding="0">
  82.   <tr>
  83.     <td height="20">&nbsp;</td>
  84.   </tr>
  85. </table>
  86.  
  87.  
  88. <div class="centrado" id="contenedor-secundario">
  89.            <div id="nosotros"><a href="#"><img src="img/nosotros.jpg" width="367" height="366"></a></div>
  90.            <div id="lookboos"><a href="#"><img src="img/plano_lookbooks.png" width="366" height="366"></a></div>
  91.   <div id="catalogo"><a href="#"><img src="img/catalogo.jpg" width="366" height="366"></a></div>
  92. </div>
  93. </body>
  94. </html>
Última edición por pzin; 25/08/2014 a las 07:15 Razón: formato código