Foros del Web » Creando para Internet » CSS »

Maquetanción modular con 960gs, ciertas configuraciones

Estas en el tema de Maquetanción modular con 960gs, ciertas configuraciones en el foro de CSS en Foros del Web. Hola amigos! Para un diseño que me han pasado tengo que usar un modulo de 190x190, con separación de 2px, un rectangulo base de 3x5 ...
  #1 (permalink)  
Antiguo 25/05/2011, 19:04
 
Fecha de Ingreso: mayo-2007
Mensajes: 7
Antigüedad: 17 años, 7 meses
Puntos: 0
Pregunta Maquetanción modular con 960gs, ciertas configuraciones

Hola amigos!

Para un diseño que me han pasado tengo que usar un modulo de 190x190, con separación de 2px, un rectangulo base de 3x5
Vean a la izquierda el modulo base... y a la derecha algunas variantes...:


Se me ocurrió que estaría bueno utilizar algún framework css de diseño mediante grillas (rejilla, para los del otro lado del charco)
El tema es que no sé bien cómo, o si es realmente posible, crear un modulo que ocupe 2 alturas de modulo, o más si hace falta... y sin desplazar los contenidos de abajo, claro!

Que este posible modulo "ampliado" se estire a lo ancho, 2 3 o los modulos que sea, es bien simple claro... pero cómo lograr modulos como los de la derecha del boceto... usando 960gs?
Se puede?

Lo que probé fue darle un height de 182px... pero claro, me separaba lo de abajo, y quedan unos huecos (de la altura de 1 modulo)... :(

O qué me recomiendan?
  #2 (permalink)  
Antiguo 25/05/2011, 19:56
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 6 meses
Puntos: 269
Respuesta: Maquetanción modular con 960gs, ciertas configuraciones

Suponiendo que quieres lograr algo con la siguiente forma
__________
|_|_|_|.......|
|_|_|_|.......|
|_|_|_|____|

El anidamiento sería algo así:
Código HTML:
Ver original
  1. <div class="container_xx"> <!-- contenedor principal-->
  2. <div class="grid_xx"> <!-- columna izquierda con 9 bloques internos (3*3)-->
  3. <div class="grid_xx"></div> (9 divs de estos, al final pones un clear.)
  4. </div>
  5. <div class="grid_xx"></div><!-- columna derecha -->
  6. <div class="clear"></div>
  7. </div>

luego te fijas según el diseño si necesitas usar alpha y omega.

Los grids_xx en 960grid están flotados por lo tanto solo se acomodarán (los 9 divs) en 3 por fila. Siempre y cuando des el ancho adecuado.

Te comparto dos links, donde explican muy fácil como trabajar con 960grid:
http://www.desarrolloweb.com/manuale...id-system.html
http://www.desarrolloweb.com/articul...-cabecera.html (este tiene videos)

Saludos.
  #3 (permalink)  
Antiguo 25/05/2011, 22:09
 
Fecha de Ingreso: mayo-2007
Mensajes: 7
Antigüedad: 17 años, 7 meses
Puntos: 0
Respuesta: Maquetanción modular con 960gs, ciertas configuraciones

Ahh, ajá, buenos datos... el 1er manual lo había bajado, pero no leído con detenimiento...
Igual me parece que en mi caso la cosa medio se complica porque los contenidos de modulos "ampliados" son fijos... y también sobretodo, en algunos casos, le aparecerían modulos por abajo y a la derecha (estaría al como al medio el modulo ampliado...) y estos tendrían que seguir la rejilla general...
mmmmm, mañana con más tiempo y ganas me pongo a hacer pruebas! ejejej

Gracias por los datos, veremos que sale

Etiquetas: 960, 960gs, grid, system
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




La zona horaria es GMT -6. Ahora son las 20:27.