La solución a este problema es sencilla, pero primero hay que explicar un poco del funcionamiento del reproductor de flash.

Los diferentes modos
A partir de la versión 6 del reproductor, Macromedia (ahora Adobe) introdujo lo que se le conoce como el wmode, este parámetro le dice al reproductor de que forma pintar el contenido de la película, existen tres modos.

Window es el modo por default, utilizando este modo el reproductor optimiza el dibujado, lamentablemente con este modo seleccionado la animación siempre esta sobre todos los demás objetos del sitio.

Opaque permite el manejo de la propiedad z-index, pasando el control del dibujado al explorador, de esta manera es posible poner elementos sobre las animación flash.

Transparent permite poner transparente el fondo de la película, y a su vez nos permite manipular la pila del orden, se recomienda utilizar el modo anterior a este si no es necesario poner transparencia al fondo de la animación.

La solución
Con esto en mente el código para insertar una película flash que pueda ser manipulada en la pila del orden quedaria de la siguiente manera.

Es importante mencionar que únicamente se le agrega este parámetro al codigo generado por flash.

Y dentro de la etiqueta <embed> se le agrega esta propiedad


wmode="transparent"


Con esto es suficiente para solucionar este pequeño y molestoso bug.

Referencia
http://kb.adobe.com/selfservice…sliceId=2

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Este error solo se provoca en IE6, los demás exploradores muestran el documento correctamente, interesante no?

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Una vez escrito tu documento XHTML, semánticamente correcto, viene el siguiente paso, el cual es maquetar el sitio, o en otras palabras ponerle el diseño, para esto te auxilias en la técnica de remplazo de imágenes para cambiar un texto por una imagen, permitiendo accesibilidad a un mayor grupo de visitantes.

A continuación voy a mostrar diferentes métodos para aplicar esta técnica de remplazo de imágenes, pero antes tengo que mencionar que el remplazo de imágenes permite tener una buena accesibilidad a los usuarios, como a los buscadores, y he aquí lo interesante, que al tener accesible tu sitio, a los buscadores les agrada y ten por seguro que indexarán tu sitio rápidamente.

Classic FIR
Esta técnica fue propuesta por Doug Bowman’s , la cual consiste en agregar la etiqueta <span> al texto, para después ocultarla. Es una técnica muy sencilla, pero no es recomendada, pues si el usuario tiene deshabilitado el uso de imágenes y css activado, simplemente no verá nada. El código para esta técnica es el siguiente.

/* css */
#header {
width: 329px;
height: 25px;
background-image: url(remplazo.jpg);
}
#header span {
display: none;
}


Single-pixel <img> Replacement
Método propuesto por Radu Darvas, muy semejante a la anterior, resuelve el problema de la anterior agregando al XHTML la imagen con su parámetro de texto alternativo, su problema o inconveniente es el hecho de agregar un elemento extra al código y complica el mantenimiento del sitio. El código es el siguiente.

/* css */
#header {
width: 329px;
height: 25px;
background-image: url(remplazo.jpg);
}
#header span {
display: none;
}


Radu Method
Propuesto por el mismo autor del método anterior, consiste en agregar un margen al texto fuera de la vista del usuario y poner en el fondo la imagen correspondiente, no agrega etiquetas extras al código fuente, el inconveniente o problema es el mismo que el primer método señalado, y se presenta cuando el usuario tiene desactivadas las imágenes y css activado. El código es el siguiente.

/* css */
#header {
background: url(remplazo.jpg) no-repeat top right;
width: 2329px;
height: 25px;
margin: 0 0 0 -2000px;
}


Leahy/Langridge Method
Método propuesto por Seamus Leahy y Stuart Langridge, consta de poner el alto en cero, especificarle al padding superior el alto de la imagen a remplazar, y asignarle la imagen de fondo, con este método no se necesita una etiqueta extra span, pero su inconveniente al igual que los anteriores no funciona correctamente cuando el usuario tiene la imágenes desactivadas y css activado.

/* css */
#header {
text-indent: -100em;
overflow: hidden;
background: url(remplazo.jpg);
height: 25px;
}


Phark Revisited
Este método es muy usado en la red, y consta de indentar el texto fuera de la vista del usuario y poner la imagen en el fondo. Su problema es el mismo que los anteriores, no muestra nada cuando el usuario tiene desactivadas las imagenes y activado el css.

/* css */
#header {
text-indent: -9999px;
background: url(remplazo.jpg);
height: 25px;
}


Gilder/Levin Method
Tom Gilder y Levin Alexander, Consiste en agregar un span seguido del texto, luego haces relativa la caja contenedora y absoluto el span, posicionas el span en las coordenadas 0,0; le asignas la imagen y ocultará el texto, esto soluciona el problema cuando el usuario tiene desactivadas las imagenes y activado el css, su inconveniente es cuando la imagen es transparente, el texto no se oculta.

