Posts Tagged ‘CSS layout’

YAML – Otro generador de Layouts CSS

Thursday, August 30th, 2007

[Vía Ajaxian]

Cada vez surgen más herramientas que pueden facilitarle la vida a los desarrolladores web a la hora de hacer sus maquetas en CSS. A rejillas como YUI Grids o Blueprint y herramientas como CSS Sculptor de Eric Meyer o Constantinology se une ahora YAML Builder, que mediante un interesante interfaz realizado en DHTML permite generar maquetas CSS de forma visual.

Imagen 2.png

Vale la pena probarlo aunque solamente sea por ver lo que algunos pueden llegar a hacer con HTML, Javascript y DOM… una herramienta muy currada.

Galería de menús hechos con CSS

Sunday, April 23rd, 2006

[Via 456 Berea Street]

En Vitaly Friedman’s CSS Showcase ver los mejores menús de navegación hechos con css y la explicación de cómo está hecho cada uno. Muy buen sitio para aprender e inspirarse. Muy recomendable.

Solución al problema de los link en IExplorer usando AlphaImageLoader en fondos con transparencia png

Friday, June 3rd, 2005

Como esta temporada se llevan las transparecias hemos empezado a utilizar el filter:progid:DXImageTransform.Microsoft.AlphaImageLoader() para tener como imagen de fondo de un div un png con transparencia, extensible o no, (próximamente lo describiremos detalladamente). Esto daba un problema muy serio de uso y es que los enlaces, input y demás elementos activos perdían toda actividad, no podíamos, seleccionar, pinchar o escribir.

Nuestro laboratorio I+D Friday I’m in blog ha descubierto una solución que por el momento ha funcionado en nuestras webs

Normas que deben seguir las capas para que no pierdan la actividad los link, input y demás elementos activos contenidos en ellas.

/* Definido el div */

#container_x {
width: 157px;
height: 28px;
padding-top: 8px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/background.png',sizingMethod='fit');
}

/*Con su correspondiente hack para Firefox */

div>#container_x {
background: url(../images/background.png) no-repeat;
}

Se debe cumplir lo siguiente:

  • La capa que tiene el filter no puede tener “position:absolute”. Por encima de ella sí se pueden poner divs con posicionamiento absoluto conteniéndola.
  • A la capa filter debe aplicarsele estilo mediante identificador id=”", con class=”" no funcionaría.
  • Los elementos activos contenidos en la capa filter deben tener definido explícitamente el atributo position a absolute o relativo.

Por ahora esto parece ser necesario y suficiente. Seguiremos informando.