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
<[email protected]>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 <[email protected]>
>
> > Hola, Agustín
> >
> > Agustín Bouillet escribió:
> > > On Thu, 12 Feb 2009 09:17:42 -0300, Rodrigo Álvarez Virgós <
> > [email protected]> 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 [email protected]
> > > 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 [email protected]
> > 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 [email protected]
> 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 [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
