Foros Programación Cliente

CSS box layout

7 7 Respuestas Jueves 24 de mayo, 2012
Hola!

Estoy maquetando mi portfolio y no consigo dejarlo como quiero.

Es un grid de imagenes que ocupan toda la pantalla, son cajas de 210 x 280, si hago todas iguales no hay problema.

La cuestión es que quiero que algunas cajas sean el doble de grandes para que destaquen. Esas cajas grandes desplazan todas las cajas que hay debajo y no consigo que las cajas pequeñas se acomplen perfectamente, creando una estructura tipo tetris.

Ahora mismo tengo esto:

.box { width: 210px; height:280px; margin-bottom: 30px; margin-right:10px; color: #636363; background-color:#FFFFFF; padding:5px; float: left; display:block;}

.big_vertical { width: 210px; height:600px; margin-bottom: 30px; margin-right:10px; color: #636363; background-color:#FFFFFF; padding:5px; float: left;}

Alguien me puede echar un cable.

Muchas Gracias
Registrado desde 25/06/03
Número de posts: 42
  • Avatar de albatros albatros Registrado desde 11/09/07 / Número de posts: 263
    Mira creo que tienes que crearte un div que sirva como columna

    te paso un ejemplo que he hecho con tus estilos


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
    <html xmlns="http://www.w3.org/1999/xhtml">;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento sin título</title>
    <style>
    .box { width: 210px; height:280px; margin-bottom: 30px; margin-right:10px; color: #636363; background-color:#f4f4f4; padding:5px; float: left; display:block;}

    .big_vertical { width: 210px; height:600px; margin-bottom: 30px; margin-right:10px; color: #636363; background-color:#fabada; padding:5px; float: left;}

    .columna {width:230px; float:left}


    </style>

    </head>

    <body>

    <div class="columna">
    <div class="box">
    pojsdvipdipvn
    </div>
    <div class="big_vertical">
    pojsdvipdipvn
    </div>
    <div class="box">
    pojsdvipdipvn
    </div>
    </div>

    <div class="columna">
    <div class="big_vertical">
    pojsdvipdipvn
    </div>
    <div class="box">
    pojsdvipdipvn
    </div>
    <div class="box">
    pojsdvipdipvn
    </div>
    </div>

    <div class="columna">
    <div class="box">
    pojsdvipdipvn
    </div>
    <div class="big_vertical">
    pojsdvipdipvn
    </div>
    <div class="box">
    pojsdvipdipvn
    </div>
    </div>

    </body>
    </html>
    Nico
    www.albatrosland.es
    http://es.qstoms.com/crazy-dog/#
    www.secretodebellezanatural.es

    Publicado hace 12 meses
  • Avatar de viebone viebone Registrado desde 25/06/03 / Número de posts: 42
    Ostras!!! No se me había ocurrido.

    Estas anidando tres cajas dentro de una columna no??? Ummmmm

    Voy a ver como juego con esto por que mi intención es que si estiras el navegador la cuadricula tenga más columnas, de uno en uno.

    Buena idea, gracias!!!!
    Publicado hace 12 meses
  • Avatar de albatros albatros Registrado desde 11/09/07 / Número de posts: 263
    NO sé como querías plantearlo si por columnas y en cada columna metes las diversas cajas ... también puedes crearte una especia de tabla
    con los display inline table y luego los table cell etc.... depende de como quieras plantearlo

    Saludos
    Nico
    www.albatrosland.es
    http://es.qstoms.com/crazy-dog/#
    www.secretodebellezanatural.es

    Publicado hace 12 meses
  • Avatar de phpninja phpninja Registrado desde 08/01/11 / Número de posts: 103
    Puede ser que estés buscando algo como esto ?

    Masonry jquery plugin
    http://masonry.desandro.com/

    Royo pinterest.

    Las cajas ocuparan todo el ancho de la pantalla y se situarán de forma de inmediata, permitiendo diferentes alturas de las cajas, y manteniendo siempre el mismo ancho.

    Php Ninja. Programación a medida
    Skype
    contacto@phpninja.info
    www.phpninja.info
    Publicado hace 12 meses
  • Avatar de viebone viebone Registrado desde 25/06/03 / Número de posts: 42
    phpninja, es eso exactamente lo que quiero, tal cual.

    Intentaba evitar el uso de javascript, no se por que pense que lo podría conseguir con html y css unicamente.

    Es mas, si el theme que estoy utilizando usa ese plugin y yo lo he desactivado por que no coseguía dominar bien la maquetación de as cajas.

    Voy a intentar trabajar en la idea de Albatros a ver si puedo evitar el uso de javascript.

    Lo que estoy haciendo es modificar un theme de wp para añadiendo un parametro a cada post tipo: Vertical-grande, horizontal-grande, normal, poder jugar con la maquetación y destacar ciertos trabajos.

    La idea es pinterest pero un poquito más ordenado.

    Gracias a los dos, a ver si consigo sacarlo.
    Publicado hace 12 meses
  • Avatar de Cloudstudio Cloudstudio Registrado desde 05/05/09 / Número de posts: 605
    Porque no usar jquery ? sinceramente masonry es la mejor opcion para lo que quieres con diferencia.

    cloudstudio.es@gmail.com

    www.cloudstudio.es
    psd a html
    Publicado hace 12 meses
  • Avatar de viebone viebone Registrado desde 25/06/03 / Número de posts: 42
    Buenisimo el masonry!!!

    Además soy un pardillo por que el propio theme que estoy modificando lo usaba, lo que pasa que nada más cogerlo quite todo el javascript sin mirar ni siquiera lo que hacía.

    Muy recomendable para este tipo de maquetación.

    Gracias a todos!!!
    Publicado hace 12 meses