Tema: centrado de varias capas
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 21/10/2009, 20:39
Avatar de kaninox
kaninox
 
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.597
Antigüedad: 19 años, 4 meses
Puntos: 49
Respuesta: centrado de varias capas
problemon amigo kseso? lo adapte a 3 lineas para ocuparlo y en firefox va ok, pero en el IE :P pa variar no me funciona. alguna idea te dejo codigo...


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:#FFFFFF;}
  9. div.prueba {border: 1px solid #BB0000;}
  10. #header {margin: 0 auto;width: 742px;overflow:auto;}
  11. #contenedor2 {margin: 0 auto;width: 742px;overflow:auto;}
  12.  
  13. #centro-izquierda {float:left; width:180px; padding:10px; background:#91D0D0;}
  14. #centro-izquierda {background: #50D0D0}
  15. #centro-derecha {float:right; width:180px; padding:10px; background:#65684A;}
  16. #centro-derecha {background: #27684A;}
  17. #centro {background:#e0e0e0; margin-top:10px; overflow:hidden;}
  18.  
  19. #centro-izquierda, #centro, #centro-derecha {padding-bottom:10000px; margin-bottom:-10000px;}
  20.  
  21. #contenedor {overflow:hidden; background:#e0e0e0;display:inline-block; min-width:742px;}
  22. .caja-top {margin: 0 auto;width: 742px;}
  23. </style>
  24. <!--[if lte IE 7]>
  25. <style type="text/css">
  26. #centro {float:left; display:inline; margin-left:10px; margin-right:10px;}
  27. #contenedor {display:inline-block; width: expression(document.body.clientWidth < 743? "742px": "auto" );}
  28. </style>
  29. <![endif]-->
  30. </head>
  31. <body>
  32. <div id="header" class="prueba">
  33. <div class="caja-top">
  34. Aki Banner y demas<br>
  35. Banner imagenes y demces
  36. </div>
  37. </div>
  38. <div id="contenedor2" class="prueba">
  39. <div id="contenedor">
  40. <div id="centro-izquierda">
  41. fg
  42. </div>
  43. <div id="centro-derecha">
  44. asdassdgsdfgdgdfgsdfgdsf dfgsdgsdfgsdfg
  45. sdgsdfg sdfgdsf gsdf d
  46. gsdfgdfgdsfgdg   dgsdfg sdfgdfsg
  47. </div>
  48. <div id="centro" style="text-align:justify;">
  49. <h3>Centro variable</h3>
  50. Al utilizar el 'min-width' no hay colapsos. El scroll horizontal aparece en una resoluciones menor a 1.024px
  51. Puedes incluir en #contenedor un 'max-width', y su equivalente para ie, para evitar problemas estéticos en pantallas de "cine"
  52. Lorem ipsum dolor sit amet consectetuer velit semper elit volutpat mollis. Ligula Curabitur euismod at ut auctor porta enim vel neque consequat. 
  53. Massa tempus libero dui ac elit platea tincidunt Vivamus Morbi ipsum. Dui mauris ac consectetuer id in congue sem Quisque dictumst metus. Hendrerit 
  54. suscipit massa rhoncus risus Vestibulum vitae tortor cursus lorem Quisque. Sagittis Pellentesque interdum ipsum et ut dolor ipsum.
  55. 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 
  56. leo accumsan est justo enim Morbi lorem. Ante dolor ante tincidunt interdum Pellentesque consectetuer Curabitur In interdum nibh. Diam congue 
  57. tellus enim magna adipiscing risus metus dignissim Nam justo. Laoreet platea ut.</div>
  58. </div>
  59. </div>
  60. </body>
  61. </html>
__________________
Gokuh Salvo al mundo. PUNTO!!!!