[SOLUCIONADO] Adaptar 3 fotos en div

idelatorre · #1 (**permalink**) 24/08/2014, 17:51

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@charset "utf-8";
/* CSS Document */
 
img
{
    border: 0;
}
 
.slider{
    display:block;
    position:relative;
    margin:auto;
    width:100%;
    max-width:1100px;
    max-height:550px;
    overflow:hidden;    
}
 
.boton{
    position: absolute;
    display: block;
    bottom: 15px;
    margin: 0;
    padding: 0;
    z-index: 999;
    cursor: pointer;
    opacity: 0;
    left: 1px;
}
 
.boton:nth-child(1){
    left:15px;
}
.boton:nth-child(3){
    left:45px;
}
.boton:nth-child(5){
    left:75px;
}
.boton:nth-child(7){
    left:105px;
}
.boton:nth-child(9){
    left:135px;
}
 
 
.slider label{
    position:absolute;
    bottom:15px;
    width:12px;
    height:12px;
    background: rgba (50,50,50,.5);
    border-radius:7px;
    z-index:100;
    border: 1px solid #777;
}
 
.slider label:nth-child(2){
    left:15px;
}
.slider label:nth-child(4){
    left:45px;
}
.slider label:nth-child(6){
    left:75px;
}
.slider label:nth-child(8){
    left:105px;
}
.slider label:nth-child(10){
    left:135px;
}
 
 
.boton:checked + label{
    background: rgba (0,0,0,.6);
    border-color: #eee;
}
 
.contenedor-img img {
    display: block;
    float: left;
}
 
 
.cinco-imagenes {
    width: 500%;
}
 
.cinco-imagenes img {
    width: 20%;
}
 
.contenedor-img {
    position: relative;
    left: 0;
    -webkit-transition: left .3s ease-in;
    -ms-transition: left .3s ease-in;
    -moz-transition: left .3s ease-in;
    -o-transition: left .3s ease-in;
    transition: left .3s ease-in;
}
 
.boton:nth-child(1):checked ~ .contenedor-img {
    left: 0;
}
.boton:nth-child(3):checked ~ .contenedor-img {
    left: -100%;
}
.boton:nth-child(5):checked ~ .contenedor-img {
    left: -200%;
}
.boton:nth-child(7):checked ~ .contenedor-img {
    left: -300%;
}
.boton:nth-child(9):checked ~ .contenedor-img {
    left: -400%;
}
 
.contenedorMenuPrincipal{
    display: block;
    position: relative;
    margin: auto;
    width: 100%;
    overflow: hidden;
}
 
 
#contenedor-secundario {
    background:#000;
    width:1100px;
}
 
#contenedor-secundario div {
    float:left;
    background:#fff;
    width:366px;
    height:366px;
}
 
 
.menusuperior{
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size:20px;
    color:#999999;
}
 
.derechosreservados{
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size:12px;
    color:#999999;
}
 
.centrado {
    margin: 0 auto; width: 1100px;
    }
 
 
a {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size: 20px;
    color: #999999;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #999999;
}
a:hover {
    text-decoration: none;
    color: #EEEEEE;
}
a:active {
    text-decoration: none;
    color: #999999;
}
 
 
#menu {
    width: 740px;
    margin: 0 auto;
}
 
@media (min-width:1100px) {
    #menu {
        width: 1100px; 
    }
}

y el html

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Coffee Baby &amp; Kids</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
 
<body onLoad="MM_preloadImages('img/btn_facebookB.png','img/btn_picassaB.png')">
    
    <div id="menu" class="centrado">
         <table border="0" cellpadding="0" cellspacing="0" class="contenedorMenuPrincipal">
  <tr>
  <td width="300" height="120" align="left" valign="top"><a href="index.html"><img src="img/logoCoffeeArriba.png" width="250" height="120"></a></td>
    <td width="300" height="120" align="right" valign="bottom"><span class="menusuperior"><a href="#">nosotros</a></span></td>
    <td width="120" height="120" align="center" valign="bottom"><span class="menusuperior"><a href="#">locales</a></span></td>
    <td width="80" height="120" align="center" valign="bottom"><span class="menusuperior"><a href="#">prensa</a></span></td>
    <td width="100" height="120" align="center" valign="bottom"><span class="menusuperior"><a href="#">premios</a></span></td>
    <td width="100" height="120" align="center" valign="bottom"><span class="menusuperior"><a href="#">contacto</a></span></td>
    <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>
    <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>
  </tr>
  <tr>
    <td height="20" align="left" valign="top">&nbsp;</td>
    <td height="20" align="center">&nbsp;</td>
    <td height="20" align="center">&nbsp;</td>
    <td height="20" align="center">&nbsp;</td>
    <td height="20" align="center">&nbsp;</td>
    <td height="20" align="center">&nbsp;</td>
    <td height="20" align="center">&nbsp;</td>
    <td height="20" align="center">&nbsp;</td>
  </tr>
      </table>
 
  </div>
  