/* css */
#header {
width: 329px;
height: 25px;
position: relative;
}
#header span {
background: url(remplazo.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}


Pues bien, he mencionado algunas de las técnicas mas populares para el remplazo de imagenes, espero que sea de utilidad este artículo, y cualquier duda o comentario será bien recibido, Hasta la próxima.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Para poner una imagen de fondo es muy sencillo, simplemente se hace lo siguiente:


body{
background-image:url(fondo.jpg);
}


Con esa línea anterior, la imagen se ha puesto como mosaico en toda la página, hasta aquí todo bien, ahora le vamos a indicar al explorador, que no queremos que se repita, para esto simplemente ponemos la siguiente línea de código css.


background-repeat:no-repeat;


Hasta ahora todo va por buen camino, firefox y explorer 6 están funcionando de la misma manera, mostrando lo que nosotros deseamos, ha llegado la hora de posicionar nuestra imagen de fondo centrada en el eje x, y en el fondo con respecto al eje y, para esto simplemente haces lo siguiente.


background-position:center bottom;


Por lógica ya debería estar listo, con estas simples tres líneas ¿verdad? ¡Error! Esto no es suficiente, ¿porque? Lo que sucede es que el height del body, es de cero píxeles, y unos cuantos píxeles de márgenes que depende de cada explorador, ósea que al posicionar la imagen en el fondo, este simplemente debiera “desaparecer”, por que en realidad esta se está posicionando sobre un body que no es visible, sobre un body de cero píxeles, entonces no lo vemos, cuando pongamos texto sobre este, podremos ir viendo cómo es que crece.

Para sorpresa nuestra en IE6 aparece tal como nosotros queremos, y es aquí cuando decimos que FF esta mal, pero en realidad es IE6 quien está mal, aquí muestro las imágenes de los respectivos exploradores.

Para solucionar esto, es necesario especificarle al explorador que el body será del 100% del tamaño, esto lo haces así:


height:100%;


Al agregar esta línea y probar la página, pensaras que te estoy engañando por que no hubo cambio alguno, excepto que en IE apareció la barra de deslizamiento, dando como resultado que lo que queremos hacer se descomponga.

He aquí cuando viene otro concepto básico y fundamental de CSS, y es el hecho de que al body le especificamos que fuese el 100% de alto, como le dimos una unidad relativa, entonces toma el 100% del padre de este, en este caso el nodo padre del body es el HTML, con esto en mente debemos especificarle al padre su height de 100%, ósea de toda la pantalla, esto se hace sencillamente así:


height:100%;


Es importante mencionar que el concepto anterior se aplica para cualquier nodo o elemento del documento, y no solamente para el body.

Ahora podemos ver el resultado, pero he aquí otro pequeño inconveniente, y es que en ambos exploradores aparece la barra de desplazamiento, o scroll, esto es por que existen márgenes entre el body y el html, y también padding, para eliminarlos simplemente hacemos lo siguiente.


margin:0px;
padding:0px;


Ahora si la imagen esta posicionada correctamente donde queremos, pero ¿Qué sucede cuando le agregamos texto y contenido a la página? He aquí otro pequeño inconveniente, y es que al aparecer la barra de desplazamiento, el largo del body debiera incrementar, y nosotros le hemos especificado que sea de 100% de la pantalla, al sobrepasar el contenido el largo de la pantalla, la imagen se queda con la posición que nosotros le especificamos y no toma las nueva posición que es mas del 100%.

Para solucionar esto es muy sencillo, simplemente cambiamos la propiedad height por min-height, ya que esta última propiedad incrementará de acuerdo al contenido de la página, si el contenido es menor al 100% esta tomará el 100%, y si es mayor al 100% esta tomará el nuevo valor.

Como IE no reconoce esta última propiedad hay que hacer un pequeño truco, lo que sucede es que IE toma height como si fuese min-height, entonces debemos especificarle únicamente a explorer la propiedad height, para esto lo hacemos así:


* html body{
height:100%;
}


Este último truco funciona de la siguiente manera, IE es el único explorador que reconoce * html, entonces inmediatamente después de esto, es necesario poner el elemento que queremos modificar, en este caso el body, puede ser un selector u una clase en especifico, entonces dentro del bloque podemos poner el css que queramos aplicar a IE únicamente, todos los demás exploradores ignorarán estas instrucciones.

El código completo es el siguiente.


"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

El propósito de dicho evento, es el de promover los estándares, xhtml semánticamente correcto, estructuras de herencia correcta.

Este sitio, estará al descubierto el próximo 5 de abril, todo el día, si quieres ver más información al respecto, puedes visitar el sitio oficial. http://naked.dustindiaz.com/

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.