Posts etiquetados ‘css’

Tip – Trick – CSS – Overflow

Publicado: febrero 4, 2008 en css
Etiquetas: , , ,
2

La propiedad overflow se muestra cuando el contenido sobrepasa el area del elemento contenedor. Tiene los siguientes posibles valores:

visible: Valor por defecto. El contenido no es recortado. Se visualiza fuera del elemento.

hidden: El contenido es recortado, pero el navegador no muestra una barra de desplazamiento para ver el resto del contenido.

scroll: El contenido es recortado, y el navegador muestra una barra de desplazamiento para ver el resto del contenido.

auto: Si el contenido es recortado, el navegador deberia mostrar una barra de desplazamiento para ver el resto del contenido.

Bueno pues también podriamos definir la propiedad overflow tanto horizontal como verticalmente.

overflow

Entonces podriamos definir cuando queremos que el navegador nos muestre la barra de desplazamiento:

overflow_xoverflow_y

La propiedad overflow esta soportado para Internet Explorer, Firefox, Safari y Opera

pero las propiedades overflow-x y overflow-y estan soportados en Internet Explorer, Firefox, Safari.

Incluso Opera no sólo no la soporta sino que actúa como sino hubieses puesto overflow, tener cuidado con eso.

Enlaces de referencia:

http://www.quirksmode.org/css/overflow.html

http://www.w3schools.com/css/pr_pos_overflow.asp

Como migrar aplicaciones desde Internet Explorer a Firefox

Publicado: noviembre 30, 2007 en Firefox, internet explorer, XML / XSL
Etiquetas: , , , , , ,
0

Hay un interesante articulo publicado por Mozilla Developer Center (MDC) acerca de las diferencias más conocidas y menos conocidas entre estos 2 navegadores, hay secciones sobre visualización de las páginas, CSS, javascript, manejo de eventos, XML, etc. Aunque yo recomiendo leer por completo el articulo por ser de interes de todo desarrollador web, copio un par de fragmentos:

Modo quirks

Actualmente, el web está plagado de sitios con HTML no válido, además de marcado que sólo funciona gracias a fallos de ciertos navegadores. Los antiguos navegadores de Netscape, cuando eran los amos del mercado, tenían fallos. Cuando desembarcó Internet Explorer, plagió esos mismos fallos para poder visualizar correctamente las páginas de aquella época. Más tarde cuando los nuevos navegadores llegaron al mercado, la mayoría de estos fallos originales, usualmente llamados quirks, fueron mantenidos por razones de compatibilidad hacia atrás. Mozilla soporta muchos de estos fallos cuando visualiza páginas en modo quirks. Nótese que debido a estos quirks, las páginas se visualizan más lentamente que si estuvieran escritas para respetar los estándares. La mayoría de las páginas web son visualizadas utilizando este modo. Mozilla utiliza este modo cuando encuentra las siguientes condiciones:

* Cuando no se ha especificado un doctype.
* Cuando se ha especificado un doctype sin su identificador de sistema (por ejemplo, <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”></code>)

Diferencias en las fechas de JavaScript

La única diferencia en el objeto Date es el método getYear. Para la especificación ECMAScript (que es la que sigue JavaScript), el método no es compatible con el efecto 2000 y al ejecutar new Date().getYear() en 2004 se obtendrá un valor igual a “104″. Para la especificación ECMAScript, getYear devuelve el año menos 1900 lo cual devolvía “98″ para 1998. getYear quedó obsoleto en la versión 3 de ECMAScript y fue reemplazado por getFullYear. Internet Explorer cambió la implementación de getYear para que funcionara como getFullYear y fuese así compatible con el efecto 2000, mientras que Mozilla mantuvo el comportamiento estándar.

Diferencias en XSLT

Si el XSLT necesita distinguir el navegador, se puede consultar la propiedad de sistema “xsl:vendor“. El motor XSLT de Mozilla devolverá “Transformiix” mientras que Internet Explorer devolverá “Microsoft”.




<!-- Marcado específico de Mozilla -->





<!-- Marcado específico de Internet Explorer -->

Por cierto yo recomiendo echarle un ojo a la web de Mozilla Developer Center que esta nutrida de información interesante e infaltable en tus favoritos.Artículo Completo:
http://developer.mozilla.org/es/docs/Migrar_aplicaciones_desde_Internet_Explorer_a_Mozilla

Mozilla Developer Center (en castellano):
http://developer.mozilla.org/es/docs/Portada

Mozilla Developer Center (en castellano), Categoría: Desarrollo Web:
http://developer.mozilla.org/es/docs/Categor%C3%ADa:Desarrollo_Web

Menus CSS – 13Styles – Menus de navegación de alta calidad para tu website

Publicado: noviembre 26, 2007 en css
Etiquetas: , , ,
0

13 Styles es una página donde encontraras un listado de Menus CSS, según dicen de alta calidad, como por ejemplo:

13styles css vert-one menu
Vert-one

13styles css saturday menu
Saturday

13styles css dolphin menu
Dolphin

13styles css fox menu
Fox

http://www.13styles.com/

13 Impresionantes Menus CSS Javascript

Publicado: noviembre 21, 2007 en General
Etiquetas: , , , ,
0

Desde Noupe llega este articulo, aqui muestro algunos menus, el listado completo de los menus en el articulo original

Sexy Sliding Menu (2 versiones utilizando mootols ó script.aculo.us)
Sexy Sliding Menu

FastFind Menu Script (css y ajax)
FastFind Menu

Webber 2.0 dock menu
Webber 2.0 Dock Menu

LavaLamp JQuery Sliding Menu (utilizando el JQuery)

Menu Mootols con Accordeon and Effects
mootools menu

Visto en:
http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html

Tip – Trick – CSS – Como centrar un objeto exactamente en el centro de la ventana

Publicado: noviembre 21, 2007 en css
Etiquetas: , ,
1

Este Tip CSS es como bien dice el titulo centrar un objeto html (img, table, div, etc) en el centro de la ventana.

Si asumimos como ejemplo que nuestro objeto tienen un ancho de 200px y un alto de 100px, pues el tip CSS se reduce a asginar las siguiente clase:

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
}

Donde margin-top toma el valor de la mitad del valor del alto del objeto, y el margin-left la mitad del valor del ancho del objeto a centrar, pero como bien dice Elías Notario en Xiberneticos, para internet explorer 6 faltaria hacer un CSS hack:

*html .centered {
    position:absolute;
}

Noticia Original:
http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Visto en:
http://xyberneticos.com/index.php/2007/11/14/centrando-en-el-centro/

Entradas más antiguas