Otro blog más de diseño
Nos vemos en la final
27 de Junio de 2008 por cmacias Archivado en deporte
- 6 Comentarios
- Tags: deporte
Después de haber navegado mucho buscando la versión perfecta - que pienso que no existe - yo hago mi pequeña y humilde propuesta. Yo desde luego que le voy a sacar mucho provecho. Si desde luego a alguien más le sirve y le evita tener que darle a la cabeza, otra alegrÃa que me llevo.
La idea se basa en una estrucura similar a esta
<!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>Layout al 100% de alto</title> <link type="text/css" href="layout.css" rel="stylesheet" /> </head> <body> <div id="layout"> <div id="cabecera">capa cabecera</div> <div id="lateral">capa lateral</div> <div id="contenido">capa contenido</div> <div id="pie">capa pie</div> </div> </body> </html>
Y la hoja de estilos pretende ser algo como esto, y después intento explicar el porqué y como.
html,body {
height:100%;
/* necesario para las sub-alturas */
}
body {
margin:0;
padding:0;
overflow-x: hidden;
/* Para evitar el feo scroll horizontal de explorer 7 */
background:#fff;
}
body, div, p {
font-family: verdana;
font-size:12px;
color:#000;
}
div#layout {
position:relative;
/* necesario para el posicionamiento */
margin:0 auto;
/* lo centramos, aunque no funciona para explorer 5 */
width:750px;
height:auto !important;
/* para los navegadores de verdad */
height:100%;
/* Para que explorer lo interprete como alto mÃnimo */
min-height:100%;
/* para los navegadores de verdad */
background:#f0f0f0;
}
div#cabecera {
background:#cc0000;
height: 80px;
padding:10px;
color: #fff;
}
div#lateral {
float: left;
width: 150px;
padding: 10px;
padding-bottom: 50px;
/* Este padding debe ser igual a la altura del footer */
background: #ccc;
}
div#contenido {
padding: 10px;
padding-bottom: 50px;
/* Este padding debe ser igual a la altura del footer */
margin-left: 170px;
/* 150px del ancho del lateral
más 20px del padding del mismo */
background: #eeeAA0;
}
div#pie {
position:absolute;
width:730px;
/* 750px del ancho del layout menos 20px del padding */
height: 30px;
padding:10px;
color: #fff;
bottom:0;
/* lo encajamos al fondo de todo */
background:#006699;
}
Lo primero de todo es permitir alcanzar un 100% de altura a la entidad más importante de la estructura, y en este caso me refiero a las etiquetas <html> y <body>, por lo que les damos una altura del 100%.
Acto seguido a la capa “layout” que es la que va a contener el resto de elementos, la posicionamos de forma relativa. Esto nos permite posicionar otros elementos con respecto al contenedor principal, es decir, a la capa “layout“. Después le aplicamos el famoso truco dándole un mÃnimo de altura del 100%, altura automática declarándola como !important, y para hacerlo compatible con los navegadores de mentira, volvemos a declarar la altura al 100%. Esto evidentemente no anula la altura anterior para los navegadores buenos, ya que hemos puesto el !important.
La cabecera y las columnas contenido y lateral, no tienen nada fuera del otro mundo, a no ser un “padding-bottom” que es igual a la altura de nuestro footer. Esto se debe a que el footer lo posicionamos de forma absoluta, a 0px del fondo (bottom:0px;) por lo que siempre estará pegado al fondo y puede llegar a tapar con su altura parte del texto de las capas citadas.
Espero haberme explicado del porqué de determinados estilos, aunque como dice un conocido
No me enteré de lo que dijo, pero si funciona me vale
Pués eso. Solo apuntar para terminar, que las capas lateral y contenido no se estiran con el resto del layout - eso serÃa otra historia. Lo que pretendÃa con este tutorial era que el footer se mantenga siempre abajo de todo e independiente del tamaño de la ventana y del contenido del mismo, que se mantuviera igual.
Alguien me preguntaba por la mañana si esto sirve para el caso en que el lateral necesite tener un color de fondo que alcance hasta el footer. Mi respuesta es si. Simplemente crearÃamos un fondo del ancho deseado, y lo colocarÃamos de fondo en la capa layout repitiéndose verticalmente.
- 4 Comentarios
- Tags: css, xhtml
Layout web 100% de alto css
26 de Junio de 2008 por cmacias Archivado en css, javascript, pataletas, personalEl tÃtulo del post es muy representativo de una búsqueda cualquiera en google de algo similar.
Me hacen mucha gracia las reuniones de las “instituciones” o “individuos” que tratan de modernizar las tecnologÃas como html y css, y todos los post relacionados que piden cosas de las que realmente podemos prescindir, y de las que llegamos a ellas por otras vÃas - pienso - más lógicas, como integrar javascript con css, variables en las css, y un largo etc.
Y digo yo, por que no reunirse para cosas más lógicas y necesarias como por ejemplo poder jugar con medidas en tantos por cien y la posibilidad de poder restarle valores absolutos ?
Yo verÃa muy lógico el poder darle una vuelta de tuerca a todo esto, y poder llegar a algo como
#header { height: 150px; }
#content { height: 100%-250px; }
#footer { height: 100px; }
Creo que eso es bastante más útil que otras cosas que realmente pienso que no sirven más que para acarrearnos más problemas. Quién no se ha peleado con un layout y ha tenido que tirar finalmente de javascript porque lo que pretendÃa hacer no era posible sólo con css ?
Después está el tema del famoso ACID test. Tanta cosa para poder llegar al 100%. No será más fácil hacer propuestas - ellos que pueden - para conseguir cosas útiles ? No voy a ser yo - entre otras cosas - el que vaya a hacer una web con un smiley compuesto de formas ilógicas de encontrar en una web.
En fin, lo que en principio iba a ser un post para hacer mi propuesta de layout al 100% de alto, se convirtió en una pequeña pataleta fruto de la pelea que mantuve anteayer con una interface rebelde e “imposible” de hacer sin javascript - por lo menos si la querÃa hacer compatible con “otros” navegadores.
Y no voy a seguir, sinó pedirÃa una orden de alejamiento para los programadores de explorer. Calla, calla, que te pierdes.
- 0 Commentarios
- Tags: css, javascript, pataletas
Encuentro internacional de la ICANN
25 de Junio de 2008 por cmacias Archivado en asociaciones, internet
Si hace unos dÃas hablaba de la Asociación PuntoGal, en Código Cero, comentan que desde el 22 de este mes y el 26 se organiza en ParÃs el encuentro internacional de la ICANN, en el que tratarán de discutir el futuro de los dominios de internet, y que probablemente como comentan serán aprobados nuevos dominios de primer nivel.
Y uno de esos dominios aprobados con una poca de suerte puede ser el tan ansiado .gal.
También destacan (por si alguno no entiende el Gallego) que a partir del primer trimestre del 2009, los usuarios podremos registrar dominios del tipo .amor, .odio, o nombres propios.
[ Código Cero ] [ ICANN ]
- 0 Commentarios
- Tags: asociaciones, internet
+Leche +Salud, es una campaña del Aula de Productos Lácteos de la Universidad de Santiago de Compostela, participado por un montón de empresas e instituciones (a pesar de que al final, los que menos cobran son los que hicieron el 98% del trabajo).
Esta campaña pretende promocionar el consumo de leche para los más pequeños y porque no, también entre los grandes.
Para esto y entre otras cosas han lanzado su página web (Adivinad quién participó en ella ?). Es por eso, que os presento a su mascota, Galactea, la cuál fué creada por mà a excepción de la tipografÃa que fué obra de Susana López. Seguro que no acertáis lo que es ni en un millón de años.
La estructura de la web fué hecha en su totalidad con Php+MySQL+Scriptaculous+Prototype, al margen de los juegos y algún detalle más que se generó desde flash.
Y bueno, que si, que es probable que en Explorer haya algún fallo, pero con el tiempo con el que contamos, es un milagro que esté Online. Y de eso algunos pueden dar fé.
Por cierto, también le di voz a una de las mascotas que componen la leche. Quién seré ?
[ +Leche +Salud ]
- 0 Commentarios
- Tags: personal, webs
Bill Gates y la fotografÃa de Alburquerque
24 de Junio de 2008 por cmacias Archivado en curiosidades, so'sLeÃa en Código Cero un artÃculo sobre la retirada paulatina de Bill Gates, y de como habÃa querido recrear aquella famosa fotografÃa de 1978 del equipo de Microsoft. Hasta ahà todo normal (lo cual no quiere decir que lo que diga a continuación no sea normal).
El caso es que cuando me dispongo a comparar el antes y después, de como pasan los años por la gente, me doy cuenta de que algo no me cuadra. En la foto de 1978 hay 9 hombres y 2 mujeres. En la actual, 8 hombres y 3 mujeres. Cierto es que a alguien le cambio mucho la vida. Quién es quién ?
- 5 Comentarios
- Tags: curiosidades, so's, software
se rompió el maleficio
22 de Junio de 2008 por cmacias Archivado en deporte
- 2 Comentarios
- Tags: deporte
Del dicho al hecho, hay un trecho
20 de Junio de 2008 por cmacias Archivado en diseño
Qué conste que fué él el que pidió que lo difundiéramos.
Impresionante tutorial de un monstruo del diseño como es Armando Sotoca, aka Skeku en Criterion y 2Flash2Furious, dos de las webs que sigo a diario, de las que se puede aprender mucho y que además recomiendo.
Difundido queda y enhorabuena por el tutorial !!
[ criterion ] [ 2fast2furious ] [ tutorial ]
- 2 Comentarios
- Tags: diseño
Que tiempos aquellos …
19 de Junio de 2008 por cmacias Archivado en personalRecuerdo que por aquel entonces - Agosto de 1997 - empezaba mi andadura en internet. Acostumbrado al papel, al olor de imprenta, al tacto de los fotolitos y a sacar el vinilo cortado del plotter, entraba en un mundillo totalmente distinto y al mismo tiempo ilógico, quien iba a querer una web, si nadie tenÃa internet en su casa !!
Recuerdo que para entrar en “aquella empresa” - que a dÃa de hoy sigue funcionando - tuve que hacer una web de prueba. Total, que me cogà un manual de html, el composer de NetScape y voilá, mi primera web, que ni que decir tiene, que cualquier parecido con lo que se hace hoy en dÃa - si obviamos el diseño - es mera coincidencia.
Recuerdo también al flash 2 - y su ejemplo del pizzero - y mis primeros pinitos con photoshop 3.5 orientándolo a la web, y el Microsoft Image Composer (que bueno era), y como no el FrontPage.
Entonces éramos felices. Diseñábamos solo para Explorer, - con excepción de algunas empresas que pagaban el diseño para NetScape - habÃan pocas reglas para las css, y los applets de java “molaban” y para todos el javascript era el hermano pequeño de java.
Sólo necesitábamos un ordenador, un photoshop y un frontpage. TenÃamos la mesa con mucho espacio libre - a menos que te llevaras mal con el orden - y aunque tener que conectarte con la rdsi cada vez que querÃas bajarte el correo o subir una página - habÃa que ahorrar - era un lÃo, aprovechabas al máximo cada segundo conectado.
11 años después, el “negocio” ha cambiado mucho. No voy a contar nada que no sepais o que no estemos pasando. Estándares, navegadores, css2 y 3, dhtml, xhtml, frameworks, svn y un largo, largo etcétera. Hemos evolucionado mucho, somos más completos y nos comunicamos más que antes con los blog, pero, realmente somos felices asà ?
- 2 Comentarios
- Tags: personal
Al final conseguà descargármelo. Y que no fuera por intentarlo, debido a los problemas técnicos que según parece tuvieron las webs de la fundación Mozilla.
Lo único memorable, es que los Gallegos podemos disfrutar de Firefox 3 en Gallego a modo de paquete. Y digo único memorable, porque parece ser que según código cero, esta versión que tanto ansiábamos y que al final nos hemos descargado, no es más que una copia de la RC2/RC3, y que la versión final se prevée para el 25 de Julio.
- 30 Comentarios
- Tags: firefox, software
- Posts (RSS)
- Commentarios (RSS)
Sobre este blog
Qué puedo decir de mi que no se haya dicho ya antes.
![[Q]interactiva](http://www.cmacias.com/images/qinteractiva.gif)