css - Fixed-Fixed-Fixed Layout para 960.gs
grid fluid-layout (1)
El motor de nuestro sitio web utiliza un sistema de grilla 960.gs y estoy intentando modificarlo a 3 columnas Fijo (100px) -Fluido (máximo a ancho) -Fijo fijo (100px). Desafortunadamente, todos los generadores en línea 960.gs hacen cuadrículas completas o completas o fluidas. Así que estoy intentando modificar la grilla de fluido completo originalmente generada a esta vista:
<------------100%--------------->
======== =============== ========
| fixed| |max to screen| |fixed |
======== =============== ========
<-100px> <-100px>
El código (después de la modificación): http://jsfiddle.net/vZm8x/
- Problema 1) No estoy seguro de cómo hacer que el área de contenido central sea máxima a la izquierda en la pantalla. Porque ancho: automático; no funciona en absoluto, ancho: 100% simplemente envolviendo divs.
- Problema 2) después de que se haya fijado a 100px todo div, continúa envolviendo cualquier cosa. (pantalla: en línea, no ayuda a ninguna idea?)
Mi pregunta es: ¿es posible modificar la plantilla 960.gs de acuerdo con nuestras necesidades? En caso afirmativo, ¿me das algún consejo para solucionar los problemas? ¡Gracias de antemano!
Con columnas laterales de ancho fijo, en realidad es muy fácil. Te conviene usar flotadores y es posible que necesites hacer un truco de columnas falsas , según tus necesidades específicas de diseño.
Querrás algo como:
<div class="left"></div>
<div class="right"></div>
<div class="middle">Content</div>
y:
div {
/* border-box, to make sure "width" is our intended width */
-moz-box-sizing: border-box; /* Firefox still uses prefix */
box-sizing: border-box;
}
.left {
float: left;
width: 100px;
background: #f00;
}
.right {
float: right;
width: 100px;
background: #00f;
}
.middle {
width: 100%;
padding: 0 100px;
background: #ccc;
}
Véalo en acción aquí (esto es sin el efecto de columna falsa, pero debería darle un punto de partida). Si cambia el ancho de la sección con el resultado, verá que las columnas permanecen y el contenido permanece dentro de los límites de las columnas externas.
La columna de contenido debe ser la última porque todavía está en el flujo de documentos, por lo que la columna de la derecha terminaría debajo del contenido.
Alternativamente, puede usar position: absolute; en tus columnas laterales con algo como esto:
.wrapper {
position: relative; /* Constrains the columns within their parent. Not needed if parent is <body> */
}
.left {
position: absolute;
top: 0;
left: 0;
}
.right {
position: absolute;
top: 0;
right: 0;
}
.middle {
padding: 0 100px;
}
div {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Estos trucos funcionarán en IE8 +, Firefox, Chrome, Safari y Opera. IE7 puede tener problemas debido al uso del modelo de cuadro W3C ("cuadro de contenido") y no reconoce el CSS de box-sizing , pero hay algunos trucos para que funcione si lo necesita. IE6 debería estar bien, porque usa el modelo de caja basado en "border-box" de forma predeterminada. (Es posible que necesite jugar con z-index para que IE se comporte. Si es así, configure .middle{ position: relative; z-index: 1} y agregue z-index: 2 a las columnas izquierda y derecha).
La position: absolute truco position: absolute tiene la ventaja sobre el float en que las barras laterales pueden aparecer antes o después del div de contenido, lo que lo convierte en la opción potencialmente más semántica.
El motivo de este trabajo es porque a) sus columnas laterales están fijas, por lo que simplemente ajustamos el relleno al ancho de esas columnas, yb) position: absolute y float: [left/right] saca los elementos del flujo de documentos, lo que significa que, en lo que respecta al documento, no están allí y no ocupan espacio. Esto permite que otros elementos se muevan hacia donde solían estar esos elementos, superponiéndolos uno encima del otro.