Seguro que alguna vez te has visto en problemas para mantener el pie de tus páginas en su sitio, abajo del todo. Ya vimos, en este mismo blog, una aproximación que nos permitía conseguir que los pies de página se mantuviesen en su sitio. No obstante, aquella solución nos obligaba a emplear atributos de estilo propietarios y no válidos.
Ryan Fait llega a otra solución que, en lugar de requerir etiquetas no válidas, requiere un div extra y poco más.
El CSS es algo tan simple como:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em; /* el margen inferior es el valor del pie en negativo */
}
.footer, .push {
height: 4em; /* .push y .footer deben tener la misma altura*/
}
Pero lo mejor es que veáis el ejemplo y echéis un vistazo al código.
Mañana se “celebra” el día del desnudo integral en internet, lamentablemente no se trata de mostrar el serrano cuerpo de bloggers y webmasters si no de atreverse a mostrar tu sitio sin hoja de estilo (je, a ver cuantos nos llevamos una sorpresa).
Webmaster Libre se suma este año al despelote (y no solo por el PR 7 de la página) y mañana os recibirá a todos como si hubiesemos vuelto atrás unos cuantos años en el tiempo, antes de que nuestro querido CSS hiciese furor.
En la página del CSS Naked Day tenéis más información y unos cuantos enlaces a plugines y funciones que os ayudarán a automatizar la tarea…
Un consejo, aprovechad la estupenda extension de Firefox Web Developer para comprobar como andan de código vuestros sitios si no queréis llevaros un susto jeje…
En HTML disponemos de una forma estándard de crear tooltips (pequeñas ventanas emergentes con texto adicional que aparecen al pasar el ratón sobre los elementos que disponen de un atributo title). Estos tooltips, no obstante, están muy limitados: solo pueden contener un número reducido de caractéres y no podemos controlar su aspecto.
Vamos a crear, en un par de pasos, unos tooltips personalizables que podremos aplicar a cualquier elemento (salvo las imágenes).
Para empezar, necesitamos corregir un error de Internet Explorer que sólo admite la pseudo-clase :hover en elementos a. Para ello es necesario descargar csshover.htc e incluirlo en nuestros sitios mediante un comentario condicional entre las etiquetas <head>
<!--[if IE] >
<style type="text/css">
body {behavior: url(csshover.htc);}
</style>
<![endif]-->
El funcionamiento del script es muy sencillo: buscaremos en el documento los elementos que tengan la clase jsttip y, si estos tienen un atributo title con contenido, crearemos un span hijo donde introduciremos el contenido de ese atributo title.
/* Esta función nos permite obtener todos los elementos marcados con una clase
Written by Jonathan Snook, http://www.snook.ca/jonathan
Add-ons by Robert Nyman, http://www.robertnyman.com
*/
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/-/g, "\-");
var oRegExp = new RegExp("(^|\s)" + strClassName + "(\s|$)");
var oElement;
for(var i=0; i
Y, por fin, el CSS y ya tendremos tooltips
La auténtica mágia de estos tooltips está en el CSS
.jsttip{/* Cambiamos el cursor por uno más significativo */
cursor: help;
}
a.jsttip {cursor: pointer;} /* Evitamos que cambie el cursor en los enlaces */
.jsttip:hover {position:relative} /* Importante */
.jsttip span {display: none;} /* Ocultamos el span hasta que es su momento */
.jsttip:hover span { /* Creamos el tooltip */
z-index: 100; /* Lo posicionamos por encima de todas las capas */
position: absolute; /* Lo posicionamos respecto a su padre */
top: 1.5em;
left: 2em;
display:block;
padding: 1em 1.2em;
background: #fff url(info.png) no-repeat;
width:15em;
border:1px solid #003170;
color: #003170;
font-size: 0.9em;
}
Para usarlo sólo tendréis que dar al elemento que sea una clase jsttip y escribirle un buen atributo title
<a href="link.htm" title="Escribe cosas que valga la pena leer" class="jsttip">Enlace</a>
Os he dejado unos ejemplos muy sencillos y un zip por si preferís descargar el script en lugar de copiarlo
A través de Ajaxian descubro un fantástico script Javascript con un poco de CSS, de Lalit Patel que nos permitirá detectar las tipografías instaladas en los equipos de los visitantes de nuestras páginas.
Este script funciona gracias al simple principio de que cada caracter aparece de forma diferente en cada tipografía. Por tanto, tipografías diferentes ocuparán diferente anchura y altura. Esto puede abrir amplias posibilidades a los desarrolladores de aplicaciones web y, en general, a los diseñadores.
Funciona en Firefox 2, Internet Explorer 6+ y Opera 9
A través de 456 Berea St encuentro un interesantisimo artículo de Andy Rutledge que trata de explicar, de una vez por todas, a los diseñadores gráficos por qué los estándares no son el enemigo de su creatividad: Web Misunderstandars.
Sin duda, algo que hay que repetir más: Los estándares no tienen nada que ver con el diseño. Cualquier cosa que pueda ser representada gráficamente puede representarse en internet sin tener que incumplir ningún estándar.
…if there is something you cannot do with design online it’s because of your ignorance or lack of skill, not because of Web standards.
…si hay algo que no puedas hacer con un diseño online es por culpa de tu ignorancia o falta de habilidad, no por culpa de los estándares web
Me encuentro en Windows Skills (que título más poco atractivo) con un par de videotutoriales sobre maquetación sin tablas creados por Douglas Bowman y me ha parecido interesante dejaroslos por aquí por si os apetece echarles un vistazo.
Eso si, están en perfecto inglés:
Este artículo es la traducción de Safe List Next With Left-Floated Elements escrito por Grand Schtroumpf:
El otro día le prometía a NeKronos hablar de los elementos en línea y en bloque en HTML. Empecé a escribir y, al buscar en Google alguna referencia, me encontre con la traducción de tres artículos de Tommy Olson sobre el tema, así que, ya que tanto los artículos como las traducciones son excelentes, prefiero dejaros aquí los enlaces para que lo leáis:
Una de las excusas más extendidas entre los diseñadores web para no utilizar unidades relativas de medida, como em, es la aparente falta de control que tienen sobre las dimensiones finales de su trabajo.
Para ellos viene hoy esta herramienta, em calculator creada por Piotr ‘Riddle’ Petrus . Con ella podrás convertir medidas en píxeles a em de una forma sencilla y clara, permitiéndote además calcular las medidas de elementos adyacentes o hijos (donde el uso de medidas relativas puede producir efectos no deseados si no tomamos en cuenta el tamaño del elemento padre)
em calculator: http://riddle.pl/emcalc/
El WaSP ha anunciado hoy la creación del International Liaison Group, un grupo que surgió de una iniciativa de Molly y que ha crecido hasta convertirse en un grupo independiente capitaneado por dos mujeres Glenda Sims y Steph Troeth.
La misión del ILG es convertirse en un grupo de trabajo mediante el que compartir progresos y recursos entre desarrolladores, de una forma inclusiva e internacional o como se presenta en la página web del grupo:
El Grupo de Enlace Internacional (ILG en inglés) del WaSP (Web Standards Project) es un colectivo internacional de profesionales de internet que promueven el uso global de los estándares para asegurarnos una Internet igualitaria.
Via Juicy Studio.
Anuncio oficial (traducción al castellano): http://www.webstandards.org/2007/02/01/20070201-es/
International Liaison Group: http://www.webstandards.org/action/ilg/
Alojado en RedCoruna Hosting
¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información
El principal motivo por el que no recomiendo utilizar Smarty es porque el propio PHP tiene una sintaxis embebida, lo que permite utilizarlo sin más para escribir plantillas web.
Guerra Creativa es una comunidad para Creativos. Nosotros te proporcionamos el campo de batalla y el armamento para conquistar el mundo creativo. A través de concursos de diseño web y de logos, l…
Con este Ebook puedes tener un sitio web con hospedaje y domino gratis, ademas de un CMS gratis, no debes registrarte en nada, lo unico que debes hacer es luego de leerlo compartirlo, regalarlo, si…
Lista de 32 sitios para descargar imagenes gratis, es una recopilacion de no uno ni dos sino 32 Bancos de Imagenes
Post para aprender a descargar las conocidas librerías de Evermotion para diseñadores que trabajan con 3Ds Max.
¿Qué medidas de seguridad se tienen en cuenta en el momento de implementar una subida de archivos en PHP?
¡Hola!
El componente Auth del framework CakePHP guarda las páginas en la memoria cache de IE7 (o eso es lo que creo haber entendido).
Para que no lo haga, he añadido los campos Ca…
Theresa Neil realizó un extraordinario análisis de 12 diseños estándar de interfases web como parte de su libro Diseñando Interfases Web: Principios y pautas para la interacción
50 herramientas extremadamente útiles para PHP
Tendencias de diseño de botones de ”llamada a la acción”
Ver más noticias de los usuarios