Re: [Ovillo] Titulo que aparece y desaparece en sobre un banner
Germán, agregaste las propiedades display:block; y width:100%; a las anclas?
Porque a mi se me ve bien en Opera e IE.
Un abrazo.
Plácido.
El 21 de enero de 2011 17:49, German Bustos escribió:
> Plácido,
>
> Muchas gracias, ese era truco, funcionó casi perfecto en todos los
> browsers,
> Incluso (según el IEtester) en Internet Explorer 5, aunque en el 6 el texto
> queda siempre visible, en el 5 se oculta como quiero. También en IE 7, 8 y
> 9, todo con el IE tester que a veces no es 100% seguro, pero es una buena
> aproximación de cómo funcionaría.
>
> En Firefox, Chrome y Safari tengo el funcionamiento que quería, no importa
> por que parte del banner pase el ratón, siempre se hace visible el texto.
> En
> Opera e IE solo se hace visible cuando paso encima del texto en sí que es
> un
> área relativamente pequeña con respecto al total de banner, creo que le voy
> a poner enlace también a la imagen para solucionar.
>
> La otra solución sería usar JavaScript, con lo que tengo menos experiencia
> y
> no me siento tan confiado.
>
>
> Muchas gracias Plácido,
>
>
> Germán
>
>
>
> El 21 de enero de 2011 14:20, Plácido Luna >escribió:
>
> > Perdón, donde puse
> >
> > #capa2 a:hover, #capa2 a:Active{
> > display:block;
> > width:100%;
> > opacity: .1;
> > filter: alpha(opacity=100);
> >
> > text-shadow: 0 0 20px #111;
> > background-color:#333;
> > }
> >
> > debió ser
> >
> > #capa2 a:hover, #capa2 a:Active{
> > display:block;
> > width:100%;
> > opacity: 1;
> > filter: alpha(opacity=100);
> >
> > text-shadow: 0 0 20px #111;
> > background-color:#333;
> > }
> >
> > Saludos!
> >
> >
> > El 21 de enero de 2011 17:18, Plácido Luna > >escribió:
> >
> > > Germán, no uses el signo de % para la opacidad en IE, prueba con esto:
> > >
> > >
> > >
> > >
> > >
> > > .completa, {
> > >width: 968px;
> > >overflow: hidden;
> > >float: none;
> > >clear: both;
> > >margin: 0;
> > >padding: 0;
> > > }
> > >
> > > #capa1{
> > > position:relative;
> > > width:968px;
> > > height:150px;
> > > overflow: hidden;
> > > z-index: 3;
> > > }
> > > #capa2 a, #capa2 a:link, #capa2 a:visited{
> > > display:block;
> > > width:100%;
> > > position:absolute;
> > >
> > > height:150px;
> > > line-height: 150px;
> > > padding-right: 50px;
> > > text-align: right;
> > > top: 0;
> > > left: 0;
> > > color:#FFF;
> > > font-family: Arial, sanserif;
> > > font-size: 3.5em;
> > > z-index: 10;
> > > opacity: .1;
> > > filter: alpha(opacity=10);
> > > background-color:#333;
> > >
> > > }
> > > #capa2 a:hover, #capa2 a:Active{
> > > display:block;
> > > width:100%;
> > > opacity: .1;
> > > filter: alpha(opacity=100);
> > >
> > > text-shadow: 0 0 20px #111;
> > > background-color:#333;
> > > }
> > >
> > >
> > >
> > >
> > >
> > >
> > > > > style='height:150px;width:968px;' />
> > >
> > >Titulo
> > >
> > >
> > >
> > >
> > >
> > >
> > > Saludos!
> > > Plácido.
> > >
> > > El 20 de enero de 2011 21:53, German Bustos > >escribió:
> > >
> > > Hola,
> > >>
> > >> Quiero hacer lo siguiente: Sobre un banner quiero que al pasar el
> ratón
> > >> aparezca un texto y al quitar el ratón desaparezca de nuevo. Parece un
> > >> asunto muy sencillo pero no logro que funcione en todos los
> navegadores.
> > >> Como de costumbre en Firefox, Chrome, Safari y Opera funciona como lo
> > >> deseo,
> > >> pero en Internet Explorer 9, no. Ni siquiera he probado en IE6 debe
> ser
> > un
> > >> desastre.
> > >>
> > >> Hice varias pruebas con diversas estrategias, probé con Javascript,
> pero
> > >> creo que no se justifica usar un scrit para una cosa tan sencilla.
> > >> Inicialmente intenté usar la propiedad "visibility", poniéndola en
> > >> "hidden"
> > >> cuando está afuera y en "visible" con el ratón encima, pero no
> funcionó,
> > >> creo yo que al estar oculto (hidden) el elemento no pasa nada cuando
> se
> > le
> > >> ratón encima. Así que consideré otras opciones y elegí cambiar la
> > >> opacidad.
> > >>
> > >> El código que tengo es el siguiente:
> > >>
> > >> HTML
> > >>
> > >>
> > >>
> > >> > >> style='height:150px;width:968px;' />
> > >>
> > >>Titulo
> > >>
> > >>
> > >>
> > >>
> > >>
> > >> CSS:
> > >>
> > >> .completa, {
> > >>width: 968px;
> > >>overflow: hidden;
> > >>float: none;
> > >>clear: both;
> > >>margin: 0;
> > >>padding: 0;
> > >> }
> > >>
> > >> #capa1{
> > >> position:relative;
> > >> width:968px;
> > >> height:150px;
> > >> overflow: hidden;
> > >> z-index: 3;
> > >> }
> > >> #capa2 a, #capa2 a:link, #capa2 a:visited{
> > >> position:absolute;
> > >> width:918px;
> > >> height:150px;
> > >> line-height: 150px;
> > >> padding-right: 50px;
> > >> text-align: right;
> > >> top: 0;
> > >> left: 0;
> > >> color:#FFF;
> > >> font-family: Arial, sanserif;
> > >> font-size: 3.5em;
> > >> z-index: 10;
> > >>
Re: [Ovillo] Titulo que aparece y desaparece en sobre un banner
Plácido,
Muchas gracias, ese era truco, funcionó casi perfecto en todos los browsers,
Incluso (según el IEtester) en Internet Explorer 5, aunque en el 6 el texto
queda siempre visible, en el 5 se oculta como quiero. También en IE 7, 8 y
9, todo con el IE tester que a veces no es 100% seguro, pero es una buena
aproximación de cómo funcionaría.
En Firefox, Chrome y Safari tengo el funcionamiento que quería, no importa
por que parte del banner pase el ratón, siempre se hace visible el texto. En
Opera e IE solo se hace visible cuando paso encima del texto en sí que es un
área relativamente pequeña con respecto al total de banner, creo que le voy
a poner enlace también a la imagen para solucionar.
La otra solución sería usar JavaScript, con lo que tengo menos experiencia y
no me siento tan confiado.
Muchas gracias Plácido,
Germán
El 21 de enero de 2011 14:20, Plácido Luna escribió:
> Perdón, donde puse
>
> #capa2 a:hover, #capa2 a:Active{
> display:block;
> width:100%;
> opacity: .1;
> filter: alpha(opacity=100);
>
> text-shadow: 0 0 20px #111;
> background-color:#333;
> }
>
> debió ser
>
> #capa2 a:hover, #capa2 a:Active{
> display:block;
> width:100%;
> opacity: 1;
> filter: alpha(opacity=100);
>
> text-shadow: 0 0 20px #111;
> background-color:#333;
> }
>
> Saludos!
>
>
> El 21 de enero de 2011 17:18, Plácido Luna >escribió:
>
> > Germán, no uses el signo de % para la opacidad en IE, prueba con esto:
> >
> >
> >
> >
> >
> > .completa, {
> >width: 968px;
> >overflow: hidden;
> >float: none;
> >clear: both;
> >margin: 0;
> >padding: 0;
> > }
> >
> > #capa1{
> > position:relative;
> > width:968px;
> > height:150px;
> > overflow: hidden;
> > z-index: 3;
> > }
> > #capa2 a, #capa2 a:link, #capa2 a:visited{
> > display:block;
> > width:100%;
> > position:absolute;
> >
> > height:150px;
> > line-height: 150px;
> > padding-right: 50px;
> > text-align: right;
> > top: 0;
> > left: 0;
> > color:#FFF;
> > font-family: Arial, sanserif;
> > font-size: 3.5em;
> > z-index: 10;
> > opacity: .1;
> > filter: alpha(opacity=10);
> > background-color:#333;
> >
> > }
> > #capa2 a:hover, #capa2 a:Active{
> > display:block;
> > width:100%;
> > opacity: .1;
> > filter: alpha(opacity=100);
> >
> > text-shadow: 0 0 20px #111;
> > background-color:#333;
> > }
> >
> >
> >
> >
> >
> >
> > > style='height:150px;width:968px;' />
> >
> >Titulo
> >
> >
> >
> >
> >
> >
> > Saludos!
> > Plácido.
> >
> > El 20 de enero de 2011 21:53, German Bustos >escribió:
> >
> > Hola,
> >>
> >> Quiero hacer lo siguiente: Sobre un banner quiero que al pasar el ratón
> >> aparezca un texto y al quitar el ratón desaparezca de nuevo. Parece un
> >> asunto muy sencillo pero no logro que funcione en todos los navegadores.
> >> Como de costumbre en Firefox, Chrome, Safari y Opera funciona como lo
> >> deseo,
> >> pero en Internet Explorer 9, no. Ni siquiera he probado en IE6 debe ser
> un
> >> desastre.
> >>
> >> Hice varias pruebas con diversas estrategias, probé con Javascript, pero
> >> creo que no se justifica usar un scrit para una cosa tan sencilla.
> >> Inicialmente intenté usar la propiedad "visibility", poniéndola en
> >> "hidden"
> >> cuando está afuera y en "visible" con el ratón encima, pero no funcionó,
> >> creo yo que al estar oculto (hidden) el elemento no pasa nada cuando se
> le
> >> ratón encima. Así que consideré otras opciones y elegí cambiar la
> >> opacidad.
> >>
> >> El código que tengo es el siguiente:
> >>
> >> HTML
> >>
> >>
> >>
> >> >> style='height:150px;width:968px;' />
> >>
> >>Titulo
> >>
> >>
> >>
> >>
> >>
> >> CSS:
> >>
> >> .completa, {
> >>width: 968px;
> >>overflow: hidden;
> >>float: none;
> >>clear: both;
> >>margin: 0;
> >>padding: 0;
> >> }
> >>
> >> #capa1{
> >> position:relative;
> >> width:968px;
> >> height:150px;
> >> overflow: hidden;
> >> z-index: 3;
> >> }
> >> #capa2 a, #capa2 a:link, #capa2 a:visited{
> >> position:absolute;
> >> width:918px;
> >> height:150px;
> >> line-height: 150px;
> >> padding-right: 50px;
> >> text-align: right;
> >> top: 0;
> >> left: 0;
> >> color:#FFF;
> >> font-family: Arial, sanserif;
> >> font-size: 3.5em;
> >> z-index: 10;
> >> opacity: .01;
> >> filter: alpha(opacity=1%);
> >> }
> >> #capa2 a:hover, #capa2 a:Active{
> >> opacity: .9;
> >> filter: alpha(opacity=95%);
> >> text-shadow: 0 0 20px #111;
> >> }
> >>
> >>
> >> --
> >>
> >> *Germán Bustos*
> >> Asesor en estrategias de comunicación en Internet para organizaciones
> >> sociales
> >> http://atarraya.org
> >> http://germanbustos.com
> >> Tel: (+57) 3177381339
> >>
> >>
> >>
> >> _
Re: [Ovillo] Titulo que aparece y desaparece en sobre un banner
Hola Eliseo,
Gracias por las opciones, Conozco los CSS Sprites, pero consideré que no era
lo que quería porque a) quiero tener un texto relacionado con la imagen, que
los buscadores lo indexen y b) me preocupaba que la imagen se me hiciera
demasiado grande y c) La idea es que sea el usuario final quien recorte la
foto y la suba escribiendo su texto y no todos los usuarios saben hacer una
imagen doble. Pero la gran ventaja del sprite sería que el texto podría
queda ubicado en el sitio y con las condiciones con las que se quisiera, es
decir, en términos de resolver el problema podría ser una muy buena opción.
En cuanto a la propiedad hover, es la solución que finalmente usé, con un
enlace.
Muchas gracias,
Germán
El 21 de enero de 2011 14:29, Eliseo Benavent escribió:
> no se si la idea es utilizar texto html o no, podrias utilizar css sprite
> si
> te sirve una imagen con texto
> http://css-tricks.com/css-sprites/
>
> o utilizar la propiedad css content en el hover
> http://www.librosweb.es/referencia/css/content.html
>
> No lo he probado pero supongo que funcionará
>
> El 21 de enero de 2011 00:53, German Bustos
> escribió:
>
> > Hola,
> >
> > Quiero hacer lo siguiente: Sobre un banner quiero que al pasar el ratón
> > aparezca un texto y al quitar el ratón desaparezca de nuevo. Parece un
> > asunto muy sencillo pero no logro que funcione en todos los navegadores.
> > Como de costumbre en Firefox, Chrome, Safari y Opera funciona como lo
> > deseo,
> > pero en Internet Explorer 9, no. Ni siquiera he probado en IE6 debe ser
> un
> > desastre.
> >
> > Hice varias pruebas con diversas estrategias, probé con Javascript, pero
> > creo que no se justifica usar un scrit para una cosa tan sencilla.
> > Inicialmente intenté usar la propiedad "visibility", poniéndola en
> "hidden"
> > cuando está afuera y en "visible" con el ratón encima, pero no funcionó,
> > creo yo que al estar oculto (hidden) el elemento no pasa nada cuando se
> le
> > ratón encima. Así que consideré otras opciones y elegí cambiar la
> opacidad.
> >
> > El código que tengo es el siguiente:
> >
> > HTML
> >
> >
> >
> > > style='height:150px;width:968px;' />
> >
> >Titulo
> >
> >
> >
> >
> >
> > CSS:
> >
> > .completa, {
> >width: 968px;
> >overflow: hidden;
> >float: none;
> >clear: both;
> >margin: 0;
> >padding: 0;
> > }
> >
> > #capa1{
> > position:relative;
> > width:968px;
> > height:150px;
> > overflow: hidden;
> > z-index: 3;
> > }
> > #capa2 a, #capa2 a:link, #capa2 a:visited{
> > position:absolute;
> > width:918px;
> > height:150px;
> > line-height: 150px;
> > padding-right: 50px;
> > text-align: right;
> > top: 0;
> > left: 0;
> > color:#FFF;
> > font-family: Arial, sanserif;
> > font-size: 3.5em;
> > z-index: 10;
> > opacity: .01;
> > filter: alpha(opacity=1%);
> > }
> > #capa2 a:hover, #capa2 a:Active{
> > opacity: .9;
> > filter: alpha(opacity=95%);
> > text-shadow: 0 0 20px #111;
> > }
> >
> >
> > --
> >
> > *Germán Bustos*
> > Asesor en estrategias de comunicación en Internet para organizaciones
> > sociales
> > http://atarraya.org
> > http://germanbustos.com
> > Tel: (+57) 3177381339
> >
> >
> >
> > ___
> > Lista de distribución Ovillo
> > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> > Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> > http://lists.ovillo.org/mailman/listinfo/ovillo
> >
>
>
>
> --
> Eliseo Benavent
> Diseño web y Publicidad
> www.pompagrafica.es
> www.guiamislata.com
> 699 818 798
>
> En cumplimiento de la Ley Orgánica de Protección de Datos 15/1999, le
> informamos que sus datos personales están incorporados en un fichero cuyo
> responsable es Eliseo Benavent Gimeno , pudiendo ser utilizados con fines
> informativos. Si lo desea puede ejercer los derechos de acceso,
> rectificación, cancelación u oposición de sus datos personales en el correo
> electrónico tecn...@pompagrafica.es
> ___
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
--
*Germán Bustos*
Asesor en estrategias de comunicación en Internet para organizaciones
sociales
http://atarraya.org
http://germanbustos.com
Tel: (+57) 3177381339
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguien
Re: [Ovillo] Titulo que aparece y desaparece en sobre un banner
no se si la idea es utilizar texto html o no, podrias utilizar css sprite si
te sirve una imagen con texto
http://css-tricks.com/css-sprites/
o utilizar la propiedad css content en el hover
http://www.librosweb.es/referencia/css/content.html
No lo he probado pero supongo que funcionará
El 21 de enero de 2011 00:53, German Bustos escribió:
> Hola,
>
> Quiero hacer lo siguiente: Sobre un banner quiero que al pasar el ratón
> aparezca un texto y al quitar el ratón desaparezca de nuevo. Parece un
> asunto muy sencillo pero no logro que funcione en todos los navegadores.
> Como de costumbre en Firefox, Chrome, Safari y Opera funciona como lo
> deseo,
> pero en Internet Explorer 9, no. Ni siquiera he probado en IE6 debe ser un
> desastre.
>
> Hice varias pruebas con diversas estrategias, probé con Javascript, pero
> creo que no se justifica usar un scrit para una cosa tan sencilla.
> Inicialmente intenté usar la propiedad "visibility", poniéndola en "hidden"
> cuando está afuera y en "visible" con el ratón encima, pero no funcionó,
> creo yo que al estar oculto (hidden) el elemento no pasa nada cuando se le
> ratón encima. Así que consideré otras opciones y elegí cambiar la opacidad.
>
> El código que tengo es el siguiente:
>
> HTML
>
>
>
> style='height:150px;width:968px;' />
>
>Titulo
>
>
>
>
>
> CSS:
>
> .completa, {
>width: 968px;
>overflow: hidden;
>float: none;
>clear: both;
>margin: 0;
>padding: 0;
> }
>
> #capa1{
> position:relative;
> width:968px;
> height:150px;
> overflow: hidden;
> z-index: 3;
> }
> #capa2 a, #capa2 a:link, #capa2 a:visited{
> position:absolute;
> width:918px;
> height:150px;
> line-height: 150px;
> padding-right: 50px;
> text-align: right;
> top: 0;
> left: 0;
> color:#FFF;
> font-family: Arial, sanserif;
> font-size: 3.5em;
> z-index: 10;
> opacity: .01;
> filter: alpha(opacity=1%);
> }
> #capa2 a:hover, #capa2 a:Active{
> opacity: .9;
> filter: alpha(opacity=95%);
> text-shadow: 0 0 20px #111;
> }
>
>
> --
>
> *Germán Bustos*
> Asesor en estrategias de comunicación en Internet para organizaciones
> sociales
> http://atarraya.org
> http://germanbustos.com
> Tel: (+57) 3177381339
>
>
>
> ___
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
--
Eliseo Benavent
Diseño web y Publicidad
www.pompagrafica.es
www.guiamislata.com
699 818 798
En cumplimiento de la Ley Orgánica de Protección de Datos 15/1999, le
informamos que sus datos personales están incorporados en un fichero cuyo
responsable es Eliseo Benavent Gimeno , pudiendo ser utilizados con fines
informativos. Si lo desea puede ejercer los derechos de acceso,
rectificación, cancelación u oposición de sus datos personales en el correo
electrónico tecn...@pompagrafica.es
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Titulo que aparece y desaparece en sobre un banner
Perdón, donde puse
#capa2 a:hover, #capa2 a:Active{
display:block;
width:100%;
opacity: .1;
filter: alpha(opacity=100);
text-shadow: 0 0 20px #111;
background-color:#333;
}
debió ser
#capa2 a:hover, #capa2 a:Active{
display:block;
width:100%;
opacity: 1;
filter: alpha(opacity=100);
text-shadow: 0 0 20px #111;
background-color:#333;
}
Saludos!
El 21 de enero de 2011 17:18, Plácido Luna escribió:
> Germán, no uses el signo de % para la opacidad en IE, prueba con esto:
>
>
>
>
>
> .completa, {
>width: 968px;
>overflow: hidden;
>float: none;
>clear: both;
>margin: 0;
>padding: 0;
> }
>
> #capa1{
> position:relative;
> width:968px;
> height:150px;
> overflow: hidden;
> z-index: 3;
> }
> #capa2 a, #capa2 a:link, #capa2 a:visited{
> display:block;
> width:100%;
> position:absolute;
>
> height:150px;
> line-height: 150px;
> padding-right: 50px;
> text-align: right;
> top: 0;
> left: 0;
> color:#FFF;
> font-family: Arial, sanserif;
> font-size: 3.5em;
> z-index: 10;
> opacity: .1;
> filter: alpha(opacity=10);
> background-color:#333;
>
> }
> #capa2 a:hover, #capa2 a:Active{
> display:block;
> width:100%;
> opacity: .1;
> filter: alpha(opacity=100);
>
> text-shadow: 0 0 20px #111;
> background-color:#333;
> }
>
>
>
>
>
>
> style='height:150px;width:968px;' />
>
>Titulo
>
>
>
>
>
>
> Saludos!
> Plácido.
>
> El 20 de enero de 2011 21:53, German Bustos escribió:
>
> Hola,
>>
>> Quiero hacer lo siguiente: Sobre un banner quiero que al pasar el ratón
>> aparezca un texto y al quitar el ratón desaparezca de nuevo. Parece un
>> asunto muy sencillo pero no logro que funcione en todos los navegadores.
>> Como de costumbre en Firefox, Chrome, Safari y Opera funciona como lo
>> deseo,
>> pero en Internet Explorer 9, no. Ni siquiera he probado en IE6 debe ser un
>> desastre.
>>
>> Hice varias pruebas con diversas estrategias, probé con Javascript, pero
>> creo que no se justifica usar un scrit para una cosa tan sencilla.
>> Inicialmente intenté usar la propiedad "visibility", poniéndola en
>> "hidden"
>> cuando está afuera y en "visible" con el ratón encima, pero no funcionó,
>> creo yo que al estar oculto (hidden) el elemento no pasa nada cuando se le
>> ratón encima. Así que consideré otras opciones y elegí cambiar la
>> opacidad.
>>
>> El código que tengo es el siguiente:
>>
>> HTML
>>
>>
>>
>>> style='height:150px;width:968px;' />
>>
>>Titulo
>>
>>
>>
>>
>>
>> CSS:
>>
>> .completa, {
>>width: 968px;
>>overflow: hidden;
>>float: none;
>>clear: both;
>>margin: 0;
>>padding: 0;
>> }
>>
>> #capa1{
>> position:relative;
>> width:968px;
>> height:150px;
>> overflow: hidden;
>> z-index: 3;
>> }
>> #capa2 a, #capa2 a:link, #capa2 a:visited{
>> position:absolute;
>> width:918px;
>> height:150px;
>> line-height: 150px;
>> padding-right: 50px;
>> text-align: right;
>> top: 0;
>> left: 0;
>> color:#FFF;
>> font-family: Arial, sanserif;
>> font-size: 3.5em;
>> z-index: 10;
>> opacity: .01;
>> filter: alpha(opacity=1%);
>> }
>> #capa2 a:hover, #capa2 a:Active{
>> opacity: .9;
>> filter: alpha(opacity=95%);
>> text-shadow: 0 0 20px #111;
>> }
>>
>>
>> --
>>
>> *Germán Bustos*
>> Asesor en estrategias de comunicación en Internet para organizaciones
>> sociales
>> http://atarraya.org
>> http://germanbustos.com
>> Tel: (+57) 3177381339
>>
>>
>>
>> ___
>> Lista de distribución Ovillo
>> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
>> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
>> http://lists.ovillo.org/mailman/listinfo/ovillo
>>
>
>
>
> --
> *Plácido Luna*
> http://www.octubre.com.uy
> (+598) 99 942723
>
>
--
*Plácido Luna*
http://www.octubre.com.uy
(+598) 99 942723
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Titulo que aparece y desaparece en sobre un banner
Germán, no uses el signo de % para la opacidad en IE, prueba con esto:
.completa, {
width: 968px;
overflow: hidden;
float: none;
clear: both;
margin: 0;
padding: 0;
}
#capa1{
position:relative;
width:968px;
height:150px;
overflow: hidden;
z-index: 3;
}
#capa2 a, #capa2 a:link, #capa2 a:visited{
display:block;
width:100%;
position:absolute;
height:150px;
line-height: 150px;
padding-right: 50px;
text-align: right;
top: 0;
left: 0;
color:#FFF;
font-family: Arial, sanserif;
font-size: 3.5em;
z-index: 10;
opacity: .1;
filter: alpha(opacity=10);
background-color:#333;
}
#capa2 a:hover, #capa2 a:Active{
display:block;
width:100%;
opacity: .1;
filter: alpha(opacity=100);
text-shadow: 0 0 20px #111;
background-color:#333;
}
Titulo
Saludos!
Plácido.
El 20 de enero de 2011 21:53, German Bustos escribió:
> Hola,
>
> Quiero hacer lo siguiente: Sobre un banner quiero que al pasar el ratón
> aparezca un texto y al quitar el ratón desaparezca de nuevo. Parece un
> asunto muy sencillo pero no logro que funcione en todos los navegadores.
> Como de costumbre en Firefox, Chrome, Safari y Opera funciona como lo
> deseo,
> pero en Internet Explorer 9, no. Ni siquiera he probado en IE6 debe ser un
> desastre.
>
> Hice varias pruebas con diversas estrategias, probé con Javascript, pero
> creo que no se justifica usar un scrit para una cosa tan sencilla.
> Inicialmente intenté usar la propiedad "visibility", poniéndola en "hidden"
> cuando está afuera y en "visible" con el ratón encima, pero no funcionó,
> creo yo que al estar oculto (hidden) el elemento no pasa nada cuando se le
> ratón encima. Así que consideré otras opciones y elegí cambiar la opacidad.
>
> El código que tengo es el siguiente:
>
> HTML
>
>
>
> style='height:150px;width:968px;' />
>
>Titulo
>
>
>
>
>
> CSS:
>
> .completa, {
>width: 968px;
>overflow: hidden;
>float: none;
>clear: both;
>margin: 0;
>padding: 0;
> }
>
> #capa1{
> position:relative;
> width:968px;
> height:150px;
> overflow: hidden;
> z-index: 3;
> }
> #capa2 a, #capa2 a:link, #capa2 a:visited{
> position:absolute;
> width:918px;
> height:150px;
> line-height: 150px;
> padding-right: 50px;
> text-align: right;
> top: 0;
> left: 0;
> color:#FFF;
> font-family: Arial, sanserif;
> font-size: 3.5em;
> z-index: 10;
> opacity: .01;
> filter: alpha(opacity=1%);
> }
> #capa2 a:hover, #capa2 a:Active{
> opacity: .9;
> filter: alpha(opacity=95%);
> text-shadow: 0 0 20px #111;
> }
>
>
> --
>
> *Germán Bustos*
> Asesor en estrategias de comunicación en Internet para organizaciones
> sociales
> http://atarraya.org
> http://germanbustos.com
> Tel: (+57) 3177381339
>
>
>
> ___
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
--
*Plácido Luna*
http://www.octubre.com.uy
(+598) 99 942723
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Titulo que aparece y desaparece en sobre un banner
Hola,
Quiero hacer lo siguiente: Sobre un banner quiero que al pasar el ratón
aparezca un texto y al quitar el ratón desaparezca de nuevo. Parece un
asunto muy sencillo pero no logro que funcione en todos los navegadores.
Como de costumbre en Firefox, Chrome, Safari y Opera funciona como lo deseo,
pero en Internet Explorer 9, no. Ni siquiera he probado en IE6 debe ser un
desastre.
Hice varias pruebas con diversas estrategias, probé con Javascript, pero
creo que no se justifica usar un scrit para una cosa tan sencilla.
Inicialmente intenté usar la propiedad "visibility", poniéndola en "hidden"
cuando está afuera y en "visible" con el ratón encima, pero no funcionó,
creo yo que al estar oculto (hidden) el elemento no pasa nada cuando se le
ratón encima. Así que consideré otras opciones y elegí cambiar la opacidad.
El código que tengo es el siguiente:
HTML
Titulo
CSS:
.completa, {
width: 968px;
overflow: hidden;
float: none;
clear: both;
margin: 0;
padding: 0;
}
#capa1{
position:relative;
width:968px;
height:150px;
overflow: hidden;
z-index: 3;
}
#capa2 a, #capa2 a:link, #capa2 a:visited{
position:absolute;
width:918px;
height:150px;
line-height: 150px;
padding-right: 50px;
text-align: right;
top: 0;
left: 0;
color:#FFF;
font-family: Arial, sanserif;
font-size: 3.5em;
z-index: 10;
opacity: .01;
filter: alpha(opacity=1%);
}
#capa2 a:hover, #capa2 a:Active{
opacity: .9;
filter: alpha(opacity=95%);
text-shadow: 0 0 20px #111;
}
--
*Germán Bustos*
Asesor en estrategias de comunicación en Internet para organizaciones
sociales
http://atarraya.org
http://germanbustos.com
Tel: (+57) 3177381339
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
