Tema: Imposible de hacer con CSS?
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 12/09/2009, 06:54
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 11 meses
Puntos: 539
Respuesta: Imposible de hacer con CSS?
Esta estructura (dos columnas laterales de anchura fina y una central ocupando el resto del espacio disponible) es la clásica de los layouts de tres columnas.

Mira a ver si el siguiente código te sirve como base para lograr lo que necesitas.

Código html: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <head>
  4. <title>Kseso? jugando con css</title>
  5. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  6. <style type="text/css">
  7. * {margin: 0; padding:0; outline: none; border: 0;}
  8. body {font-size:99%; font-family:sans-serif; background:#f5f5f5;}
  9.  
  10. #header {background:#521E39;}
  11.  
  12. #izquierda {float:left; width:280px; padding:10px; background:#91D0D0;}
  13. #derecha{float:right; width:280px; padding:10px; background:#65684A}
  14. #centro {background:#e0e0e0; margin-top:10px;}
  15.  
  16. #izquierda, #centro, #derecha {padding-bottom:500px; margin-bottom:-500px;}
  17.  
  18. #contenedor {overflow:hidden; background:#e0e0e0;display:inline-block; min-width:970px;}
  19.  
  20.  
  21. #footer {clear:both; background:#191919; margin-top:-3px;}
  22.  
  23. .caja-top {padding:10px;}
  24. .caja-top img {float: left; display: inline; border: 1px solid #f5f5f5;}
  25. h1 {font-size:3em; margin:0; padding:10px 0; color:#fff; font-family: monospace;}
  26. h2, h3 {font-size:1.8em; margin:0; padding:8px 0; font-family: serif;}
  27. p {font-size:1em; line-height:1.5em; margin:0; padding:5px;}
  28. #footer p, #header p, #derecha p {color:#fff;}
  29. .monospace {font-family: monospace; font-size: 1.2em; background: #FF6600;}
  30. .codigo {font-family: monospace; font-size:1em; letter-spacing: .1em; border: 1px solid #f5f5f5; color: #f5f5f5; background:#191919;}
  31. </style>
  32.  
  33. <!--[if lte IE 7]>
  34. <style type="text/css">
  35. #centro {float:left; display:inline; margin-left:10px; margin-right:10px;}
  36.  
  37. #contenedor {display:inline-block; width: expression(document.body.clientWidth < 971? "970px": "auto" );}
  38. </style>
  39. <![endif]-->
  40.  
  41. </head>
  42.  
  43. <body>
  44.         <div id="header">
  45.             <div class="caja-top">
  46.                <img src="http://www.forosdelweb.com/customavatars/avatar184738_13.gif" />
  47.                 <h1>- KSESO? Jugando con CSS -</h1>
  48.                 <p>Layout de tres columnas, las laterales fijas y la central ocupando el resto de espacio. Si suprimes una de las laterales, su espacio es ocupado por la central.</p>
  49.             </div>
  50.         </div>
  51.  
  52.         <div id="contenedor">
  53.             <div id="izquierda">
  54.                     <h3>Izquierda 300px</h3>
  55.                     <p class="codigo">Para ocultar esta columna o la derecha sólo hay que añadir a su css "display: none;"</p>
  56.                     <p>Lorem ipsum dolor sit amet consectetuer velit semper elit volutpat mollis. Ligula Curabitur euismod at ut auctor porta enim vel neque consequat. Massa tempus libero dui ac elit platea tincidunt Vivamus Morbi ipsum. Dui mauris ac consectetuer id in congue sem Quisque dictumst metus. Hendrerit suscipit massa rhoncus risus Vestibulum vitae tortor cursus lorem Quisque. Sagittis Pellentesque interdum ipsum et ut dolor ipsum.</p>
  57.           <p>Cursus eget nulla libero fringilla tellus In elit et at felis. Vitae id in et risus elit Sed enim Nunc ac adipiscing. Ut massa leo nec leo accumsan est justo enim Morbi lorem. Ante dolor ante tincidunt interdum Pellentesque consectetuer Curabitur In interdum nibh. Diam congue tellus enim magna adipiscing risus metus dignissim Nam justo. Laoreet platea ut.</p>
  58.           <p>Felis ac mus Nam ante tortor Donec Aliquam nunc pulvinar pellentesque. Metus massa elit Fusce feugiat vel wisi enim neque Nulla est. Nulla Phasellus Lorem faucibus semper est vitae orci vel tristique nibh. Vitae tristique rhoncus felis Maecenas ligula dignissim justo ipsum orci orci. Velit id ante aliquam congue Nulla vitae gravida sapien elit sagittis. Mattis ac risus.</p>
  59.                 </div>
  60.  
  61.             <div id="derecha">
  62.                     <h3>Derecha 300px</h3>
  63.                     <p class="monospace">Puedes cambiar el valor de la anchura de las columnas laterales. <br/>
  64.           Admiten valores en px, % o en em. Es indiferente.</p>
  65.                     <p>Lorem ipsum dolor sit amet consectetuer velit semper elit volutpat mollis. Ligula Curabitur euismod at ut auctor porta enim vel neque consequat. Massa tempus libero dui ac elit platea tincidunt Vivamus Morbi ipsum. Dui mauris ac consectetuer id in congue sem Quisque dictumst metus. Hendrerit suscipit massa rhoncus risus Vestibulum vitae tortor cursus lorem Quisque. Sagittis Pellentesque interdum ipsum et ut dolor ipsum.</p>
  66.           <p>Cursus eget nulla libero fringilla tellus In elit et at felis. Vitae id in et risus elit Sed enim Nunc ac adipiscing. Ut massa leo nec leo accumsan est justo enim Morbi lorem. Ante dolor ante tincidunt interdum Pellentesque consectetuer Curabitur In interdum nibh. Diam congue tellus enim magna adipiscing risus metus dignissim Nam justo. Laoreet platea ut.</p>
  67.              </div>
  68.  
  69.             <div id="centro">
  70.                     <h2>Centro variable</h2>
  71.                     <p class="monospace">Esta caja ocupa el espacio restante que dejan las columnas laterales. Si se oculta una de ellas, se expande para rellenar el espacio liberado por ella.</p>
  72.                     <p>Lorem ipsum dolor sit amet consectetuer velit semper elit volutpat mollis. Ligula Curabitur euismod at ut auctor porta enim vel neque consequat. Massa tempus libero dui ac elit platea tincidunt Vivamus Morbi ipsum. Dui mauris ac consectetuer id in congue sem Quisque dictumst metus. Hendrerit suscipit massa rhoncus risus Vestibulum vitae tortor cursus lorem Quisque. Sagittis Pellentesque interdum ipsum et ut dolor ipsum.</p>
  73.           <p>Cursus eget nulla libero fringilla tellus In elit et at felis. Vitae id in et risus elit Sed enim Nunc ac adipiscing. Ut massa leo nec leo accumsan est justo enim Morbi lorem. Ante dolor ante tincidunt interdum Pellentesque consectetuer Curabitur In interdum nibh. Diam congue tellus enim magna adipiscing risus metus dignissim Nam justo. Laoreet platea ut.</p>
  74.           <p>Felis ac mus Nam ante tortor Donec Aliquam nunc pulvinar pellentesque. Metus massa elit Fusce feugiat vel wisi enim neque Nulla est. Nulla Phasellus Lorem faucibus semper est vitae orci vel tristique nibh. Vitae tristique rhoncus felis Maecenas ligula dignissim justo ipsum orci orci. Velit id ante aliquam congue Nulla vitae gravida sapien elit sagittis. Mattis ac risus.</p>
  75.                 </div>
  76.  
  77.  
  78.         </div>
  79.  
  80.         <div id="footer">
  81.             <div class="content">
  82.                 <p>Este layout no es 100% elaboración propia. Siento no haber dejado constancia del original en el que está basado.</p>
  83.                 <p>Tanto la cabecera como el pie pueden ser suprimidos. No influyen en el comportamiento de la caja central.</p>
  84.             </div>
  85.         </div>
  86.  
  87. </body>
  88. </html>
Los detalles está puestos en la página.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
Última edición por kseso?; 14/09/2009 a las 07:15