Re: [Ovillo] diseño a 3 columnas

Thu, 14 Jun 2007 07:50:24 -0700 

Yo lo ví correctamente... igual tiene capada la url
  ----- Original Message ----- 
  From: David Pardo 
  To: Ovillo, la lista de CSS en castellano 
  Sent: Thursday, June 14, 2007 4:52 PM
  Subject: Re: [Ovillo] diseño a 3 columnas


  > david, no me funciona el enlace para ver el asunto.


  Yo lo veo bien. http://blog.corunet.com/demotrescolumnas.html

  Tal como está funciona en opera, firefox y explorer, pero usando
  javascript y el truco de los márgenes negativos que mandó listacss

  Lleva un alert para que se vea como lo hace. De todas formas, pego el
  código:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
  <html xmlns="http://www.w3.org/1999/xhtml";>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Demo tres columnas</title>
  <script type="text/javascript">
  function ajustaraltura(){
  winH = alturaventana();
  alert("ajustar altura:")
  altocolumna=winH-40;
  if( typeof( window.innerWidth ) != 'number' ) {
  document.getElementById('co11').style.height=altocolumna+'px';
  }
  document.getElementById('co11').style.minHeight=altocolumna+'px';
  }
  function alturaventana(){
  var alto= 0;
    if( typeof( window.innerWidth ) == 'number' ) {
      alto= window.innerHeight;
    } else if( document.documentElement && (
  document.documentElement.clientWidth ||
  document.documentElement.clientHeight ) ) {
      alto= document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth ||
  document.body.clientHeight ) ) {
      alto= document.body.clientHeight;
    }
    return alto;
  }
  </script>

  </head>

  <body onload="ajustaraltura()">
  <style>
  body{
  margin:0 auto;
  }
  #contenedor{
   overflow:hidden;
  }
  #co11{
   background-color:red;
   overflow:hidden;
   margin-bottom:-5000px;
   padding-bottom:5000px;
   width:20%;
   float:left;
  }
  #co12{
   background-color:blue;
   margin-bottom:-5000px;
   width:60%;
   padding-bottom:5000px; float:left;
  }
  #co13{
   background-color:yellow;
   margin-bottom:-5000px;
   width:20%;
   padding-bottom:5000px;
   float:left;
  }
  #pie{
  height:40px;
   clear:both;
   float:none;
   background-color:black;
   color:white;
   width:100%;
  }

  </style>
      <div id="contenedor">
          <div id="co11">
              rojo<br />rojo<br />rojo<br />rojo<br />rojo<br />rojo<br
  />rojo<br />rojo<br />rojo<br />rojo<br />rojo<br />rojo<br />
              rojo<br />rojo<br />rojo<br />rojo<br />rojo<br />rojo<br
  />rojo<br />rojo<br />rojo<br />rojo<br />rojo<br />rojo<br />
              rojo<br />rojo<br />rojo<br />rojo<br />rojo<br />rojo<br
  />rojo<br />rojo<br />rojo<br />rojo<br />rojo<br />rojo<br />
              verde
          </div>
          <div id="co12">azul<br />azul<br />azul<br />azul<br />azul<br
  />azul<br />azul<br />azul<br />azul<br />azul<br />azul<br />azul<br
  />azul<br />azul<br />azul<br />azul<br />azul<br />azul<br />azul<br
  />azul<br />azul<br />azul<br />azul<br />azul<br /></div>
          <div id="co13">amarillo<br />amarillo<br />amarillo<br
  />amarillo<br />amarillo<br /></div>
      </div>
   <div id="pie">pie<br />pie</div>
  </body>
  </html>
  _______________________________________________
  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

Responder a