Re: [Ovillo] filtro alpha
bien muchas gracias por la ayuda
Tenia 2 problemas
1- no me quedaban 3 columnas alineadas y de la misma altura, ya lo logre! en
FF y IE
2- La transparencia en IE no me sale, ya lo logre en IE.
*El tema es este:
Tengo una pagina con un menu y un iframe, al elegir por ejemplo: Home,
Novedades, Contacto, lo que sea del menu cambia la pagina que esta en el
iframe.
Tal vez no sea la mejor forma de hacerlo pero lo hice asi.
La pagina principal tiene de fondo una imagen de unas maderas, asi que a
todas las imagenes que iran en el iframe les puse: background: transparent.
El problema es que la transparencia no me termina de andar en IE:
tal vez puedan ayudarme.*
head
link rel=stylesheet type=text/css href=styleiframe.css
/head
body id=contenido
div name=bg_name class=box_background style=height: 100%; width:
100%; /div
div id=container3
div id=container2
div id=container1
div id=col1
!-- Column one start --
h2Nosotros/h2
pJavaScript is not required. Some website layouts rely on
JavaScript hacks to resize divs and force elements into place but you won't
see any of that nonsense here./p
!-- Column one end --
/div
div id=col2
!-- Column two start --
h2No Images/h2
pThis three column layout requires no images. Many CSS
website designs need images to colour in the column backgrounds but that is
not necessary with this design. Why waste bandwidth and precious HTTP
requests when you can do everything in pure CSS and HTML?/p
h2Valid XHTML strict markup/h2
pThe HTML in this layout validates as XHTML 1.0
strict./p
h2This layout is FREE for anyone to use/h2
pYou don't have to pay anything. Simply view the source of
this page and save the HTML onto your computer. My only suggestion is to put
the CSS into a separate file. If you are feeling generous however, link back
to this page so other people can find and use this layout too./p
!-- Column two end --
/div
div id=col3
!-- Column three start --
h2Cross-Browser Compatible/h2
img src=images/uvas.jpg altFotografias/
h3iPhone amp; iPod Touch/h3
ul
liSafari/li
/ul
h3Mac/h3
ul
liSafari/li
liFirefox/li
liOpera 9/li
liNetscape 7 amp; 9/li
/ul
h3Windows/h3
ul
liFirefox 1.5, 2 amp; 3/li
liSafari/li
liOpera 8 amp; 9/li
liExplorer 5.5, 6 amp; 7/li
liGoogle Chrome/li
liNetscape 8/li
/ul
!-- Column three end --
/div
/div
/div
/div
script src=http://www.google-analytics.com/urchin.js;
type=text/javascript
/script
script type=text/javascript
_uacct = UA-1848067-8;
urchinTracker();
/script
/body
*
eso de js ya no va jeje
*
*ACA VA EL CSS*
#contenido {
margin:0;
padding:0;
color:white;
}
.box_background {
background-color:#000;
height:100%;
left:0;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
position:absolute;
top:0;
width:100%;
z-index:-50;
}
/* Start of Column CSS */
#container3 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background: transparent;
/* column 3 background colour */
}
#container2 {
clear:left;
float:left;
width:100%;
position:relative;
right:33.333%;
background:; /* column 2 background colour */
}
#container1 {
float:left;
width:100%;
position:relative;
right:33.33%;
background:#; /* column 1 background colour */
}
#col1 {
float:left;
width:29.33%;
position:relative;
left:68.67%;
overflow:hidden;
}
#col2 {
float:left;
width:29.33%;
position:relative;
left:72.67%;
overflow:hidden;
}
#col3 {
float:left;
width:29.33%;
position:relative;
left:76.67%;
overflow:hidden;
}
#col3 img {
z-index:101;
opacity:1;
}
/* -- */
El 13 de febrero de 2009 3:39, Mauricio Dulce
mauricio.du...@gmail.comescribió:
No e estado al post, pero si estas usando png e internet explorer 6
tienes que usar un hack para el mismo
El 12/02/2009, a las 20:37, Delirium Design escribió:
ya me sale todo, ahora lo unico que pasa es que la caja transparente
no se
ve en IE
las columnas ya las arregle, la transparencia se ve bien en FF pero
en IE
todavia no.
Capaz el problema es que la transparencia en la caja sera para una
pagina
que va dentro de otra en un iframe, nose capaz por eso puede ser,
hasta
ahora me ha
traido algunas complicaciones.
Aqui dejo el codigo, espero me ayuden,
[Ovillo] filtro alpha
*hola, que tal? he puesto esta propiedad en mi pagina, pero no me funciona
en IE*
#columna1 {
display: table-cell;
padding-right:30px;
background-color:black;
margin:16px;
filter: alpha(opacity=50);
opacity: 0.5;
*veo el fondo de la columna negro en IE.
Hay alguna otra forma de solucionarlo?*
trate poniendo
!--[if lt IE 8]
script src=
http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js
type=text/javascript/script
![endif]--
en el html pero tampoco... como podria arreglarlo?
*OTRO TEMA:
tengo que dividir el sitio en 3 columnas, y para que todas vayan quedando
con la misma altura use la propiedad display:table
el problema es que para IE tampoco me anda, me salen las tres columnas una
debajo de la otra, como podria arreglarlo?*
#contenedor {
display: table;
overflow: hidden;
margin: 10px 20px 10px 20px;
}
#contenidos {
display: table-row;
text-align: justify;
text-decoration: none;
font-family:Arial,Helvetica,sans-serif;
color:white;
font-size: 0.8em;
}
#columna1 {
display: table-cell;
padding-right:30px;
background-color:black;
margin:16px;
filter: alpha(opacity=50);
opacity: 0.5;
}
#columna2 {
display: table-cell;
padding-right:30px;
background-color:black;
margin:16px;
opacity:0.5;filter:alpha(opacity=50)
}
#columna3{
display: table-cell;
padding-top:-50px;
background-color:black;
margin:16px;
}
Espero me puedan ayudar, saludos!!
___
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] filtro alpha
Hola, Delirium
Delirium Design escribió:
*OTRO TEMA:
tengo que dividir el sitio en 3 columnas, y para que todas vayan quedando
con la misma altura use la propiedad display:table
el problema es que para IE tampoco me anda, me salen las tres columnas una
debajo de la otra, como podria arreglarlo?*
El filtro alpha se ha comentado demasiadas veces en esta lista como para
volver a repetirlo. La maquetación a tres columnas también, no obstante:
div#container {
overflow: hidden;
}
div#izq, div#der {
float: left;
padding-bottom: 3px;
margin-bottom: -3px;
}
___
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] filtro alpha
http://www.csslab.cl/2007/10/11/100-alto-finalmente-para-todos/
Delirium Design escribió:
*hola, que tal? he puesto esta propiedad en mi pagina, pero no me funciona
en IE*
#columna1 {
display: table-cell;
padding-right:30px;
background-color:black;
margin:16px;
filter: alpha(opacity=50);
opacity: 0.5;
*veo el fondo de la columna negro en IE.
Hay alguna otra forma de solucionarlo?*
trate poniendo
!--[if lt IE 8]
script src=
http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js
type=text/javascript/script
![endif]--
en el html pero tampoco... como podria arreglarlo?
*OTRO TEMA:
tengo que dividir el sitio en 3 columnas, y para que todas vayan quedando
con la misma altura use la propiedad display:table
el problema es que para IE tampoco me anda, me salen las tres columnas una
debajo de la otra, como podria arreglarlo?*
#contenedor {
display: table;
overflow: hidden;
margin: 10px 20px 10px 20px;
}
#contenidos {
display: table-row;
text-align: justify;
text-decoration: none;
font-family:Arial,Helvetica,sans-serif;
color:white;
font-size: 0.8em;
}
#columna1 {
display: table-cell;
padding-right:30px;
background-color:black;
margin:16px;
filter: alpha(opacity=50);
opacity: 0.5;
}
#columna2 {
display: table-cell;
padding-right:30px;
background-color:black;
margin:16px;
opacity:0.5;filter:alpha(opacity=50)
}
#columna3{
display: table-cell;
padding-top:-50px;
background-color:black;
margin:16px;
}
Espero me puedan ayudar, saludos!!
___
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
___
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] filtro alpha
On Thu, 12 Feb 2009 09:17:42 -0300, Rodrigo Álvarez Virgós
rodri.vir...@gmail.com wrote:
Rodrigo
Algún tiempo atrás intenté usar ese método para maquetar un sitio. Todo venía
muy bien hasta que armando unas notas al pié descubri que el overflow me
perjudicaba la navegación interna de la página (lease: notas al pie, accesskey
y otro tipo de enlaces internos), el efecto que esto provocaba era que la
página se posicionaba en el lugar requerido pero luego las barras de scroll me
impedian subir. No se si me expliqué correctamente.
¿Te encontraste con este mismo problema?¿Cómo lo solucionaste?
Personalment tuve que replantear la estructura del sitio
Saludos
La maquetación a tres columnas también, no obstante:
div#container {
overflow: hidden;
}
div#izq, div#der {
float: left;
padding-bottom: 3px;
margin-bottom: -3px;
}
___
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] filtro alpha
Hola, Agustín
Agustín Bouillet escribió:
On Thu, 12 Feb 2009 09:17:42 -0300, Rodrigo Álvarez Virgós
rodri.vir...@gmail.com wrote:
Rodrigo
Algún tiempo atrás intenté usar ese método para maquetar un sitio. Todo venía
muy bien hasta que armando unas notas al pié descubri que el overflow me
perjudicaba la navegación interna de la página (lease: notas al pie,
accesskey y otro tipo de enlaces internos), el efecto que esto provocaba era
que la página se posicionaba en el lugar requerido pero luego las barras de
scroll me impedian subir. No se si me expliqué correctamente.
¿Te encontraste con este mismo problema?¿Cómo lo solucionaste?
Efectivamente, con los enlaces internos es lo que ocurre... se te
desplaza toda la página hasta donde está el ancla, y no puedes hacer
scroll hacia arriba. La única solución que encuentro a esto es poner
otro ancla volver o subir que devuelva el foco hasta arriba del
todo. Quizás algún gurú nos ilumine con otra solución más efectiva.
Personalment tuve que replantear la estructura del sitio
Saludos
La maquetación a tres columnas también, no obstante:
div#container {
overflow: hidden;
}
div#izq, div#der {
float: left;
padding-bottom: 3px;
margin-bottom: -3px;
}
___
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
___
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] filtro alpha
On Thu, Feb 12, 2009 at 12:46 PM, Delirium Design deliriumindes...@gmail.com wrote: .. http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.jshttp://ie7-js.googlecode.com/svn/version/2.0%28beta3%29/IE8.js mas que enlazar un SVN, quizas deberias hacer copia de ese fichero en tu sitio web. -- -- ℱin del ℳensaje. ___ 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] filtro alpha
Este método es un poco peligroso si se lo usa para un maquetado general
pero, si es usado en particularidades dentro de un sitio o página, puede ser
de grán utilidad. Usarlo del modo expuesto puede atentar contra la
navegabilidad y/o accesibilidad de un sitio. No hay que descartar el recurso
pero es imortante ser prudente.
Y sobre el enlace para la vuelta a punto de partida, es viable pero sigue
siendo molesto e inapropiado no poder disponer de las barras de scroll.
Mi opinión.
Gracias Rodrigo por atender a mi pregunta.
Saludos
Agustín
2009/2/12 Rodrigo Álvarez Virgós rodri.vir...@gmail.com
Hola, Agustín
Agustín Bouillet escribió:
On Thu, 12 Feb 2009 09:17:42 -0300, Rodrigo Álvarez Virgós
rodri.vir...@gmail.com wrote:
Rodrigo
Algún tiempo atrás intenté usar ese método para maquetar un sitio. Todo
venía muy bien hasta que armando unas notas al pié descubri que el overflow
me perjudicaba la navegación interna de la página (lease: notas al pie,
accesskey y otro tipo de enlaces internos), el efecto que esto provocaba era
que la página se posicionaba en el lugar requerido pero luego las barras de
scroll me impedian subir. No se si me expliqué correctamente.
¿Te encontraste con este mismo problema?¿Cómo lo solucionaste?
Efectivamente, con los enlaces internos es lo que ocurre... se te
desplaza toda la página hasta donde está el ancla, y no puedes hacer
scroll hacia arriba. La única solución que encuentro a esto es poner
otro ancla volver o subir que devuelva el foco hasta arriba del
todo. Quizás algún gurú nos ilumine con otra solución más efectiva.
Personalment tuve que replantear la estructura del sitio
Saludos
La maquetación a tres columnas también, no obstante:
div#container {
overflow: hidden;
}
div#izq, div#der {
float: left;
padding-bottom: 3px;
margin-bottom: -3px;
}
___
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
___
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
___
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] filtro alpha
ya me sale todo, ahora lo unico que pasa es que la caja transparente no se
ve en IE
las columnas ya las arregle, la transparencia se ve bien en FF pero en IE
todavia no.
Capaz el problema es que la transparencia en la caja sera para una pagina
que va dentro de otra en un iframe, nose capaz por eso puede ser, hasta
ahora me ha
traido algunas complicaciones.
Aqui dejo el codigo, espero me ayuden, saludos
head
link rel=stylesheet type=text/css href=styleiframe.css
/head
body id=contenido
div id=container3
div id=container2
div id=container1
div id=col1
!-- Column one start --
h2Nosotros/h2
pJavaScript is not required. Some website layouts rely on
JavaScript hacks to resize divs and force elements into place but you won't
see any of that nonsense here./p
!-- Column one end --
/div
div id=col2
!-- Column two start --
h2No Images/h2
pThis three column layout requires no images. Many CSS
website designs need images to colour in the column backgrounds but that is
not necessary with this design. Why waste bandwidth and precious HTTP
requests when you can do everything in pure CSS and HTML?/p
h2Valid XHTML strict markup/h2
pThe HTML in this layout validates as XHTML 1.0
strict./p
h2This layout is FREE for anyone to use/h2
pYou don't have to pay anything. Simply view the source of
this page and save the HTML onto your computer. My only suggestion is to put
the CSS into a separate file. If you are feeling generous however, link back
to this page so other people can find and use this layout too./p
!-- Column two end --
/div
div id=col3
!-- Column three start --
h2Cross-Browser Compatible/h2
img src=images/uvas.jpg altFotografias/
h3iPhone amp; iPod Touch/h3
ul
liSafari/li
/ul
h3Mac/h3
ul
liSafari/li
liFirefox/li
liOpera 9/li
liNetscape 7 amp; 9/li
/ul
h3Windows/h3
ul
liFirefox 1.5, 2 amp; 3/li
liSafari/li
liOpera 8 amp; 9/li
liExplorer 5.5, 6 amp; 7/li
liGoogle Chrome/li
liNetscape 8/li
/ul
!-- Column three end --
/div
/div
/div
div name=bg_name class=box_background style=height: 100%; width:
100%;style=filter:alpha(opacity=50); z-index:-200; /div
/div
script src=http://www.google-analytics.com/urchin.js;
type=text/javascript
/script
script type=text/javascript
_uacct = UA-1848067-8;
urchinTracker();
/script
/body
#contenido {
margin:0;
padding:0;
color:white;
}
.box_background {
background-color:#000;
height:100%;
left:0;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
position:absolute;
top:0;
width:100%;
z-index:-99;
}
/* Start of Column CSS */
#container3 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background: transparent;
/* column 3 background colour */
}
#container2 {
clear:left;
float:left;
width:100%;
position:relative;
right:33.333%;
background:; /* column 2 background colour */
}
#container1 {
float:left;
width:100%;
position:relative;
right:33.33%;
background:#; /* column 1 background colour */
}
#col1 {
float:left;
width:29.33%;
position:relative;
left:68.67%;
overflow:hidden;
}
#col2 {
float:left;
width:29.33%;
position:relative;
left:72.67%;
overflow:hidden;
}
#col3 {
float:left;
width:29.33%;
position:relative;
left:76.67%;
overflow:hidden;
}
#col3 img {
z-index:101;
opacity:1;
}
/* -- */
El 13 de febrero de 2009 0:45, Agustin Bouillet
agustin.bouil...@gmail.comescribió:
Este método es un poco peligroso si se lo usa para un maquetado general
pero, si es usado en particularidades dentro de un sitio o página, puede
ser
de grán utilidad. Usarlo del modo expuesto puede atentar contra la
navegabilidad y/o accesibilidad de un sitio. No hay que descartar el
recurso
pero es imortante ser prudente.
Y sobre el enlace para la vuelta a punto de partida, es viable pero sigue
siendo molesto e inapropiado no poder disponer de las barras de scroll.
Mi opinión.
Gracias Rodrigo por atender a mi pregunta.
Saludos
Agustín
2009/2/12 Rodrigo Álvarez Virgós rodri.vir...@gmail.com
Hola, Agustín
Agustín Bouillet escribió:
On Thu, 12 Feb 2009 09:17:42 -0300, Rodrigo Álvarez Virgós
rodri.vir...@gmail.com wrote:
Rodrigo
Algún tiempo atrás intenté usar ese método
Re: [Ovillo] filtro alpha
No e estado al post, pero si estas usando png e internet explorer 6
tienes que usar un hack para el mismo
El 12/02/2009, a las 20:37, Delirium Design escribió:
ya me sale todo, ahora lo unico que pasa es que la caja transparente
no se
ve en IE
las columnas ya las arregle, la transparencia se ve bien en FF pero
en IE
todavia no.
Capaz el problema es que la transparencia en la caja sera para una
pagina
que va dentro de otra en un iframe, nose capaz por eso puede ser,
hasta
ahora me ha
traido algunas complicaciones.
Aqui dejo el codigo, espero me ayuden, saludos
head
link rel=stylesheet type=text/css href=styleiframe.css
/head
body id=contenido
div id=container3
div id=container2
div id=container1
div id=col1
!-- Column one start --
h2Nosotros/h2
pJavaScript is not required. Some website layouts
rely on
JavaScript hacks to resize divs and force elements into place but
you won't
see any of that nonsense here./p
!-- Column one end --
/div
div id=col2
!-- Column two start --
h2No Images/h2
pThis three column layout requires no images. Many
CSS
website designs need images to colour in the column backgrounds but
that is
not necessary with this design. Why waste bandwidth and precious HTTP
requests when you can do everything in pure CSS and HTML?/p
h2Valid XHTML strict markup/h2
pThe HTML in this layout validates as XHTML 1.0
strict./p
h2This layout is FREE for anyone to use/h2
pYou don't have to pay anything. Simply view the
source of
this page and save the HTML onto your computer. My only suggestion
is to put
the CSS into a separate file. If you are feeling generous however,
link back
to this page so other people can find and use this layout too./p
!-- Column two end --
/div
div id=col3
!-- Column three start --
h2Cross-Browser Compatible/h2
img src=images/uvas.jpg altFotografias/
h3iPhone amp; iPod Touch/h3
ul
liSafari/li
/ul
h3Mac/h3
ul
liSafari/li
liFirefox/li
liOpera 9/li
liNetscape 7 amp; 9/li
/ul
h3Windows/h3
ul
liFirefox 1.5, 2 amp; 3/li
liSafari/li
liOpera 8 amp; 9/li
liExplorer 5.5, 6 amp; 7/li
liGoogle Chrome/li
liNetscape 8/li
/ul
!-- Column three end --
/div
/div
/div
div name=bg_name class=box_background style=height: 100%; width:
100%;style=filter:alpha(opacity=50); z-index:-200; /div
/div
script src=http://www.google-analytics.com/urchin.js;
type=text/javascript
/script
script type=text/javascript
_uacct = UA-1848067-8;
urchinTracker();
/script
/body
#contenido {
margin:0;
padding:0;
color:white;
}
.box_background {
background-color:#000;
height:100%;
left:0;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
position:absolute;
top:0;
width:100%;
z-index:-99;
}
/* Start of Column CSS */
#container3 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background: transparent;
/* column 3 background colour */
}
#container2 {
clear:left;
float:left;
width:100%;
position:relative;
right:33.333%;
background:; /* column 2 background colour */
}
#container1 {
float:left;
width:100%;
position:relative;
right:33.33%;
background:#; /* column 1 background colour */
}
#col1 {
float:left;
width:29.33%;
position:relative;
left:68.67%;
overflow:hidden;
}
#col2 {
float:left;
width:29.33%;
position:relative;
left:72.67%;
overflow:hidden;
}
#col3 {
float:left;
width:29.33%;
position:relative;
left:76.67%;
overflow:hidden;
}
#col3 img {
z-index:101;
opacity:1;
}
/* -- */
El 13 de febrero de 2009 0:45, Agustin Bouillet
agustin.bouil...@gmail.comescribió:
Este método es un poco peligroso si se lo usa para un maquetado
general
pero, si es usado en particularidades dentro de un sitio o página,
puede
ser
de grán utilidad. Usarlo del modo expuesto puede atentar contra la
navegabilidad y/o accesibilidad de un sitio. No hay que descartar el
recurso
pero es imortante ser prudente.
Y sobre el enlace para la vuelta a punto de partida, es viable pero
sigue
siendo molesto e inapropiado no poder disponer de las barras de
scroll.
Mi opinión.
Gracias Rodrigo por atender a mi pregunta.
