Tema: Como hacer que se ajuste el background del contenedor a 3 columnas
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 01/01/2012, 11:13
Avatar de emprear
emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Como hacer que se ajuste el background del contenedor a 3 columnas
@ferdan_2193, en primer lugar Bienvenido a FDW.
Yo más bien te diria que rehagas tu proyecto desde cero, tenes numerosos errores y exceso de código. Te propongo este modelo para trabajar (cuidado, es un modelo, seguramente tendrás que trabajar sobre anchos de columnas y otros detalles.
Para el menú, te sugiero que busques alguna guia de como hacer un menu con listas+css y sprites para los rollover.

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>titulo</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9. div#centrar{
  10. width: 900px;
  11. margin: 0 auto;
  12. }
  13. div.cabecera{
  14. width: 100%;
  15. border: solid 0px #000;
  16. height: 170px;
  17. background: url('http://dl.dropbox.com/u/20611864/web/imagenes/cabecera.jpg');
  18. position: relative;
  19. }
  20. .fl{
  21. float: left;
  22. height: 111px;
  23. position:absolute; top:50%;left: 10px;
  24. margin-top:-55px;
  25. }
  26. .fr{
  27. float: right;
  28. height: 150px;
  29. position:absolute; top:50%;right: 10px;
  30. margin-top:-75px;
  31. }
  32. div.menu {
  33. width: 900px;
  34. height: 29px;
  35. margin: 0 auto;
  36. overflow: auto;
  37. background-color: #333;
  38. clear: both;
  39. }
  40. .izquierda, .centro, .derecha {
  41. float: left;
  42. width: 33%;
  43. height: 400px;
  44. } 
  45. .pie {
  46. width: 100%;
  47. height: 50px;
  48. background-color: #666;
  49. margin-top: 20px;
  50. }
  51. .limpiar {
  52. clear: both;
  53. }
  54. /*]]>*/
  55. </style>
  56. </head>
  57. <body>
  58. <div id="centrar">
  59.  
  60. <div class="cabecera">
  61. <img src="http://dl.dropbox.com/u/20611864/web/imagenes/logoev.png" alt="" class="fl"/>
  62. <img src="http://dl.dropbox.com/u/20611864/web/imagenes/fmstyle.png" alt="" class="fr"/>
  63. </div>
  64. <div class="menu">Menú con listas + sprites para el efecto hover</div>
  65. <div class="izquierda">Izquierda</div>
  66. <div class="centro">Centro</div>
  67. <div class="derecha">Derecha</div>
  68. <div class="limpiar"><!-- rompemos los floats para agregar un pie --></div>
  69.  
  70. <div class="pie">
  71. PIE
  72. </div>
  73. </div> <!-- fin centrado -->
  74. </body>
  75. </html>

SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.