<div class="slider">
    <input type="radio" class="boton" name="boton" checked="checked">
    <label></label> 
    <input type="radio" class="boton" name="boton">
    <label></label>
    <input type="radio" class="boton" name="boton">
    <label></label>
    <input type="radio" class="boton" name="boton">
    <label></label>
    <input type="radio" class="boton" name="boton">
    <label></label>
    
    <div class="contenedor-img cinco-imagenes">
        <img src="img/slider1.jpg">
        <img src="img/slider2.jpg">
        <img src="img/slider3.jpg">
        <img src="img/slider4.jpg">
        <img src="img/slider5.jpg">
    </div>
 
</div> 
<table bgcolor="#FFFFFF" width="1100" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="20">&nbsp;</td>
  </tr>
</table>
 
 
<div class="centrado" id="contenedor-secundario">
           <div id="nosotros"><a href="#"><img src="img/nosotros.jpg" width="367" height="366"></a></div>
           <div id="lookboos"><a href="#"><img src="img/plano_lookbooks.png" width="366" height="366"></a></div>
  <div id="catalogo"><a href="#"><img src="img/catalogo.jpg" width="366" height="366"></a></div>
</div>
</body>
</html>

juangemelo01 · #2 (**permalink**) 25/08/2014, 02:23

Hola Amigo, numero 1, tenemos etiquetas que le dan un bonito estilo a los codigos html, eso permite que sea mas claro y te podamos ayudar con mayor facilidad

Numero 2, usar tablas para hacer menus, no es muy practico que digamos, lo que se usa actualmente son listas

Numero 3, No veo que estes usando mediaqueries para hacer el contenido adaptable a la resolucion del dispositivo, revisa este practico tutorial, analiza el codigo css e intentalo,

http://www.cssblog.es/crear-diseno-r...ve-en-3-pasos/

idelatorre · #3 (**permalink**) 25/08/2014, 08:00

uppss!!! no tenia idea las etiquetas perdon!. Me pongo a ver ese tutorial y les cuento. Gracias juangemelo01!

idelatorre · #4 (**permalink**) 25/08/2014, 09:24

Clarisimo el tutorial estoy empezando de cero para hacerlo asi! Lo que supuse (y veo que no es asi) es que lo que ponemos dentro del div se adaptaba... hice la prueba con el logo que mide 250 px cuando es 1100 o mayor la pantalla y al achicar se adapta el div pero no la imagen... Me orientan?

img {
width:100%;
max-width:250px;
}

Esto es cuando la imagen mida menos de 250px mostrarla al 100% del tamaño del div?... Uffff estoy super perdido!

gracias!

PD: ¿como pongo las etiquetas de css o html?

adry02ml · #5 (**permalink**) 25/08/2014, 16:01

Buenas, si te sirve de ayuda te comento lo que yo realizo:

Cuando tengo capas asi juntas como es tu caso con 3 imagenes las meto en un div (al igual que tu tienes) y siempre que la web vaya a ser responsive le pongo a los img lo siguiente:

img{
max-width:100%;
height:auto;
}

Con esto las imagenes siempre se adaptan a la resolucion.

Un saludo y espero que te sirva.

idelatorre · #6 (**permalink**) 25/08/2014, 17:37

Hola adry02ml! Muchas gracias por tu respuesta... Te cuento, si lo armo en una pagina vacía... pongo tres div y relaciono el css con esa pagina anda bárbaro. Lo aplico en la mía y no funciona! No se que hago mal! help me!!!

webosiris · #7 (**permalink**) 25/08/2014, 18:05

- en la clase .centrado, cambia el width por max-width
- elimina el width repetido que tienes en #menu
- elimina la tabla que tienes después del slider
- en los div de #contenedor-secundario elimina el height y el width fijo, ponle width:33% y al del medio 34%
- emplea el código que te ha dicho adry02ml

con eso te debería de quedar, pero como te ha dicho juangemelo01 el menú principal lo vas a tener que sacar de esa tabla y usar html semántico

