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 -->
<h2>Nosotros</h2>
<p>JavaScript 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 -->
<h2>No Images</h2>
<p>This 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>
<h2>Valid XHTML strict markup</h2>
<p>The HTML in this layout validates as XHTML 1.0
strict.</p>
<h2>This layout is FREE for anyone to use</h2>
<p>You 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 -->
<h2>Cross-Browser Compatible</h2>
<img src="images/uvas.jpg" alt"Fotografias"/>
<h3>iPhone & iPod Touch</h3>
<ul>
<li>Safari</li>
</ul>
<h3>Mac</h3>
<ul>
<li>Safari</li>
<li>Firefox</li>
<li>Opera 9</li>
<li>Netscape 7 & 9</li>
</ul>
<h3>Windows</h3>
<ul>
<li>Firefox 1.5, 2 & 3</li>
<li>Safari</li>
<li>Opera 8 & 9</li>
<li>Explorer 5.5, 6 & 7</li>
<li>Google Chrome</li>
<li>Netscape 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.com>escribió:
> 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 -->
> > <h2>Nosotros</h2>
> >
> > <p>JavaScript 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 -->
> > <h2>No Images</h2>
> > <p>This 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>
> > <h2>Valid XHTML strict markup</h2>
> > <p>The HTML in this layout validates as XHTML 1.0
> > strict.</p>
> >
> > <h2>This layout is FREE for anyone to use</h2>
> > <p>You 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 -->
> > <h2>Cross-Browser Compatible</h2>
> > <img src="images/uvas.jpg" alt"Fotografias"/>
> > <h3>iPhone & iPod Touch</h3>
> > <ul>
> > <li>Safari</li>
> > </ul>
> > <h3>Mac</h3>
> >
> > <ul>
> > <li>Safari</li>
> > <li>Firefox</li>
> > <li>Opera 9</li>
> > <li>Netscape 7 & 9</li>
> > </ul>
> >
> > <h3>Windows</h3>
> > <ul>
> > <li>Firefox 1.5, 2 & 3</li>
> > <li>Safari</li>
> > <li>Opera 8 & 9</li>
> >
> > <li>Explorer 5.5, 6 & 7</li>
> > <li>Google Chrome</li>
> > <li>Netscape 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.com>escribió:
> >
> >> 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: 30000px;
> >>>>> margin-bottom: -30000px;
> >>>>> }
> >>>>>
> >>>>
> >>>>
> >>>> _______________________________________________
> >>>> 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
> >>
> > _______________________________________________
> > 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
>
> Mauricio Dulce
> mauricio.du...@gmail.com
> +57 315 4183043
> http://www.3zona.com
>
> _______________________________________________
> 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
