Tema: No consigo centrar estas tablas
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 11/12/2009, 09:33
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
No consigo centrar estas tablas
Buenas,

No consigo centrar estas tablas en medio de la pantalla, he probado de todo, desde margin:0 auto, hasta text-align:center, pero no hay manera.

¿Podéis decirme que estoy haciendo mal?

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>
  3. <head>
  4. <title>Tiempos Pectra</title>
  5. <style type="text/css">
  6.  
  7. body{
  8. text-align:center;
  9. }
  10. table, th, td {
  11.     border: 1px solid #D4E0EE;
  12.     border-collapse: collapse;
  13.     font-family: "Trebuchet MS", Arial, sans-serif;
  14.     color: #555;
  15. }
  16.  
  17. h2,h4 {
  18.     font-family: "Trebuchet MS", Arial, sans-serif;
  19.     color: #555;
  20. }
  21.  
  22. caption {
  23.     font-size: 150%;
  24.     font-weight: bold;
  25.     margin: 5px;
  26. }
  27.  
  28. td, th {
  29.     padding: 7px;
  30. }
  31.  
  32. thead th {
  33.     text-align: center;
  34.     background: #E6EDF5;
  35.     color: #4F76A3;
  36.     font-size: 100% !important;
  37. }
  38.  
  39.  
  40. tbody th {
  41.     font-weight: bold;
  42. }
  43.  
  44. tbody tr { background: #FCFDFE; }
  45.  
  46. tbody tr.odd { background: #F7F9FC; }
  47.  
  48. table a:link {
  49.     color: #718ABE;
  50.     text-decoration: none;
  51. }
  52.  
  53. table a:visited {
  54.     color: #718ABE;
  55.     text-decoration: none;
  56. }
  57.  
  58. table a:hover {
  59.     color: #718ABE;
  60.     text-decoration: underline !important;
  61. }
  62.  
  63. tfoot th, tfoot td {
  64.     font-size: 85%;
  65. }
  66.  
  67. .right{
  68. float:right;
  69. }
  70. .left{
  71. float:left;
  72. }
  73.  
  74. .empleados{
  75. float:right;
  76. margin-right:90px;
  77. }
  78.  
  79. .titulo1 {
  80.     text-align: center;
  81.     color: #4F76A3;
  82.     font-size: 100% !important;
  83.     padding: 2px;
  84.     font-weight: bold;
  85.     border: 0px solid #D4E0EE;
  86.     border-collapse: collapse;
  87.     font-family: "Trebuchet MS", Arial, sans-serif;
  88.     color: #555;
  89.     width:364px;
  90.     margin:0px;
  91. }
  92. .verde thead th{
  93. background: #CEEF9C;
  94. color:#59B74F;
  95. padding: 7px;
  96. border: 1px solid #CEEF9C;
  97. }
  98. .verde td {
  99. border: 1px solid #CEEF9C;
  100. }
  101.  
  102. .resumenanterior{
  103. float:left;
  104. margin-left:20px;
  105. }
  106. .resumenhoy{
  107. float:left;
  108. margin-left:20px;
  109.  
  110. }
  111.  
  112. .resumenhoy td, .resumenmes td, .resumenanterior td, .tiempo td{
  113. text-align:center;
  114. }
  115.  
  116.  
  117. .resumenmes{
  118. float:left;
  119. margin-left:20px;
  120. }
  121.  
  122. .both{
  123. clear:both;
  124. }
  125.  
  126. .incidencias{
  127. margin-bottom:30px;
  128. }
  129.  
  130. .tiempo table{
  131. margin:auto;
  132. }
  133. .footer{
  134. font-family: "Trebuchet MS", Arial, sans-serif;
  135. font-size: 13px;
  136. color:#555;
  137. }
  138. #center{
  139. margin:0 auto;
  140. }
  141.  
  142. #contenedor{
  143. margin:0 auto;
  144. text-align:center;
  145. }
  146.  
  147.  
  148. </style>
  149. <script type="text/javascript">
  150. function abreSitio(){
  151. var URL = "http://";
  152. var web = document.form1.empleados.options[document.form1.empleados.selectedIndex].value;
  153. window.open(URL+web, '_self', '');
  154. }
  155. </script>
  156. </head>
  157.  
  158. <body>
  159. <div id="contenedor">
  160. <h2>Tiempos Empleado1</h2>
  161. <h4>Fecha: 10/12/2009</h4>
  162.  
  163. <div class="empleados">
  164.     <form name="form1" action="#" target="_blank">
  165.     <select name="empleados">
  166.     <option>» Selecciona Empleado «</option>
  167.     <option value="#">Empleado1</option>
  168.     <option value="#">Empleado2</option>
  169.     <option value="#">Empleado3</option>
  170.     <option value="#">Empleado4</option>
  171.     <option value="#">Empleado5</option>
  172.     </select>
  173.     <input type="button" value="Ir" onClick="javascript:abreSitio()"/>
  174.     </form>
  175. </div>
  176.  
  177. <div class="tiempo">
  178.     <table><thead>
  179.     <tr><th title="Minutos que anotamos en las Aperturas de Incidencias">Tiempo Aperturas</th><th title="Minutos de Aperturas MAS tiempo de los Comentarios de Pectra">Tiempo Total</th></tr></thead>
  180.     <tr><td>50</td><td>385</td></tr></table>
  181. </div>
  182. <br/>
  183. <div class="both"/>
  184. <div id="center">
  185. <div class="resumenanterior">
  186.     <p class="titulo1">Mes Anterior - NOVIEMBRE</p>
  187.     <table><thead><tr><th>Abiertas</th><th title="Botón Solucionar Incidencia">Solucionadas</th><th title="Botón Finalizar Incidencia">Cierre Administrativo</th></tr></thead>
  188.     <tr><td>17</td><td>23</td><td>26</td></tr></table>
  189. </div>
  190.  
  191. <div class="resumenhoy">
  192.     <p class="titulo1">HOY</p>
  193.     <table class="verde"><thead><tr><th>Abiertas</th><th title="Botón Solucionar Incidencia">Solucionadas</th><th title="Botón Finalizar Incidencia">Cierre Administrativo</th></tr></thead>
  194.     <tr><td>17</td><td>23</td><td>26</td></tr></table>
  195. </div>
  196.  
  197. <div class="resumenmes">
  198.     <p class="titulo1">Mes Actual - DICIEMBRE</p>
  199.     <table><thead><tr><th>Abiertas</th><th title="Botón Solucionar Incidencia">Solucionadas</th><th title="Botón Finalizar Incidencia">Cierre Administrativo</th></tr></thead>
  200.     <tr><td>17</td><td>23</td><td>26</td></tr></table>
  201. </div>
  202. </div>
  203. <div class="both"/>
  204. <br/>
  205. <br/>
  206.  
  207. <div class="incidencias">
  208. <table><thead><tr><th>ID_Comentari</th><th>ID_Incidencia</th><th>Data</th><th>Descripcio</th><th>Temps Dedicat</th><th>Creat Per</th></tr></thead>
  209. <tr><td>69002</td><td>22161</td><td>10/12/2009 9:53:57</td><td><p>aaaaaaaaaaa</p></td><td>120</td><td>12571</td></tr>
  210. <tr><td>69002</td><td>22161</td><td>10/12/2009 9:53:57</td><td><p>bbbbbbbbbbbb</p></td><td>120</td><td>12571</td></tr>
  211. <tr><td>69002</td><td>22161</td><td>10/12/2009 9:53:57</td><td><p>cccccccccccc</p></td><td>120</td><td>12571</td></tr>
  212. <tr><td>69002</td><td>22161</td><td>10/12/2009 9:53:57</td><td><p>ddddddddddddd</p></td><td>120</td><td>12571</td></tr>
  213.  
  214. </table>
  215. </div>
  216.  
  217. </div>
  218. </body>
  219. </html>

Muchas gracias de antemano!