Foros del Web - Ver Mensaje Individual

pzin · #11 (**permalink**) 13/09/2012, 21:49

Pues ya estaba casi seguro de que no se podía hacer cuando recordé una cosa que vi donde Chris Coyier de casualidad (vamos, que andaba aburrido ese día

)

Se llaman Media Queries. Son una especie de condicionales, como en programación if-then-else, pero algo más simples. Seguramente que luego alguien que sepa más que nosotros nos dirá bien lo que son.

No te quitas de poner un contenedor (#cajon) a las capas flotantes. Pero ese contenedor lo que hace es tomar diferentes medidas según el max-width del navegador y así siempre quedarán centrados las capas internas. Es una especie de diseño con medidas fijas pero flexible.

Te dejo el trabajo de adaptar tus medidas.

Código HTML:

Ver original<html>
<head>
<title></title>
<style type="text/css">
* { margon: 0; padding: 0; }
 
 
#cajon {
    width: 100%;
    margin: 0 auto;
}
    
@media (max-width:1999px) {
    #cajon {
        width: 1800px;
    }
}
 
@media (max-width:1799px) {
    #cajon {
        width: 1600px;
    }
}
 
@media (max-width:1599px) {
    #cajon {
        width: 1400px;
    }
}
 
@media (max-width:1399px) {
    #cajon {
        width: 1200px;
    }
}
 
@media (max-width:1199px) {
    #cajon {
        width: 1000px;
    }
}
 
@media (max-width:999px) {
    #cajon {
        width: 800px;
    }
}
 
@media (max-width:799px) {
    #cajon {
        width: 600px;
    }
}
 
@media (max-width:599px) {
    #cajon {
        width: 400px;
    }
}
 
#cajon div {
    width: 198px;
    height: 350px;
    border: #333 solid 1px;
    float: left;
}
</style>
</head>
<body>
    
    <div id="cajon">
    
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        
        <div></div>
        <div></div>
        <div></div>
        <div></div>
 
    </div>
 
</body>
</html>

Se puede ver funcionando aquí.