En esta serie de 15 videos,se muestran los aspectos básicos de jquery.
Realmente es una buena colección que vale la pena ver
domingo 5 de abril de 2009
domingo 14 de diciembre de 2008
CSS liquid faux coumns - columnas en css con diseño liquido y sin imagenes
Tal como lo ves, es posible crear columnas faux en CSS con un diseño liquido y sin utilizar imágenes.
El truco radica en tener una capa "padre" y dentro de esa capa colocar las dos nuevas capas que maquetan el contenido en 2 o mas capas; se tiene que poner un color de fondo para la capa "padre" y un color de fondo diferente en tan solo una de las capas de las columnas, esto hará que parezca que la columna que no tiene color en verdad tiene el color de la capa "padre" y listo, eso es todo :-).
Lo voy a explicar con mas detalle:
Necesitamos una capa contenedora:
Dentro de esa capa debemos tener nuestras otras dos capas, la que representa la columna de la izquierda y la que representa la columna de la derecha:
La idea es que a la capa contenedora (padre) le asignemos un color de fondo (en este caso #0000FF) y una (y solo a una) de las capas restantes le asignamos otro color de fondo (en este caso sera "columna_izquierda" y el color será #FF0000):
#padre{
background-color=#0000FF;
}
#columna-izquierda{
background-color=#0000FF;
width=20%;
}
#columna-derecha{
width=80%;
}
El aplicar estos estilos hará que la columna de la izquierda sea de un 20% del ancho de la ventana del navegador y que la columna de la derecha sea de un 80% del ancho de la ventana del navegador.
Sin embargo, esta tecnica tiene un limitante muy grande: solo funciona si la capa de la columna izquierda (que es la que tiene el color) es mas grande que la capa de la columna derecha.
Pero en mi caso, que el menu con que dispone mi proyecto es mínimo, lo que hice fue invertir la capa que contiene el color (puse la capa de la derecha, ya que es la mas grande), de esta forma siempre parece que las dos columnas tienen el mismo ancho.
El truco radica en tener una capa "padre" y dentro de esa capa colocar las dos nuevas capas que maquetan el contenido en 2 o mas capas; se tiene que poner un color de fondo para la capa "padre" y un color de fondo diferente en tan solo una de las capas de las columnas, esto hará que parezca que la columna que no tiene color en verdad tiene el color de la capa "padre" y listo, eso es todo :-).
Lo voy a explicar con mas detalle:
Necesitamos una capa contenedora:
Dentro de esa capa debemos tener nuestras otras dos capas, la que representa la columna de la izquierda y la que representa la columna de la derecha:
La idea es que a la capa contenedora (padre) le asignemos un color de fondo (en este caso #0000FF) y una (y solo a una) de las capas restantes le asignamos otro color de fondo (en este caso sera "columna_izquierda" y el color será #FF0000):
#padre{
background-color=#0000FF;
}
#columna-izquierda{
background-color=#0000FF;
width=20%;
}
#columna-derecha{
width=80%;
}
El aplicar estos estilos hará que la columna de la izquierda sea de un 20% del ancho de la ventana del navegador y que la columna de la derecha sea de un 80% del ancho de la ventana del navegador.
Sin embargo, esta tecnica tiene un limitante muy grande: solo funciona si la capa de la columna izquierda (que es la que tiene el color) es mas grande que la capa de la columna derecha.
Pero en mi caso, que el menu con que dispone mi proyecto es mínimo, lo que hice fue invertir la capa que contiene el color (puse la capa de la derecha, ya que es la mas grande), de esta forma siempre parece que las dos columnas tienen el mismo ancho.
martes 18 de noviembre de 2008
Otra vez
Estoy aqui, sin hacer nada, mirando el monitor y pensando en ser rico, jeje.
Les dejo la direccion de otro de mis blogs:
ok ;-)
Suscribirse a:
Entradas (Atom)