idelatorre · #8 (**permalink**) 26/08/2014, 08:49

Hola webosiris, muchas gracias por tu ayuda! Te cuento que no lo he logrado... limpie todo lo que me dijiste y agregue en el tag img lo que me pasaron pero nada... en los div lo agregue de esta manera.. ¿es correcto?

<div class="centrado" id="contenedor-secundario">
<div id="nosotros" style="width:33%"><a href="#"><img src="img/nosotros.jpg"></a></div>
<div id="lookboos" style="width:34%"><a href="#"><img src="img/plano_lookbooks.png"></a></div>
<div id="catalogo" style="width:33%"><a href="#"><img src="img/catalogo.jpg"></a></div>
</div>

Si se les ocurre algo mas, espero ansioso se me esta acabando el tiempo. Sigo probando y buscando!

saludos y muchas gracias!

webosiris · #9 (**permalink**) 26/08/2014, 08:54

donde estas probando los cambios? porque la url que distes al principio yo la veo igual, sin ningún cambio.

idelatorre · #10 (**permalink**) 26/08/2014, 08:59

Perdon! recien lo subo, antes hice una prueba en mi maquina

saludos!

webosiris · #11 (**permalink**) 26/08/2014, 09:46

te faltó eliminar los width repetidos que son de 1100px (deja solo el de centrado, pero no con width sino con max-width)

Si tu tienes un width fijo de 1100px, el navegador hace eso justamente , 1100px que son fijos y no se redimensionan cuando la ventana mide menos de 1100px

idelatorre · #12 (**permalink**) 26/08/2014, 11:37

Funciona!!! Muchisimas gracias webosiris!! Ahora a pelear con el menu! (por las dudas no te vayas... jajjajja)

Saludos y muchas gracias de nuevo

idelatorre · #13 (**permalink**) 26/08/2014, 13:48

Cita:

Iniciado por webosiris

te faltó eliminar los width repetidos que son de 1100px (deja solo el de centrado, pero no con width sino con max-width)

Si tu tienes un width fijo de 1100px, el navegador hace eso justamente , 1100px que son fijos y no se redimensionan cuando la ventana mide menos de 1100px

aca de nuevo,,, snifff! Tengo los 3 div width 33.33%, pero por algun motivo que no logro resolver el del centro me queda mas largo.... Probe cambiando los porcentajes pero nada, siempre es un poco mas largo, alguna idea?

webosiris · #14 (**permalink**) 26/08/2014, 21:24

no se si ya lo solucionaste o no, pero yo lo veo bien, cada uno de 33.33% osea 366.617px
si no lo ves bien puede ser que tu navegador/sistema no soporte mostrar fracciones de px

PD: a las img ponles width:100%, no max-width, así te escalan también al 100% del ancho cuando el contenedor es más grande que su ancho original

idelatorre · #15 (**permalink**) 27/08/2014, 11:10

si, el ancho esta bien, pero el largo no, la imagen del medio, o mejor dicho el div lo, si te fijas, es mas largo, le puse distinto fondo para que resalte, no me respeta el alto de la imagen... que puede ser eso?

gracias de nuevo!

idelatorre · #16 (**permalink**) 28/08/2014, 09:38

Cita:

Iniciado por webosiris

no se si ya lo solucionaste o no, pero yo lo veo bien, cada uno de 33.33% osea 366.617px
si no lo ves bien puede ser que tu navegador/sistema no soporte mostrar fracciones de px

PD: a las img ponles width:100%, no max-width, así te escalan también al 100% del ancho cuando el contenedor es más grande que su ancho original

Aca estamos denuevo... cuando le pongo un link a esta pagina

http://www.nachodelatorre.com.ar/pro...sive/baby.html

me corre la imagen a la derecha, en el monitor de mi oficina (1600x1200), no asi en el de casa (no me fije que resolucion tiene)...

pero a su vez el index que tambien tiene link se comporta bien. deja cada cosa en su lugar.. alguien puede ayudarme con eso??

saludos y gracias por la paciencia y ayuda!

"Solucionado", la verdad no se porque pero al ponerle links a todas las imagenes se ve bien y como el tiempo me esta matando por ahora lo dejo asi y con tiempo seguire investigando.. OTRO problema al poner un link con coordenadas no lo puedo ejecutar... POR FAVOR!!!! Necesito terminar eso, alguien por ahi que me ayude?

gracias de nuevo!